Blogger 嵌入 Facebook Comments 

超級簡易版

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));



document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');
</script>



後台管理版
1.首先要去 Facebook 開發人員網頁建立一個新的應用程式(可按我前往

2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID,方法如下:


Facebook查看個人首頁,如果網址是以下這種,那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字

如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱

代表你的個人首頁已經命名過了,那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱

進去後會看到「"id":"數字"」,那串數字就是你的帳號ID。

3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾,開始艱辛的修改程式碼的步驟(變動前最好先將整份範本備份一下)。

(可按下Ctrl+F)搜尋 "<head>" (是""裡的字串不包括""),在這行下方新增一行貼上這兩行:(記得帳號ID和應用程式ID要置換成你剛剛取得的)

<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>

4. 搜尋 "<body" (是""裡的字串不包括""),在這行下方新增一行貼上以下的程式碼:
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId  : '你的應用程式 ID',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true  // parse XFBML
        });
        FB.Event.subscribe('xfbml.render', function(response) {
        });
        FB.Event.subscribe('auth.sessionChange', function(response) {
            // 當 Facebook session 改變時通知
        });
        FB.Event.subscribe('edge.create', function(response) {
            // 當有人按讚時通知
        });
        FB.Event.subscribe('comments.create', function(response) {
            // 當有新留言時通知
        });

    };
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/zh_TW/all.js#appId=你的應用程式ID&amp;xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼,通常建議都放每篇文章結束後的下方,所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括""),找到這個位置,在下面新增一行貼上這行:

<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>





而我們辛辛苦苦這麼多做這麼多步驟,無非就是為了可以管理呀(不然就用超級簡易版就好了)!按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了,或者你也可以去專屬的後台網站去管理,網址是:https://developers.facebook.com/tools/comments




如上圖藍色部分,如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的,如果這塊有奇奇怪怪的錯誤資訊,代表你有哪個地方沒設對,可以去 Debugger網站抓一下 bug,網址是:https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區,代表你有哪個環節有問題,請自行照上面的錯誤提示去修改囉!修改完再測一次,紅色區塊消除的話,代表設定成功囉!



全站熱搜

c8cc168 發表在 痞客邦 留言(0) 人氣()