為Blogger加入Facebook讚(like)、寄送分享(send)與留言(comment)外掛及留言管理功能
更多外掛如相關文章推薦輪播、部落格廣告賺錢、社群網站外掛等，請見總整理文章：
Blog Plugins：部落格外掛大全整理，什麼都有、什麼都不奇怪。
隨著 Facebook 使用人數越來越多，
大家使用 Facebook 也不再只是玩開心農場和其他遊戲，
越來越多人將生活重心放在 Facebook 上，
因此如何運用廣大的 Facebook 會員的力量成為部落格的新課題與機會。
這篇要介紹的是如何在 Google 的 blog 服務 (也就是 Blogger，或稱 Blogspot) 中，
嵌入 Facebook的外掛，如讚和分享的按鈕，還有留言的機制等等。
在正式介紹所有流程前，我要先介紹這些 plugin 模組是出自何處，
他們全部都可以在 Facebook Social Plugin 中找到。
進入這個頁面後我們可以看到許多常見的功能，
最前面幾個就是我們本篇所要介紹的Like Button、Send Button和Comments，
看完了本篇之後，相信大家也能舉一反三，將其他所需的功能加入 Blogger。
＊ 注意！
如果你在看這篇時也有參考其他人寫的教學文章，
請注意現在 Facebook 已有自動抓取 url 的功能，
似乎不再需要修改替換 date-href 為 expr:href='data:post.url'就可正常運作，
先照著本篇說明做看看，我自己做過是 ok 的。
修改 expr:href='data:post.url' 只與頁面上的留言管理功能有關，
在本篇最下面有說明，若有需要可再新增上去。
另若有人知道其他 expr:href='data:post.url' 相關的作用，也歡迎留言告訴我。
要使用 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、Color Scheme、Font：這些就是設定寬度、要不要顯示留言者的圖片、顯示的文字(like的話在中文會顯示讚、顏色深淺和字型。
- 設定好後按下 Get Code。
第三步：將剛剛 Get Code 後的第一段 code複製到 blog 的 HTML程式碼適當位置。
在本篇中我們以 Blogger 做說明：
- 進入 Blogger後台，找到範本，右上角處先備份設定檔。
- 進入修改HTML的頁面，將「展開小裝置範本」或「Extend xxxx....」勾選起來。
- 用搜尋功能找到<body>的 tag，可能會有其他長相如< body class=xxxx> 之類的。
- 將第一段程式碼貼在< body> tag 的下方。
＊ 若出現錯誤可能要將script tag所夾住的「'」、「"」、「&」等取代掉，可參考這裡，
或是直接用下面的程式碼，只要修改自己的appId即可。
或是直接用下面的程式碼，只要修改自己的appId即可。
第四步：將 Get Code 的第二段 code 複製到想要放的地方。
- 如每篇文章的開頭，則可以在小裝置範本中搜尋「<b:includable id='post' var='post'>」。
- 找到適當位置後插入第二段 code。
(因還會有下圖中藍色部份：文章標題、時間、作者等)。
儲存後就會出現讚和分享的按鈕囉！
以上就是在 Blogger 中嵌入Facebook 讚和分享寄送外掛的說明，
接下來要說明的是要如何嵌入留言的功能。
第一步：點下 Facebook Social Plugin 中的 Comments 連結。
第二步：填入相關的欄位
第三步：將剛剛 Get Code 後的第一段 code複製到 blog 的 HTML程式碼適當位置。
＊ 步驟和讚的部份的第三步相同，請參考上面的流程。
＊ 若上面的已經做過，這一步可以跳過！
第四步：將 Get Code 所得到的第二段 code 複製到想要放的地方。
儲存後在每篇文章就會出現留言的地方囉！
＊ 注意！若你的留言板有出現，但沒出現上面紅框內的東西的話，
那就是你參考的別人的教學新增了expr:href='data:post.url'等設定，
再強調一次，目前應該已經不再需要這項設定了，Facebook會自己抓連結。
＊ 若要有右下角管理留言的功能，請繼續往下看！
＊ 關於與 expr:href='data:post.url' 有關的留言管理功能，也請繼續往下看！
使用者id可在 Facebook的個人頁面查看個人網址，
如果您網址長得像是http://www.facebook.com/profile.php?id=數字，那數字部分就是個人ID。
若網址長得像是http://www.facebook.com/帳號，則請到 https://graph.facebook.com/帳號，
進入後看到「"id": "數字"」，那串就是個人的ID。
修改時像這樣：
完成後若 Facebook 有登入，且有設定為管理員的話，
就可以在留言的右下角看到管理的功能了！
至於在若在上面的步驟4中新增或取代了data-href，
讓插入的程式碼由第一或第二行變第三行的話，
就可以有進階的留言管理功能，但留言處的讚的連結會消失。
＊ 讚的外掛也可以新增這行，但我目前不知道有何差異。歡迎大家留言告知。
不加 expr:href='data:post.url' 的結果：
加了 expr:href='data:post.url' 的結果：
＊ 注意讚的連結已經消失了，若還需要，請將讚的教學步驟4的程式也插入這邊即可。
總而言之，若需要留言管理功能的話可加上 expr:href='data:post.url'，
若不需要的話不加也還是可以正常運作，就看每個人的偏好囉。
P.S. 我後來還是都有加上去 orz
Social Plugins 系列文連結總整理：
以上就是在 Blogger 中嵌入Facebook 讚和分享寄送外掛的說明，
接下來要說明的是要如何嵌入留言的功能。
第一步：點下 Facebook Social Plugin 中的 Comments 連結。
第二步：填入相關的欄位
- URL to comment on：可填可不填，現在已經將預設為當前的 url 了，多數人應該都不用填。
- Number of posts：要顯示幾篇留言
- Width、Color Scheme就是設定寬度、顏色深淺。
- 設定好後在下面可直接看到預覽，接著按下 Get Code。
第三步：將剛剛 Get Code 後的第一段 code複製到 blog 的 HTML程式碼適當位置。
＊ 步驟和讚的部份的第三步相同，請參考上面的流程。
＊ 若上面的已經做過，這一步可以跳過！
第四步：將 Get Code 所得到的第二段 code 複製到想要放的地方。
- 通常大家都會加在每篇文章的結尾，或是專門用來放 comment 的地方。
- 若要放在文章結尾，請依照讚的說明的第四步，找到文章的結尾處(注意剛剛讚是放在文章開頭處)。
- 若要放在專門放 comment 的地方，在小裝置範本中搜尋「<b:includable id='comments' var='post'>」。
- 找到適當位置後插入第二段 code。(因還會有 blogger 內建的留言等)。
＊ 注意！若你的留言板有出現，但沒出現上面紅框內的東西的話，
那就是你參考的別人的教學新增了expr:href='data:post.url'等設定，
再強調一次，目前應該已經不再需要這項設定了，Facebook會自己抓連結。
＊ 若要有右下角管理留言的功能，請繼續往下看！
＊ 關於與 expr:href='data:post.url' 有關的留言管理功能，也請繼續往下看！
- 在留言管理功能方面，記得先到 https://developers.facebook.com/apps 新增管理員。
- 再進到修改範本的地方，在 <head> 的tag 後加入下面的程式碼。
- 設定完後即可在 http://developers.facebook.com/tools/comments 看到所有的留言！也可以在外掛頁面的右下角看到管理功能了。
使用者id可在 Facebook的個人頁面查看個人網址，
如果您網址長得像是http://www.facebook.com/profile.php?id=數字，那數字部分就是個人ID。
若網址長得像是http://www.facebook.com/帳號，則請到 https://graph.facebook.com/帳號，
進入後看到「"id": "數字"」，那串就是個人的ID。
修改時像這樣：
就可以在留言的右下角看到管理的功能了！
至於在若在上面的步驟4中新增或取代了data-href，
讓插入的程式碼由第一或第二行變第三行的話，
就可以有進階的留言管理功能，但留言處的讚的連結會消失。
＊ 讚的外掛也可以新增這行，但我目前不知道有何差異。歡迎大家留言告知。
不加 expr:href='data:post.url' 的結果：
＊ 注意讚的連結已經消失了，若還需要，請將讚的教學步驟4的程式也插入這邊即可。
總而言之，若需要留言管理功能的話可加上 expr:href='data:post.url'，
若不需要的話不加也還是可以正常運作，就看每個人的偏好囉。
P.S. 我後來還是都有加上去 orz
Social Plugins 系列文連結總整理：
參考資料：
