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

Question

Porche 是如何在他们的粉丝页面上添加 Facebook 的like 按钮的？

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

Answer 1

哇，这真是令人困惑，而且非常偷偷摸摸。看起来他们使用 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 设置为他们的 facebook 页面。他们隐藏所有评论内容并禁用评论。如果您检查该样式节点并将其删除，请查看显示的内容；）

因此，基本上他们通过在iframe 中使用 fbml 并在渲染后在其上抛出一些自定义样式来规避 Facebook 不允许在选项卡应用程序中使用 fb:like 。可能反对 Facebook 的 TOS，但我相信他们都在让保时捷摆脱它；）

Answer 2

您可以构建一个应用程序并在其上显示您想要的内容，例如在 fbiframe 中，然后您可以在其上使用任何语言（例如 php）并做一些动态的东西。