一個前端引用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

然后我們就可以進行評論系統后台的配置了:

 

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

如有不對的地方歡迎大家指出,謝謝!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM