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

Posted 2023-03-17

【中文标题】在 facebook fanpage 标签上嵌入 facebook like 按钮

【英文标题】：Embedding a facebook like button on a facebook fanpage tab

【发布时间】：2010-12-27 11:52:38

【问题描述】：

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

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

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

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

【问题讨论】：

我只能添加一个链接，所以这里有另外两个链接。这是另一个在标签上实现了喜欢的页面：facebook.com/FanpageHelpCenter?v=app_23744633048 这是我创建的应用程序：apps.facebook.com/pioneerofyear/?fb_page_id=475652665494

【参考方案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"  >
<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>

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

【讨论】：

感谢您抽出宝贵时间回答这个问题，但很遗憾我无法让它工作。 iframe.html 完美运行，但每当我尝试单击按钮时，什么都没有发生。我已经更改了 ajax.post 中的代码，并将正确的代码放在 iframe.html 中。所以我真的不明白什么是行不通的......

检查浏览器中的 javascript 控制台。添加 console.log 语句以帮助调试。如果您使用的是 firefox，请安装 firebug，它也可能有助于调试。我只是 c/p 工作代码而不修改任何东西（只是 url）。