一個前端引用Facebook評論插件案例

最近公司海外的同事提了一個新的需求；那就是將Facebook的評論系統接入到公司海外網站的資訊詳情頁。

下面作一個簡單的介紹：

　　首先咱們登陸到Facebook開發者平臺；而後進入評論插件系統(https://developers.facebook.com/docs/plugins/comments)

而後咱們就能夠看到Facebook評論插件的詳細介紹。

進去以後咱們就能夠看到一個獲取代碼的按鈕；只要輸入咱們須要評論的寬度就能夠了：

JS代碼：
/*****************************注意：這裏面src那裏 「th_TH」表明的是此評論須要引入的語言類型*******************************************/
1 <script>(function(d, s, id) {
2     var js, fjs = d.getElementsByTagName(s)[0];
3     if (d.getElementById(id)) return;
4     js = d.createElement(s); js.id = id;
5     js.src = "//connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v2.8&appId=Facebook帳號設置評論應用的id";
6     fjs.parentNode.insertBefore(js, fjs);
7 }(document, 'script', 'facebook-jssdk'));</script>

 

1 <div id="fb-root"></div>  <!--這裏表示Facebook評論框id-->
2 <div class="fb-like" data-share="true" data-width="450" data-show-faces="true"></div><!--顯示點贊和分享按鈕-->
3 <div class="fb-comments" data-url="http://xxx"  data-width="670" data-numposts="5"></div><!--表示當前評論是那個url下的，評論框寬度670px,一次顯示5條評論-->

這裏必定要注意：Facebook評論是根據你的url來的，因此data-url中寫的要是當前的地址；若是不寫的話只要你引入的Facebook評論插件都是那些評論。

 

這裏主要須要關注的是評論系統後臺配置的一些問題，如評論後管理員審覈是否須要顯示此條評論及禁言名單等；

如圖：

這就須要咱們進入到後臺(https://developers.facebook.com/tools-and-support/)進行配置了；進到此頁面後選擇：Comments Moderation Tool

而後咱們就能夠進行評論系統後臺的配置了：

 

接着咱們按照前面獲取評論前端代碼那下面的後臺配置介紹進行配置就完成了。

若有不對的地方歡迎你們指出，謝謝！