首页 » Facebook API

Facebook平台提供几种不同的API:

  • 将Facebook接入网站,例如 Like按钮、登录按钮、注册插件 等。
  • 为Facebook开发App。
  • 移动平台。

将 Facebook 接入网站

Like 按钮

facebook like button

使用 Like按钮 只需要添加一行HTML即可:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.berlinix.com/index.php"
 scrolling="no" frameborder="0"
 style="border:none; width:450px; height:80px">
</iframe>

唯一要做的,就是把iframe src中的href修改为你想要分享的URL链接。

JavaScript SDK

Facebook JavaScript SDK提供的特性包括:

  • REST API、Graph API、Dialogs。
  • 对XFBML的渲染(针对社交化插件)。
  • Canvas Pages。
  • 支持 OAuth 2.0。

首先下载Facebook JavaScript SDK。然后理解一些Facebook开发的基础概念。

XFBML(eXtended Facebook Markup Language)。用XML元素显示社交插件(Social Plugins)。XFBML将被Facebook的JavaScript SDK处理和渲染。

加载 JavaScript SDK

加载JavaScript SDK的代码框架如下:

<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', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

JavaScript SDK需要一个fb-root元素,并用FB.init初始化SDK。注意把YOUR_APP_ID替换为从Facebook获取的ID。

fb-root不能用display:nonevisibility:hidden来隐藏,否则在IE下可能工作不正常。fb-root也最好不要放在一个position:absoluteposition:relative的元素中(fb-root最好是放在靠近body开始处)。

SDK是异步加载的(js.async = true),而SDK的加载协议则是根据页面的加载协议而定,可以是HTTP或HTTPS(js.src = "//...")。

当SDK加载完毕后,就会调用window.fbAsyncInit,而FB.init必须在其他初始化代码之前被调用,源码如下:

if(window.fbAsyncInit&&!window.fbAsyncInit.hasRun){
    window.fbAsyncInit.hasRun=true;
    fbAsyncInit();
}

Channel File 的作用是跨域访问,channel.html的内容可以仅仅是一行代码:

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

对通道文件而言,尽可能长的让它缓存。可以设置Expires来实现。如果没有适当的缓存,跨域访问则会非常慢。用PHP来写channel.html则是:

 <?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是可选的,但建议填写,它可以解决3方面的问题:

  1. 如果没有channelUrl,社交化插件可能无法显示。
  2. 如果没有channelUrl,而页面又包含自播放的音视频流,用户则可能听到2个声音,缘故是页面在跨域访问时将自动加载一次页面。
  3. channelUrl可以防止服务器日志记录产生重复计数。

参考

JavaScript SDK文档

JavaScript SDK在线测试

分享

0