WHAT'S NEW?
Loading...

『教學』在Blogger加入Facebook留言板 (July 2012)

Blogger 以高自由度的設計吸引廣大的使用者,但內建的留言系統,大多數的 Blogger 預設則為 Google 帳號使用者才可以留言。不過真正使用 Google 進行社群網路的使用者則為數不多,引此透過以下步驟,將 Blogger 的留言系統加入 Facebook 的留言板,讓廣大的臉書使用者能參與自己的部落格。

1. 到 Facebook 開發人員網頁 建立一個新的應用程式

2. 在應用程式名稱填入部落格的完整名稱,並且在名稱空間填寫縮寫


3. 輸入建立應用程式的認證碼,並且繼續

4. 複製 Facebook 應用程式的 App ID



5. 登入 Blogger > 部落格首頁 > 設計 > 網誌即時狀態 > 修改 HTML > 繼續 > 展開小裝置範本

6. 利用 Control + F (Windows) / Command +F (Mac) 尋找 <html

7. 複製以下文字,取代 <html 五個字元

<html xmlns:fb='http://www.facebook.com/2008/fbml'


8. 利用 Control + F (Windows) / Command +F (Mac) 尋找 <body>,整行大概長這樣:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


9. 複製以下文字,貼在 <body... 這行文字的下面:
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;自己的 App ID 號碼&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to
access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect
.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).
appendChild(e);
}());
</script>


* 將貼上的這段文字中,黃色標註的部份,替換成第四步驟中所得到的 App ID:

10. 利用 Control + F (Windows) / Command +F (Mac) 尋找 </head>

11. 複製以下文字,貼在 </head> 這行文字的面:
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='部落格名稱' property='og:site_name'/>
<meta content='部落格 LOGO 圖片連結' property='og:image'/>
<meta content='自己的 App ID 號碼' property='fb:app_id'/>
<meta content='http://www.facebook.com/ktnetblog' property='fb:admins'/>
<meta content='article' property='og:type'/>


* 替換 部落格名稱 成自己的部落格名稱
* 替換 部落格 LOGO 圖片連結 成自己部落格 LOGO 圖片的連結網址
* 替換 自己的 App ID 號碼 成自己的 App ID 號碼
* 替換 http://www.facebook.com/ktnetblog 成自己的粉絲專頁網址


12. 利用 Control + F (Windows) / Command +F (Mac) 尋找以下這行文字:

<b:includable id='comment-form' var='post'>

13. 複製以下文字,貼在上述找到那行文字的下面:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div></div> </b:if>

* 可以選擇將 light 改成或 dark,讓留言板變成黑色系
* 改變數字 500 決定留言板的框架px寬度


14. 預覽確定沒有問題後,按下儲存範本,完成!

15. 可以在設定裡,關閉預設的 Blogger 留言板


↓ 大功告成 ↓

1 則留言: Leave Your Comments

  1. 你好,想請問我裝上去之後
    可以看到留言板,卻無法在管理頁面看到留言
    也沒有收到通知
    請問版主知道可能是哪邊出了錯嗎?

    謝謝

    回覆刪除