整合Facebook 讚 與 分享按鈕到Blogger

2012年2月7日 星期二

整合Facebook 讚 與 分享按鈕到Blogger


若我們想要加強 Blogger 文章與 Facebook 的使用者關連性,讓有使用並登入 Facebook 的網友,來到您的 Blogger 後,也可以給您的文章來一個讚! 我們可以整合 Facebook 提供的 Facebook Social Plugin,來為網站提供更多的整合性!

要使用 Facebook 的外掛,請先至 http://developers.facebook.com/setup/ 申請 appId, 接下來請將你的「應用程式 ID / API 鑰匙」記下來, 下面步驟中一直會用到的appId就是指這一串數字。

接下來就可以安裝讚的功能:

第一步:點擊 Facebook Social Plugin 中的 Like Button 連結。

可針對個人需求調整設定:



  • URL to Like:可填可不填,現在已經將預設為當前的 url 了,多數人應該都不用填。 
  • Send Button:如果要加入分享的按鈕直接勾選即可。
  •  Layout Style:分為 Standard, Button_count 和 Box_count,選擇後可在右上角看到預覽。 
  • Width:設定寬度 
  • Show Faces  :要不要顯示留言者的圖片
  • Verb to display  :顯示的文字 (like的話在中文會顯示讚)
  • Color Scheme  : 顏色深淺,可配合您的版面設計
  • Font:字型

設定好後按下 Get Code。

將第一段程式碼複製起來。



第二步:登入 Blogger 管理介面
  1. 進入 Blogger後台,找到範本,右上角處先備份設定檔。 
  2. 進入範本-->修改HTML 的頁面,將「展開小裝置範本」或「Extend xxxx....」勾選起來。 
  3. 用搜尋功能找到<body>的 tag,可能會有其他長相如< body class=xxxx> 之類的。 將第一段程式碼貼在 tag 的下方。

注意需自行替換「'」、「"」、「&」等符號,可以參考這裡
如果懶得自己搞,可以直接複製以下代碼,請把 YourAppID 改成你的的 appId:


<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/zh_TW/all.js#appId=YourAppID&amp;xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

第三步:將 Get Code 的第二段 code 複製到想要放的地方。

在小裝置範本中搜尋「<b:includable id='post' var='post'>」,這是每篇文章的開頭,之後會有文章標題、時間、作者等。 找到適當位置後插入第二段 code。


這樣就可以在每篇文章前面看到網友讚聲的情況了。


Reference:
http://joshua0214.blogspot.com/2011/05/blogger-facebook.html