2011年11月15日

為Blogger加入Facebook建議(Recommendations)和最新動態(Activity Feed)外掛,推薦輪播熱門文章與互動


 
感覺最近的社群網站外掛教學已經快成了系列文了,
若大家要看的話建議從最初的教學開始看,因為步驟最詳細,
後面的文章因為步驟有的在前面有說過了所以會比較簡略,
如果你在過程中發現有東西不知道該怎麼做,或少了什麼,
請先看第一篇教學,這邊先依時間順序整理一下相關的教學文:
  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:部落格外掛大全整理,什麼都有、什麼都不奇怪

這篇的教學步驟和第一篇很像,不過這篇要嵌入的是建議Recommendations外掛,
這個外掛有什麼用呢?首先他可以整理出較熱門的文章,看哪些比較熱門,
如此一來,隨著時間的變換,也可以達到熱門文章輪播的效果。
除此之外這個外掛還會針對不同的Facebook登入者推薦不同的文章,
其依據是利用Facebook好友的連結,若你的好友都對某文章有評論或按了讚,
則你對這篇文章可能也會有興趣,所以會優先被推薦。

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

第一步:點下 Facebook Social Plugin 中的 Recommendations 連結。

第二步:填入相關的欄位
基本上這些設定對我而言只要設好長寬,其他都直接用預設即可,
不過還是說明一下每項在做什麼:
  1. Domain:可填可不填,現在已經將預設為當前的 domain 了,多數人應該都不用填
  2. Width and Height:外掛的長寬,這個就視你要把外掛放哪,自行設定。
  3. Header:勾選的話會在外掛左上角顯示 Recommendations 或 建議 字眼。
  4. Color Scheme:外掛要用淺色系還是深色系。
  5. Link Target:使用者點下時要不要另開新視窗,預設的 _blank 是在新視窗開啟。
  6. Border Color、Font:邊框顏色和字體。
  7. Get Code:設定完後可看右邊預覽,之後按下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 複製到想要放的地方。
這邊和先前的讚或留言放的地方可能不一樣,因為先前是每篇文章都要一個,
但對這個外掛而言,一個頁面就只需要一個,所以可以用比較簡單的方式做。
當然你要用先前的方式插入也是 ok 的。
  1. 進入 Blogger後台,找到版面配置。
  2. 找到你喜歡的地方按下新增小工具,選擇「HTML/JavaScript 」。
  3. 將第二段程式碼貼上存檔,拉動小工具至適當位置。
  4. 右上角可預覽及儲存排列方式。
這樣就大工告成啦!呈現效果如下:

另外 Activity Feed 最新動態這個外掛也可以達到類似的效果,
而且他還會將最近的讚、分享、留言等狀態顯示出來,
若你想要這項功能,只要照著這篇教學做,
把第四步的地方換成 Activity Feed 的第二段程式碼即可。
呈現效果如下:

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, social, 部落格, Facebook, 嵌, 外掛, plugin, Recommendations, 建議, 熱門文章, 推薦文章, 輪播, 功能, 模組, 加入, 教學, 最新動態, 互動, 留言, 讚, 分享, Activity Feed
參考資料:


更多精選推薦文章