一个前端引用facebook评论插件案例

leung_blog leung_blog     2022-08-15     642

关键词:

最近公司海外的同事提了一个新的需求;那就是将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

然后我们就可以进行评论系统后台的配置了:

 

接着我们按照前面获取评论前端代码那下面的后台配置介绍进行配置就完成了。

如有不对的地方欢迎大家指出,谢谢!

 

关于facebook评论插件的一个简单问题

】关于facebook评论插件的一个简单问题【英文标题】:Asimplequestionaboutfacebookcommentsplugin【发布时间】:2011-07-1911:10:27【问题描述】:我正在努力解决一个非常简单的问题。facebook文档一如既往地没有给我足够的解释。我在我的网... 查看详情

Facebook评论社交插件不显示评论?

】Facebook评论社交插件不显示评论?【英文标题】:Facebookcommentsocialpluginnotdisplayingcomments?【发布时间】:2015-01-1419:47:39【问题描述】:我正在为一个网站使用Facebook的cmets社交插件。它在拉动评论计数,但不是实际的cmets。如果我... 查看详情

如何在 UIWebView 中使用 Facebook 评论插件

】如何在UIWebView中使用Facebook评论插件【英文标题】:HowtouseFacebookCommentsPlugininUIWebView【发布时间】:2015-07-2413:09:20【问题描述】:我想在我的应用程序UIWebView中展示Facebookcmets插件。如果用户未登录,则有一个很大的“登录Faceboo... 查看详情

URL 更改后的 Facebook 社交插件评论

】URL更改后的Facebook社交插件评论【英文标题】:FacebooksocialplugincommentsafterURLchange【发布时间】:2011-12-2907:46:18【问题描述】:只是一个简单的问题,我在这里的页面中集成了facebookcmets:http://www.bbcnepalidrama.com/main/node/3现在我已... 查看详情

Html2canvas: facebook 插件评论

】Html2canvas:facebook插件评论【英文标题】:Html2canvas:facebookplugincomments【发布时间】:2016-04-0709:23:36【问题描述】:我有一个使用facebook插件cmets的网站。我正在寻找一种将这些cmets放入屏幕截图的方法。如果我使用简单的html2canvas... 查看详情

Facebook 评论插件计数 - 统计评论计数标题未显示

】Facebook评论插件计数-统计评论计数标题未显示【英文标题】:FacebookCommentsPluginCount-thestatscommentcountheaderisnotshowing【发布时间】:2014-05-1414:08:08【问题描述】:我将Facebook评论添加到WordPress博客。评论框标题(表示xcmets带有下拉... 查看详情

在本地测试 Facebook 评论插件

】在本地测试Facebook评论插件【英文标题】:TestingFacebookCommentsPluginLocally【发布时间】:2012-02-1410:23:45【问题描述】:我正在将Facebook评论插件添加到我在本地主机上构建的站点,该站点的域类似于:http://subdomain.domain.lom/我已经... 查看详情

使用 Facebook 评论插件的应用评论在刷新后消失

】使用Facebook评论插件的应用评论在刷新后消失【英文标题】:AppCommentsusingFacebookCommentPlugindisappearafterrefresh【发布时间】:2013-06-0419:28:30【问题描述】:我的问题与这篇文章类似:CommentsusingFacebookCommentPlugindisappearafterrefresh我使... 查看详情

Facebook 评论插件 - 每个页面都有相同的评论

】Facebook评论插件-每个页面都有相同的评论【英文标题】:Facebookcommentsplugin-samecommentsoneverypage【发布时间】:2012-02-1008:31:44【问题描述】:我网站上的Facebookcmets运行良好,但当有人在一篇文章上发表评论时,网站上的每篇文章... 查看详情

通过 Facebook 评论社交插件登录不会触发事件?

】通过Facebook评论社交插件登录不会触发事件?【英文标题】:LoginviaFacebookcommentssocialplugindoesnottriggeranevent?【发布时间】:2014-03-2200:30:29【问题描述】:我正在尝试将Facebook的javascriptSDK登录/注销按钮(https://developers.facebook.com/docs/... 查看详情

尝试在 UIWebView 中加载 Facebook 评论插件

】尝试在UIWebView中加载Facebook评论插件【英文标题】:TryingtoloadFacebook-CommentsplugininaUIWebView【发布时间】:2012-05-3002:30:50【问题描述】:我正在尝试在iPhone应用程序的UIWebView中查看facebook-cmets插件。我从Facebook的iOStutorial开始,在... 查看详情

Facebook 评论插件 - 如何登录

】Facebook评论插件-如何登录【英文标题】:Facebookcommentsplugin-Howtologin【发布时间】:2017-11-3016:15:01【问题描述】:我正在将facebookcmets插件添加到我的网站,并且几乎没有编码知识。我在开始的正文标签之后添加了以下内容:<s... 查看详情

pjax 和 facebook 插件 (php)

】pjax和facebook插件(php)【英文标题】:pjaxandfacebookplugin(php)【发布时间】:2012-07-2305:57:26【问题描述】:我是用pjax来控制页面&url,所以当我按下导航键时,部分内容&url会被改变而不刷新,但现在我面临一个问题,即我在页... 查看详情

为基于 Web 的 phonegap 应用添加 facebook 评论框插件

】为基于Web的phonegap应用添加facebook评论框插件【英文标题】:Addingfacebookcommentboxpluginforwebbasedphonegapapp【发布时间】:2015-01-1821:01:04【问题描述】:我正在尝试将facebook评论框添加到我的基于Web的应用程序中,但是当我在手机上... 查看详情

Facebook评论插件黑暗模式不起作用

】Facebook评论插件黑暗模式不起作用【英文标题】:FacebookCommentPluginDarkmodeNotWorking【发布时间】:2020-12-1100:06:42【问题描述】:正如标题所说,我无法让黑暗模式为Facebook评论插件工​​作。我在FB开发人员上使用了该工具,并按... 查看详情

获取“Facebook 评论”小部件/社交插件的高度

】获取“Facebook评论”小部件/社交插件的高度【英文标题】:Gettingtheheightofa\'FacebookComments\'widget/socialplugin【发布时间】:2012-03-3006:15:41【问题描述】:使用FacebookJavascriptSDK+XFBML,我正在实现fb\'cmetswidget\',正如here所解释的那样... 查看详情

Facebook评论框移动版未调整大小

】Facebook评论框移动版未调整大小【英文标题】:FacebookCommentsBoxmobileversionnotresizing【发布时间】:2012-04-1817:23:34【问题描述】:我在iOS的网络视图中集成了一个赞按钮和一个评论框(移动设备)(使用Facebook社交插件)。几天前... 查看详情

将 Facebook 评论添加到我的 iOS 应用

】将Facebook评论添加到我的iOS应用【英文标题】:AddFacebookcommentstomyiOSapp【发布时间】:2014-11-1813:40:03【问题描述】:我正在开发一个内容显示应用程序,其中有一个表格视图和一个相应的详细信息视图,用于在Web视图中显示html... 查看详情