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

想要一个既简单又稳定而且还便宜的云服务器吗?那就选择 DigitalOcean 吧,仅需 5 块钱一个月,现在注册还可以马上获赠 10 美元。

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"‘116748791679496’‘script’);
  2.         e.type = ‘text/javascript’‘//connect.facebook.net/zh_CN/all.js’‘fb-root’

 

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

二、在博客上添加 XFBML 代码

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

  1. span class=”st0″>"10" width="530" />

 

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

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

喜欢就分享!
发布在博客技术 已有标签 , , , , . 将该链接存入书签
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具