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

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

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

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

一、创建一个 Facebook 应用

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

1. 填写博客信息

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

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

2. 获取 JavaScript SDK 代码

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

在那段样品代码中,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 代码都放在侧边栏就可以了。

发布在博客技术 已有标签 , , , , . 将该链接存入书签。 评论和互链已关闭。
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具

11 条评论

  1. 北京燃气改造
    发表于2010年04月28日 7:58 上午 | 永久链接

    额,从别处转的吧 这个看过的哦。
    .-= 北京燃气改造´s last blog ..首页 =-.

  2. 若平博客
    发表于2010年04月28日 7:59 上午 | 永久链接

    这叫收藏,对吧。

  3. 发表于2010年04月28日 8:28 上午 | 永久链接

    對牆內的訪者有甚麼影響?他們會看到嗎?
    如果他們沒有登入 FB,會出現 error message 呢?

  4. Young
    发表于2010年04月28日 12:40 下午 | 永久链接

    @梵婗 Fanny Lawren 如果国内读者不翻墙,就看不到文章中所说的“实际效果”。

  5. Andy
    发表于2010年04月28日 4:39 下午 | 永久链接

    作者每天更新一篇保持好几年,真是不容易啊,我才几个月就有点力不从心了.

  6. Young
    发表于2010年04月29日 12:20 下午 | 永久链接

    @Andy 过奖了,我也有不写博客不更新的时候。

  7. Eric Ho
    发表于2010年05月25日 10:39 上午 | 永久链接

    你好,但是我在http://www.wondershare.com/blog博客添加Facebook Comments插件(已拆掉)后遇到一个问题,就是访客对文章A的评论,会全部展示到文章B的评论下面,不能实现对不同文章显示相应的评论,请问您,这个问题怎么才能解决呢?麻烦你将解决方法发到我邮箱,或者留言到这篇文章页,我会及时关注的,谢谢您…

  8. Young
    发表于2010年05月25日 2:29 下午 | 永久链接

    @Eric Ho 请问你的每篇文章下面都有添加添加 Facebook Comments 插件代码吗?

  9. Eric Ho
    发表于2010年05月27日 1:53 下午 | 永久链接

    你好Young,每篇文章都要添加Facebook Comments代码插件才能实现不同文章不同评论的现实吗?我们用的是Wordpress博客系统,我只是在文章模板页上面添加的,该怎么每页都添加,如果是人工添加每一个篇文章,会不会工作量很大呢?

  10. Young
    发表于2010年05月27日 6:16 下午 | 永久链接

    @Eric Ho 我没有在模板上添加过 Facebook 社交插件, 所以暂时给不了你建议,不好意思。

  11. Eric Ho
    发表于2010年05月28日 4:24 下午 | 永久链接

    呵呵,没事,谢谢哈