2010年4月27日星期二

精品博客

精品博客

如何添加 Facebook 社交插件到你的博客

Posted: 26 Apr 2010 07:27 PM PDT

Facebook 社交插件目前一共有 8 个，你可以把其中的一个或者多个添加到你的博客上。

要把 Facebook 社交插件添加到博客上，你可以使用 iframe 代码或者 XFBML 代码。所有的 Facebook 社交插件都会提供 XFBML 代码，但是不一定提供 iframe 代码，例如留言插件 （Comments）就没有 iframe 代码。

如果选择 iframe 代码，那么你只要把代码直接复制并粘帖到你博客的任何网页或者侧边栏上就可以了，如果选择 XFBML 代码，那么你还得使用一段 JavaScript SDK 代码。具体操作如下：

一、创建一个 Facebook 应用

JavaScript SDK 代码需要用到一个叫 APP ID 的号码，所以你需要先创建这个号码，具体操作如下：

1. 填写博客信息

访问 Facebook 应用程序创建页面，你将会看到一个类似以下的页面：

Facebook social plugins

在页面上输入你的博客名称和 URL 并选择语言，点击 "Create application"，然后你就会看到你的 App ID 号码。

2. 获取 JavaScript SDK 代码

填写完博客信息之后，你就会获得一个 APP ID 以及一段样品代码，如图所示：

Facebook social plugins

在那段样品代码中，WordPress 博客只需要用到以下一段 JavaScript SDK 代码：

  1. <div id="fb-root"></div>
  2.     <script>
  3.       window.fbAsyncInit = function() {
  4.         FB.init({appId: ‘116748791679496′, status: true, cookie: true,
  5.                  xfbml: true});
  6.       };
  7.       (function() {
  8.         var e = document.createElement(’script’);
  9.         e.type = ‘text/javascript’;
  10.         e.src = document.location.protocol +
  11.           ‘//connect.facebook.net/zh_CN/all.js’;
  12.         e.async = true;
  13.         document.getElementById(‘fb-root’).appendChild(e);
  14.       }());
  15.     </script>

 

在使用的时候，你需要把上面代码中的 "116748791679496" 换成你的 APP ID。

二、在博客上添加 XFBML 代码

要使得 Facebook 社交插件的 XFBML 代码生效，你只需要把该社交插件的 XFBML 代码和 JavaScript SDK 代码放在一起就可以了。假设留言插件的 XFBML 代码如下：

  1. <fb:comments numposts="10" width="530" />

 

你把以上代码复制粘贴到博客某个网页上之后，再在该网页添加你的 JavaScript SDK 代码就可以了，实际效果如下：

如果你要把留言插件放到博客侧边栏，只要把 XFBML 代码和 JavaScript SDK 代码都放在侧边栏就可以了。

-------------------------------------


© 逛逛精品博客，看看博客精品。| 转载请遵循"署名-非商业性使用"的创作共用协议。


相关博文:

  1. Facebook 社交插件及其应用
  2. Gmail 上最强大的 Facebook 小工具
  3. 10 大 Facebook 游戏应用程序
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)