在 facebook fanpage 标签上嵌入 facebook like 按钮

Question

我一直在尝试找出究竟如何在 Facebook 粉丝页面上添加某种类似按钮。我知道有办法做到这一点。比如这个页面实现了一种点赞按钮：http://www.facebook.com/JimBeam?v=app_100742133310820

我知道这两个页面都使用应用程序，而不是您通常使用的静态 FBML 页面。所以我创建了一个运行良好的应用程序。

在此应用程序中，“赞”按钮有效。但是，当我尝试将其添加到 Facebook 页面上的选项卡时，我收到一条错误消息：“呈现标签“iframe”时出现 HTML 错误：iframe 被风味 TabFBM 禁止”所以显然 iframe 不允许呈现。但显然有办法解决这个问题，所以你对他们在其他页面上是如何做到的有任何线索吗？

我非常感谢您的回答，而且我特别好奇是否有人可以弄清楚他们如何重新设计 Jim Beam 页面上的“赞”按钮的样式。

Answer 1

Facebook 页面的标签是 FBML。而且您不能在此页面上直接添加点赞按钮（fb:like 或其他任何内容）。但是有一个“技巧”可以做到这一点，并且您提供的页面实现以下内容：

获得赞按钮的唯一方法是将其加载到 iframe 中。但是页面的 FBML 中也禁止使用 iframe。所以诀窍是使用 AJAX（fbjs 调用）加载一个 html 页面，其中包含一个带有 fb:like 按钮的 iframe。由于 Facebook 禁止 javascript 自动触发，因此在执行 ajax 调用以加载 html 的 iframe 之前，您需要点击喜欢或图片。这主要是一件令人头疼的事情。

所以，这里是概念验证代码。

第一个文件：index.html：

<script type="text/javascript">
<!-- function launch_code() {
    var ajax = new Ajax();
    ajax.responseType = Ajax.FBML;
    ajax.requireLogin = false;

    ajax.ondone = function(data) {
        document.getElementById('content').setInnerFBML(data);
    }

    document.getElementById('content').setTextValue('Loading, please wait.');

    ajax.post('http://example.com/greatpageapp/iframe.html');
    return false; }

//--> </script>

<div id='content'>
    <input type='button' onclick='launch_code(); return false;' value='click on me' />
</div>

以及 iframe.html 内容：

<center>
<table valign="top" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top" width="520" height="1500">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
    </td>
    </tr>
</center>

现已测试并正常工作。希望对您有所帮助。