如何在 Blogger 插入 Facebook 留言框？

Posted on by

 

Blogger 是 Google 所推出網誌服務，而這個網誌服務最大的特色就是彈性很大，也因此我們可以在 Blogger 中加入一堆外部服務，讓我們的部落格更精彩。而這個 Blogger服務如何和臉書結合，在 Blogger 中加入臉書的留言框呢？其實步驟有點繁雜，而且會依你的模版而有所差異，不過海芋只能大概整理一下，如果有這方面困擾或需求的讀者，也可以參考一下。如不成功，也再請您加入海芋小站的粉絲團，並再寄信給我，我再幫您看看。

 

 

臉書應用程式 網站介紹
網站介面：中文
網站售價：免費
操作難度：中階~高階
網站網址：https://developers.facebook.com/apps

 

Step 1.
在修改之前，請先連到「Blogger」後台，並按下【範本】→【備份/還原】來備份您的網誌範本。之後再連到「臉書的應用程式」，接著按下右上角的「建立應用程式」，之後輸入「應用程式名稱」後，按下【繼續】。

 

 

Step 2.
在成功輸入你的驗證碼後，在「APP Domain」輸入「blogspot.com」，或者輸入你的網域，而在「Facebook登入網站」則是輸入你的部落格網址。

 

Step 3.
接著，前往你的「Blogger管理介面」，並且按下後台的【範本】→【編輯HTML】，並勾選「展開小裝置範本」，之後，在 「」後面，加入以下的程式碼，其中「FACEBOOK APP ID」請替換成你的臉書應用程式 ID。

 

Step 4.
找著，在開頭的「<html」處，加入以下程式碼：

xmlns:fb="http://ogp.me/ns/fb#

加入之後如下：

 

Step 5.
接著，找到下面的程式碼。

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

 

在該段程式碼後面加入以下的程式碼，其中「en_US」為英文語系，如果你要換成繁體中文，就將「en_US」改成「zh_TW」。

  1. <b:if cond='data:blog.pageType == "item"'>

  2. <div id="fb-root"></div>

  3. <script>(function(d){

  4.  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

  5.  js = d.createElement('script'); js.id = id; js.async = true;

  6.  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

  7.  d.getElementsByTagName('head')[0].appendChild(js);

  8. }(document));</script>

  9. <fb:comments width='450' colorscheme='light' expr:title='data:post.title' 

  10. expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>

  11. </b:if>

 

加入之後如下圖：

 

Step 6.
最後，你應該就能看到你的臉書留言框囉！

 

Step 7.
接著，連到臉書的「留言管理介面」，並且按下【設定】。

 

Step 8.
最後，在版主處新增版主，而當有人利用這個留言框留言時，版主就會收到通知囉！

 

而如果您有問題，請將您備份的檔案，透過海芋小站粉絲團寄給我吧，我若有時間再幫您看看，但請別忘了給我您的「臉書應用程式ID」。