2011年11月7日

為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 連結。

第二步:填入相關的欄位
  1. URL to Like:可填可不填,現在已經將預設為當前的 url 了,多數人應該都不用填
  2. Send Button:如果要加入分享的按鈕直接勾選即可。
  3. Layout Style:分為 Standard, Button_count 和 Box_count,選擇後可在右上角看到預覽。
  4. Width、Show Faces、Verb to display、Color Scheme、Font:這些就是設定寬度、要不要顯示留言者的圖片、顯示的文字(like的話在中文會顯示讚、顏色深淺和字型。
  5. 設定好後按下 Get Code。

第三步:將剛剛 Get Code 後的第一段 code複製到 blog 的 HTML程式碼適當位置。
在本篇中我們以 Blogger 做說明:
  1. 進入 Blogger後台,找到範本,右上角處先備份設定檔。
  2. 進入修改HTML的頁面,將「展開小裝置範本」或「Extend xxxx....」勾選起來。
  3. 用搜尋功能找到<body>的 tag,可能會有其他長相如< body class=xxxx> 之類的。
  4. 將第一段程式碼貼在< body> tag 的下方。
* 若出現錯誤可能要將script tag所夾住的「'」、「"」、「&」等取代掉,可參考這裡
或是直接用下面的程式碼,只要修改自己的appId即可。

第四步:將 Get Code 的第二段 code 複製到想要放的地方。
  1. 如每篇文章的開頭,則可以在小裝置範本中搜尋「<b:includable id='post' var='post'>」。
  2. 找到適當位置後插入第二段 code。
    (因還會有下圖中藍色部份:文章標題、時間、作者等)。
儲存後就會出現讚和分享的按鈕囉!

以上就是在 Blogger 中嵌入Facebook 讚和分享寄送外掛的說明,
接下來要說明的是要如何嵌入留言的功能。
第一步:點下 Facebook Social Plugin 中的 Comments 連結。

第二步:填入相關的欄位

  1. URL to comment on:可填可不填,現在已經將預設為當前的 url 了,多數人應該都不用填
  2. Number of posts:要顯示幾篇留言
  3. Width、Color Scheme就是設定寬度、顏色深淺。
  4. 設定好後在下面可直接看到預覽,接著按下 Get Code。

第三步:將剛剛 Get Code 後的第一段 code複製到 blog 的 HTML程式碼適當位置。
* 步驟和讚的部份的第三步相同,請參考上面的流程。
* 若上面的已經做過,這一步可以跳過!

第四步:將 Get Code 所得到的第二段 code 複製到想要放的地方。
  1. 通常大家都會加在每篇文章的結尾,或是專門用來放 comment 的地方。
  2. 若要放在文章結尾,請依照讚的說明的第四步,找到文章的結尾處(注意剛剛讚是放在文章開頭處)。
  3. 若要放在專門放 comment 的地方,在小裝置範本中搜尋「<b:includable id='comments' var='post'>」。
  4. 找到適當位置後插入第二段 code。(因還會有 blogger 內建的留言等)。
儲存後在每篇文章就會出現留言的地方囉!

* 注意!若你的留言板有出現,但沒出現上面紅框內的東西的話,
那就是你參考的別人的教學新增了expr:href='data:post.url'等設定,
再強調一次,目前應該已經不再需要這項設定了,Facebook會自己抓連結。
* 若要有右下角管理留言的功能,請繼續往下看!
* 關於與 expr:href='data:post.url' 有關的留言管理功能,也請繼續往下看!
  1. 在留言管理功能方面,記得先到 https://developers.facebook.com/apps 新增管理員。
  2. 再進到修改範本的地方,在 <head> 的tag 後加入下面的程式碼。
  3. 設定完後即可在 http://developers.facebook.com/tools/comments 看到所有的留言!也可以在外掛頁面的右下角看到管理功能了。
其中的appId相信大家都已經知道了,
使用者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 系列文連結總整理:
  1. 為Blogger嵌入Facebook讚(like)、寄送分享(send)與留言(comment)外掛及留言管理功能
  2. 為Blogger嵌入Google Plus(Google+) +1按鈕
  3. 為Blogger嵌入Facebook建議(Recommendations)和最新動態(Activity Feed)外掛,推薦輪播熱門文章與互動
  4. Facebook Insights:精準行銷掌握Social Plugins(讚、留言、分享)統計資料與擴散狀態
更多外掛如相關文章推薦輪播、部落格廣告賺錢、社群網站外掛等,請見總整理文章:
Blog Plugins:部落格外掛大全整理,什麼都有、什麼都不奇怪

關鍵字:Blogger, blogspot, google, blog, 部落格, Facebook, 嵌, 外掛, plugin, 讚, 留言, 留言板, like, comment, 功能, 模組, 分享, 加入, 按鈕
參考資料:


更多精選推薦文章