当前位置：文江博客话题详情

粉丝页面上的“赞”按钮。他们是怎么做到的？

发布于 2024-10-04 07:30:20 字数 190 浏览 8 评论 0原文

保时捷是如何在粉丝页面添加 Facebook 点赞按钮的？

他们还更改了颜色 http://www.facebook.com/porsche?v=app_172346812791398

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柳絮泡泡 2024-10-11 07:30:20

哇，这真的很令人困惑，而且非常鬼祟。看起来他们使用 iframe 创建了一个应用程序，这将允许他们在其中创建一个 fb:like 按钮。然后他们将选项卡应用程序指向仅呈现一些 FBML 的 iframe 应用程序：

http://apps。 facebook.com/porscheevent/tab.php

因此，当您喜欢它时，在幕后，喜欢就会被注册。您会注意到，在刷新页面之前，顶部的实际按钮不会更改。

选项卡应用程序本身似乎添加了一些 CSS，然后隐藏 Like 按钮内容并将其替换为自己的内容：

<style type="text/css">
.app_content_172346812791398 div.comment_body { display: none; }
.app_content_172346812791398 span.liketext { display: none; }
.app_content_172346812791398 span.piece { display: none; }
.app_content_172346812791398 span.corner_mask { display: none; }
.app_content_172346812791398 a.like_button_no_like { border: 0px none #ffffff; margin: 0px ! important; padding: 0px; background: transparent none no-repeat scroll 0% 0%; left: 0px ! important; top: 0px ! important; width: 124px; height: 25px; text-indent: -99999px; }
.app_content_172346812791398 div.connect_widget_sample_connections { display: none; }
.app_content_172346812791398 div.connect_confirmation_cell_like { display: none; }
.app_content_172346812791398 div.connect_confirmation_cell_no_like { display: none; }
.app_content_172346812791398 div.bgpage { border: 0px none #ffffff; margin: 0px; padding: 0px; background-repeat: no-repeat; width: 520px; height: 525px; }
.app_content_172346812791398 div.button { border: 0px none #ffffff; margin: 0px; padding: 0px; background-repeat: no-repeat; background-position: center bottom; cursor: pointer; }
.app_content_172346812791398 div.button:hover { background-position: 0pt 0pt; }
.app_content_172346812791398 a.like_button_no_like { display: block; background-image: url("http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=172346812791398&v=1&size=o&cksum=b66bf4a27297d44a6672defc61932d66&src=http%3A%2F%2Ffacebook.porsche.com%2Fevent%2Fimages%2Flike.png%3F6"); background-position: center bottom; }
.app_content_172346812791398 a.like_button_no_like:hover { background-position: 0pt 0pt; }
</style>

在 iframe 应用程序中，他们使用 fb:comments 插件（上面有一个 Like 按钮）并将 returnurl 设置为他们的脸书页面。他们隐藏所有评论内容并禁用评论。如果你检查该样式节点并将其删除，看看会显示什么;)

alt text

所以基本上他们是在绕过 Facebook 不允许fb：就像在选项卡应用程序中一样，在 iframe 中使用 fbml，然后在渲染后在其上添加一些自定义样式。可能是反对 Facebook 的服务条款，但我确信他们都在从中摆脱保时捷；）

Wow, that's really confusing, and very sneaky. Looks like they created an application using an iframe, which would allow them to create a fb:like button in it. Then they pointed the tab application to that iframe app which just renders some FBML:

http://apps.facebook.com/porscheevent/tab.php

So when you like it, behind the scenes, the like is registered. You'll note that the actual button up top doesn't change until you refresh the page.

The tab application itself seems to add some CSS to then hide the Like button content and replace it with their own stuff:

<style type="text/css">
.app_content_172346812791398 div.comment_body { display: none; }
.app_content_172346812791398 span.liketext { display: none; }
.app_content_172346812791398 span.piece { display: none; }
.app_content_172346812791398 span.corner_mask { display: none; }
.app_content_172346812791398 a.like_button_no_like { border: 0px none #ffffff; margin: 0px ! important; padding: 0px; background: transparent none no-repeat scroll 0% 0%; left: 0px ! important; top: 0px ! important; width: 124px; height: 25px; text-indent: -99999px; }
.app_content_172346812791398 div.connect_widget_sample_connections { display: none; }
.app_content_172346812791398 div.connect_confirmation_cell_like { display: none; }
.app_content_172346812791398 div.connect_confirmation_cell_no_like { display: none; }
.app_content_172346812791398 div.bgpage { border: 0px none #ffffff; margin: 0px; padding: 0px; background-repeat: no-repeat; width: 520px; height: 525px; }
.app_content_172346812791398 div.button { border: 0px none #ffffff; margin: 0px; padding: 0px; background-repeat: no-repeat; background-position: center bottom; cursor: pointer; }
.app_content_172346812791398 div.button:hover { background-position: 0pt 0pt; }
.app_content_172346812791398 a.like_button_no_like { display: block; background-image: url("http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=172346812791398&v=1&size=o&cksum=b66bf4a27297d44a6672defc61932d66&src=http%3A%2F%2Ffacebook.porsche.com%2Fevent%2Fimages%2Flike.png%3F6"); background-position: center bottom; }
.app_content_172346812791398 a.like_button_no_like:hover { background-position: 0pt 0pt; }
</style>

In the iframe app they are using a fb:comments plugin (which has a Like button on it) and setting the returnurl to their facebook page. They hide all the commenting stuff and disable comments. If you inspect that style node and deleted it, look what shows up ;)

alt text

So basically they are circumventing Facebook not allowing fb:like in tab applications by using fbml in an iframe and then throwing some custom styles on top of that after it's rendered. Probably against Facebook's TOS, but I'm sure they are all getting Porsches out of it ;)

回复收藏 0 原文