Facebook“喜欢”按钮答案

【问题标题】：Facebook "like" buttonFacebook“喜欢”按钮
【发布时间】：2012-02-25 15:37:57
【问题描述】：

我的 facebook like 按钮加载速度非常慢，因此我阅读了此作为解决方案；

http://developers.facebook.com/docs/reference/javascript/

我唯一感到困惑的是这两行；

 appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File

我不确定上面会发生什么。

有人可以启发我吗？谢谢你。

编辑：这就是我的代码的样子（对于 facebook like 按钮），我知道这是不对的..

 <div id="fb-root"></div>

    <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

【问题讨论】：

标签： facebook button facebook-like

【解决方案1】：

我不太确定你需要这个。对于您的喜欢按钮，您应该使用https://developers.facebook.com/docs/reference/plugins/like/。

当您编写将中继从 Facebook API 接收到的数据的应用程序时，会使用 FB JavaScript SDK。在您的情况下，您只使用“喜欢按钮”。这不依赖于任何数据，因此您不需要它。

【讨论】：

【解决方案2】：

频道文件

频道文件解决了某些浏览器中跨域通信的一些问题。 channel.html 文件的内容可以只有一行：

 <script src="//connect.facebook.net/en_US/all.js"></script>

尽可能长时间地缓存频道文件很重要。提供此文件时，您必须发送具有较长有效期的有效 Expires 标头。这将确保频道文件被浏览器缓存，这对于流畅的用户体验很重要。如果没有适当的缓存，跨域通信将变得非常缓慢，用户体验将严重下降。在 PHP 中执行此操作的一种简单方法是：

 <?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/en_US/all.js"></script>

channelUrl 参数是可选的，但建议使用。提供通道文件可以帮助解决三个特定的已知问题。首先，包含跨框架通信的代码的页面可能会导致社交插件在没有 channelUrl 的情况下显示为空白。其次，如果没有提供 channelUrl 并且页面包含自动播放的音频或视频，则用户可能会听到两个音频流，因为该页面已在后台第二次加载以进行跨域通信。第三，通道文件将防止在您的服务器端日志中包含额外的命中。如果您不指定 channelUrl，您可以从日志中删除包含 fb_xd_bust 或 fb_xd_fragment 参数的页面浏览量，以确保正确计数。

channelUrl 必须是与包含 SDK 的页面匹配的完全限定 URL。换句话说，如果您的网站使用 www 提供服务，则频道文件域必须包含 www，并且如果您修改页面上的 document.domain，您也必须在 channel.html 文件中进行相同的 document.domain 更改。协议也必须匹配。如果您的页面是通过 https 提供的，那么您的 channelUrl 也必须是 https。记住也要为脚本 src 使用匹配协议。上面的示例代码使用了协议相关的 URL，应该可以正确处理大多数 https 情况。

应用 ID

这是您的 Facebook 应用程序 ID。转到https://developers.facebook.com/apps 并选择您设置的应用程序。如果您没有设置应用程序，请阅读：http://developers.facebook.com/docs/guides/canvas/

【讨论】：

如果您要复制粘贴 Facebook JS SDK 文档，您可能需要包含 a link to the original source。

【解决方案3】：

您链接到的页面是针对 Javascript SDK 的，这可能不是您想要的，除非您想做的不仅仅是在您的页面上添加一个“Like”按钮。要使用 SDK，您必须拥有一个 Facebook 应用并向您的网站添加一些代码，您将在该网站上获取应用 ID。

“Like”按钮文档是 here，如果 Facebook 需要一段时间来加载页面，除非你想添加一个成熟的应用程序，否则你无法做很多事情来让它更快地加载也许用它来为用户“喜欢”页面，但我不确定这是否可能。调出 Firebug 或 Chrome 开发工具，看看用时最长的是什么，但它可能只是在 Facebook 的末尾。

【讨论】：