[Blogger] 淺談 Facebook Social Plugins 的安裝
眼尖的人客應該有發現，最近 ZOG 多了按下「讚」的按鈕，這是 Facebook 的 Social Plugins。
本來不太想寫的，因為網路上很多高手寫了，Facebook 本身的文件也夠清楚。
簡單來說，大概只需要三個步驟，我採用 Facebook Javascript SDK 的方式安裝：
一、在 Facebook 上申請應用程式，這個很多文章可以參考，就不細寫了，請參考底下文章：
0 與 1 謎詭世界：如何利用 Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)
二、安裝 Facebook Javascript SDK：
把底下這段程式碼，貼在 <body> </body> 之間，實測結果，在 Blogger 這裡貼在 </body> 之前，可能是因為我前面有一堆 javascript 的 code，好像有點怪怪的，在 IE 有時候會跑不出來，後來改貼在接著 <body> 之後就沒問題了。
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script> 其中，your app id 請替換成第一個步驟申請到的 App id，en_US 的部份則可以改成您要的語系，我是改成 zh_TW。
三、以「讚」按鈕為例 (Like Button)：
你連到 Facebook Like Button 的 Get Code Wizard，可以看到設定的選項，修改之後可以預覽結果，選項旁邊的問號可以看這個選項是設定什麼以及預設值。
底下的 Code 是我使用的：(On Blogger)
<fb:like action='like' colorscheme='light' expr:href='data:post.url'
layout='standard' show_faces='false' width='500'/> 其中，show_faces 如果是 true，會出現按下推的朋友的照片。
href 的選項我針對 Blogger 改了，如果不填的話，預設是針對當前的頁面網址按「讚」，這樣當這個 Like Button 安裝在首頁有一堆文章的 Blog，只會推到的是首頁的網址，而不是該篇文章的網址，所以改成：expr:href='data:post.url'。
打完收工，還有更多的 Soical Plugins 可以安裝，並提供另一種 iframe 形式的安裝方法，請自行前往參考 Facebook 的 Social Plugins 囉。
【重要提醒 (fb_xd_fragment bug)】
由於使用 XFBML 的方式會導致 fb_xd_fragment 的問題，所以個人建議改用 iframe 版本為宜。
詳細文章請參考：[Blogger] 修正 Facebook Like Button 的 fb_xd_fragment bug
2010.10
感謝分享.
回覆刪除:D
回覆刪除謝謝您的分享！但是裝了 Like 之後，原本的內嵌式留言卻壞掉了（變成完全無法留言），我也是用 Blogger 系統，請問有什麼地方是我沒有注意到的嗎？我的部落格網址是 http://thinkerckd.blogspot.com
回覆刪除抱歉，是我自己忘了曾經重新上傳模版，不好意思打擾了 XD
回覆刪除您好，剛剛去拜訪了，也順便在您的文章中留言 (是正常的)。
回覆刪除另外也看了一下您的原始碼，安裝的位置跟語法都跟我相同，我想應該是沒問題。
(ps. 我用 firefox 跟 IE 都連上去看過)
另外，很喜歡您的部落格，便加入訂閱與連結了 :D
謝謝，是正常的，是我自己搞笑了。歡迎您常來看看 :)
回覆刪除也感謝您來到這裡，我會常常造訪您的部落格滴。
回覆刪除