2012年11月18日

如何在Blogger安装面子书插件。How to Share Your Blog and Add Facebook Comment Box in Blogger?

面子书(Facebook)推出的“Facebook Social Plugin”功能让博客把部落格(Blog)和 Facebook 连接起来。然而,小流氓发现从该插件推出(2009)至今,Facebook 做过改版,Blogger 也做过页面更改。因此,许多旧的安装教学都无法使用。无论如何,以下是小流氓的方法。

Facebook Social Plugins were launched on 2009. However, I found most of the old tutorials found were not applicable, due to Facebook and Blogger's update/change of their setting/pages. However, below is the way I install "Share Button" and "Facebook Comment Box".

Step 1: Go to your blog > Template;

Step 2: Please backup your template by click "Backup / Restore" > Save it to your computer (As a backup of your template from unforeseen errors);

Step 3: Then click "Edit HTML";

Step 1, 2, 3.

Step 4: A window pop-up, then tick "Expand Widget Templates", then search for "data:post.body"  (Keyboard: Press "Ctrl" button, then press "F") ;

Step 5: Then paste the Facebook Share Code or Facebook Comment Box Code after the code "data:post.body", as shown;

Step 6: Click "Preview" to preview the outcome. If you are satisfy with it, click "Save" > Done.

Step 4, 5, 6.

Facebook Share Button code:
<!-- Facebook share button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
</div>
</b:if>
<!-- Facebook share button End -->

Facebook Comment Box code:

<h3>Post Comment</h3>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

以下是小流氓成功后安装“Facebook Comment Box”插件后的成果。然而,你可能会发现除了 Facebook,里头还有 Twiter,Google +,Blogger,Email 等的 Share Button。方法很简单,你可以登入 http://sharethis.com/ > Register > Get Share Button 即可,不需要 edit template。

其实,根据这位博客的消息,“Facebook Share Button”的服务于2012年7月被“Facebook Recommendations”插件替代。然而,小流氓尝试过,以上方法依然可以成功安装“Facebook Share Button”的。

“Facebook Share Button”和“Facebook Recommendations”有什么分别?分别在于“Facebook Share Button”会显示在每一个帖子里;“Facebook Recommendations”则把全部被“Share”过的帖子以列表(listing)的方式呈现。安装“Facebook Recommendations”的 code 可以在这里获得:http://developers.facebook.com/docs/plugins/

Example of "Facebook comment box" & shareit plugin been installed successfully.

Example of "Facebook recommendations".


Above is the example of "Facebook Comment Box" been installed successfully. However, you can see there are more than one share button in my blog. It's easy to make it, what you need to do is to log in http://sharethis.com/ > Register > Get Share Button > Done, you are not required to edit the blog template.

In fact, "Facebook Share Button" was replaced by "Facebook Recommendations" on July 2012. However, I found above code is still usable. The difference between both plugin is "Facebook Share Button" will appear in every single post; "Facebook Recommendations" will show all the post been shared in listing manner. You could get "Facebook Recommendations" code from here: http://developers.facebook.com/docs/plugins/.


文章参考


没有评论:

发表评论

交流一下。