※2012※在Blogger上加上Facebook“赞”按钮

By:
On:
In: JavaScript
Tagged: , , ,

首先，进到Facebook的Core Concepts › Social Plugins › Like Button，在Step 1 – Get Like Button Code这里填写相关资料

那个URL to Like不用管，因为之后会再改。Send Buttonㄚ琪也不选，不过你可以试试看，它会多一个寄送的按钮。Show faces，ㄚ琪也不选，选择的话会出现按Like人的图示。

按Get Code按钮

请注意，This script uses the app ID of your app请依你自己建立的应用程式来选择。

黄色框框内的内容不要用，因为丢到Blogger的Template无法使用，改使用这样的代码：

<div id=’fb-root’/><script src=’http://connect.facebook.net/en_US/all.js#appId=？？？？？&amp;xfbml=1’/>

这个appId就是黄色框框内appId那串数字，当然不要照这图来抄，不能跑可不要怪我。

或是<div id=’fb-root’/><script src=’http://connect.facebook.net/zh_TW/all.js#appId=？？？？？&amp;xfbml=1’/>

这是给中文用的。

接着到Blogger的Template

很重要: 修改 Template前请先备份存档


修改步骤

1.版面配置 (Template) → 修改 HTML (Edit HTML) → 把 展开小装置范本 (Expand Widget Template) 打勾 来编辑范本的完整 HTML

2.将第一部分的程式码，贴到  <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>之后的下一行 


3. 将按钮置于文章标题前:
在 <h3 class=’post-title’> 代码前加入以下代码，也有可能是<data:post.title/>这样的代码，不过会有很大一段的看不懂的代码，请小心服用：

<div class=”fb-like” data-href=”http://ijx.blogspot.com” data-send=”false” data-width=”450″ data-show-faces=”false”></div>

data-href改成expr:data-href，http://ijx.blogspot.com改成data:post.url

或许你也可以找<p><data:post.body/></p>这样的代码，放入按钮程式码，不同的置法，会显示在不同位置，也请小心服用。

其他部落格程式码请参考官网说明: Like Button – Facebook

↓ 按钮样式如下