[教學] 在網頁、部落格加入Facebook留言外掛，並且同步顯示到粉絲專頁

在網頁或部落格中嵌入FB留言板是一個很常見，效果也相當不錯的方法，不但能夠提升與讀者的互動性，還能同步顯示在粉絲專頁中的留言，讓整體看起來活絡許多。這篇文章就是要教大家怎麼樣在自己的網頁中做出這樣的效果，雖然看起來稍微有點複雜，但只要細心操作其實並不困難。

第1步　首先來到Facebook for developers的網頁，滑鼠移到右上方「我的應用程式」，點擊「新增應用程式」來創立一個等一下留言板會用到的Facebook App。

第2步　輸入顯示名稱與聯絡電子郵件，並按下「建立應用程式編號」。

第3步　輸入驗證碼後按下送出即可。

第4步　接著在你想要放上的網頁中，在<head>與</head>標籤之間加入以下的程式碼：

<!– FB留言外掛 –>

<meta property=”fb:admins” content=”這邊改成管理員的Facebook ID”/>

<meta property=”fb:app_id” content=”這邊改成應用程式APP ID”>

▲以WordPress為例，可以在主題編輯器中編輯header.php。其他網頁也是一樣的道理，只要在<head>與</head>之間插入這段meta標籤就行。

第5步　App ID可以在剛剛創立的應用程式中找到「應用程式編號」，如下圖：

第6步　而管理員的FB ID則可以在查詢我的Facebook ID網頁中找到：

第7步　以上兩個ID都修改好並儲存後，到留言外掛程式的程式碼產生器網頁，依照自己的喜好輸入寬度和貼文數量，並按下取得程式碼。日後要更改這兩個參數很簡單，因此在這邊不需要猶豫太久。

第8步　這邊會得到兩段程式碼，先複製上方這段

第9步　將上方這段程式碼插入到網頁的</body>標籤之前即可。

▲以WordPress為例，可以在主題編輯器中編輯footer.php，即可找到</body>。

第10步　然後再將第二段程式碼放置到你想要顯示留言框的位置，若使用WordPress的話，通常是在single.php中找到留言的位置插入，且data-href後面網址要改成<?php the_permalink() ?>，像是：

<div class=”fb-comments” data-href=”<?php the_permalink() ?>” data-width=”寬度″ data-numposts=”顯示留言數″>

▲插入後就可以到網頁前台來看看有沒有生效囉！根據網頁的版型、設計，可能還需要調整寬度等等。

第11步　最後，若要同步顯示粉絲團的留言，則要在Facebook留言工具中按下設定，並將留言同步中的「鏡像到…」選擇你要同步顯示的粉絲專頁。