[Blogger] 淺談 Facebook Social Plugins 的安裝

image

眼尖的人客應該有發現,最近 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

留言

  1. 謝謝您的分享!但是裝了 Like 之後,原本的內嵌式留言卻壞掉了(變成完全無法留言),我也是用 Blogger 系統,請問有什麼地方是我沒有注意到的嗎?我的部落格網址是 http://thinkerckd.blogspot.com

    回覆刪除
  2. 抱歉,是我自己忘了曾經重新上傳模版,不好意思打擾了 XD

    回覆刪除
  3. 您好,剛剛去拜訪了,也順便在您的文章中留言 (是正常的)。
    另外也看了一下您的原始碼,安裝的位置跟語法都跟我相同,我想應該是沒問題。

    (ps. 我用 firefox 跟 IE 都連上去看過)

    另外,很喜歡您的部落格,便加入訂閱與連結了 :D

    回覆刪除
  4. 謝謝,是正常的,是我自己搞笑了。歡迎您常來看看 :)

    回覆刪除
  5. 也感謝您來到這裡,我會常常造訪您的部落格滴。

    回覆刪除

張貼留言

回應不用錢,請多多益善!懶得寫字按個讚也是相當感謝!

這個網誌中的熱門文章

有點誇張的準專業機.Minolta Alpha 7 (Dynax 7、Maxxum 7).2000

在 Excel 裡轉換 Unixtime 格式

Lightroom.製作並匯出 Preset