如何在 Blogger 插入 Facebook 留言框?

 

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」。