在 WordPress 使用 Facebook 留言板 (Facebook Social Plugins Comments)

● 將 Facebook Comments 嵌入 WordPress
剩最後一個步驟就可以使用剛剛建立的留言版囉!這邊因為小蛙要嵌入在 WordPress 中,因此採用 WordPress 當作範例,如果要嵌入在其他自己的網站或是部落格,只要是可以提供插入 <meta> 標籤的部落格都可以直接使用。
1. 這個步驟我們必須先取得 Facebook User ID,查看 Facebook User ID 最簡單的方法就是到自己的 Facebook 首頁(不是動態消息那一頁!),接著到自己的圖片上面點選滑鼠右鍵,並複製連結網址。網址帶的參數中 fbid= 後面接的數字(到第一個 “&” 之前)就是自己的 Facebook User ID,把這串數字複製起來。這個部分由於小蛙已經申請短網址了,fb-admin就要透過http://graph.facebook.com/hans44來查詢自己的id(把hans44改成自己短網址的名稱),可以看到回傳的值如下,第一個id就是我們要的Facebook User ID。會發現這件事是因為在Facebook developers Debugger中發現輸入http://wazai.net/總是顯示fb-admin錯誤

{
   "id": "1413647733",
   "name": "\u7ff0\u9686",
   "first_name": "\u9686",
   "last_name": "\u7ff0",
   "link": "http://www.facebook.com/hans44",
   "username": "hans44",
   "gender": "male",
   "locale": "zh_TW"
}


2. 複製以下兩條 meta 敘述,並將 {YOUR_APPLICATION_ID} 更換成應用程式資訊頁面中「應用程式 ID / API 鑰匙」後面的一串數字。{YOUR_FACEBOOK_USER_ID} 填入自己的 Facebook User ID

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>

3. 將這兩條 meta 標籤放置在會用到留言版的頁面的 <head> 把上面兩條放在這裡 </head> 中,以小蛙的 WordPress 為例,小蛙使用 Suffusion theme,以這個佈景主題來說是將這兩條放置在 wp-content/themes/suffusion/header.php 中。
4. 加完 meta 標籤之後,只剩下最後一個步驟了,將剛剛複製的留言板程式碼(Get Code 得到的程式碼)貼在要顯示留言版的地方就完成囉!如果是要跟小蛙一樣放在 WordPress 內建的留言版上面的話,將剛剛的程式碼貼在 wp-content/themes/suffusion/comments.php 中(<div id=”comments”>上面),存檔後就可以看到每篇文章最下面已經有剛剛建立的 Facebook 留言板了。

5. 感謝 Allen 提醒,照著上述的作法會發現所有頁面的留言板都會是同一個,例如A文章、B文章、C文章的留言全部都會在一起,也就是A文章中可以看到B、C文章的留言,反之亦然。這時候只要修改上一頁步驟3 Get Code得到的HTML就可以囉!原本小蛙在data-href輸入http://wazai.net/(自己的網址),把它改成

<div data-href="<?php the_permalink(); ?>" data-num-posts="10" data-width="725"></div>

讓每一篇文章都有獨立的data-href,每篇文章的留言版就會獨立出來囉!如果有網友留言留的不清不楚的話,後端的管理頁面也非常人性化,會有「檢視流言所在網頁」的選項讓版主可以連過去看看到底是哪篇文章!

您可能也會喜歡…

4 個回應

  1. 請問一下你這篇內容是不是有更新過?我有照你方法加入程式碼來做留言版,但如果有網友使用fb留言版功能,我好像不會收到通知?印象中好像文章內容還有介紹怎麼管理留言功能?

    • Hans表示:

      Dear 超好用網路行銷工具:
      文章有更新過,不過是小幅更新而已,您說的管理工具,應該是在別的頁面喔!
      (因為文章太長了所以切了頁面,可能是分頁太小了您沒注意到!)
      延伸閱讀下面有個分頁連結,第三頁有介紹管理留言介面,
      至於收到通知這件事情,小蛙沒有額外設定,開啟facebook塗鴉牆,
      最上面就會有留言通知了(就是某某某留言給你的那個通知)。
      Good Luck!! ^___^

  2. AllenChu表示:

    版主你好!請問,照你的方法做完以後,
    每一個頁面的facebook留言版是不是同一個?
    因為我出現的問題是,每一頁是同一個留言版…
    不知道有沒有什麼解決之道!若版主知道請版主指教,謝謝您!^^

    • Hans表示:

      Dear Allen:
      依照這篇文章的作法的確是會造成每一頁都是同一個留言板的問題,
      把data-href=””原本是固定網址,修改方式如下:

      <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="10" data-width="725"></div>
      

      這邊只要改成每篇文章的固定網址,就可以讓每篇文章都有自己的留言板,
      後台管理頁面中也可以直接連結到該留言版頁面!^__^

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *