Disqus 是一个可以在自己网站加入社群网路形式的留言服务,本文将会介绍多种安装的方法(包含手动安装、AMP 版安装),以及针对网站管理员可能会遇到的问题或设定做完整的步骤教学与相关内容(例如:改为繁体中文、移除广告、加速等等)。
目录
1 前言
近年来,有许多网站或部落格在网页下方使用了Disqus 留言评论框,到底什么是Disqus 呢?为什么那么多网站要使用Disqus 呢?
1.1 简介:Disqus 是什么?
Disqus 是一家利用社群网路的形式,并向各种网路社区(例如:网路论坛、部落格等等)提供网站留言服务的公司,并提供了许多不同功能的平台,像是不同社群网路服务连结(例如提供Disqus、Facebook、Twitter、Google 等帐号登入,但也提供匿名留言)、社群网路、用户个人档案、垃圾宣传及审核工具、资料分析、电子邮件通知和在行动装置留言等等。
在2011 年的时候,在Quantcast 的美国网路排名报告中,Disqus 显示第一,一个月单次访问美国的次数高达1.44 亿的独立用户存取。在许多知名的网站(如:CNN、每日电讯报和IGN 等)和大约七十五万个网站(包含部落格)上,都使用了Disqus 的留言系统。 Disqus 在2017 年12 月5 日的时候被Zeta global 收购了。
1.2 优点:为什么要用Disqus?
而在两、三年前热门一时的第三方留言系统,包含了Google+ 留言、多说等等,这些曾经热门的留言系统如今却关闭了,若有在这些倒闭的第三方评论框留言,则在关闭后就一去不复返了,所以选择一款能够长久经营、不容易关闭的第三方留言系统才是较好的选择。而Disqus 则是目前全球热门的留言系统之一,也是非常老牌的第三方留言系统,同时也被营销公司Zeta global 以九千万美元所收购,较容易长久经营,不容易倒闭。
目前除了Facebook 留言框以外,再来最多网站使用的留言评论框就是Disqus 了。虽然Disqus 的竞争对手像是IntenseDebate、Livefyre 及Echo 等等,但是较不为人知、热门程度较小。同时Disqus 所使用的留言系统是以社群网路的形式,也就是可以查看Disqus 用户在不同网站有哪些留言,形成一个留言用户在不同网站的互通,能够增加许多人流。
另外,Disqus 所提供的留言评论框可以提供网站管理员导入与导出留言数据,使用WordPress 平台还可以同步留言,所以可以让管理员随时备份,不会被留言平台绑死,像Facebook 留言框等系统接不能让网站管理员导出留言数据,如果像之前Google+留言框、多说等平台那样倒闭,留言就再也拿不回来了,所以在留言数据能够备份或与网站同步的情况下,Disqus 是很好的选择。
另外,网站安装Disqus 留言评论框后,网站浏览者留言或发表留言时,留言数据与留言框都是经由Disqus 的主机(服务器)所提供的,能一定程度上减少网站主机的负荷(因为网站就不必有大量留言的数据写入与读取),也能够避免黑帽骇客与垃圾留言机器人的攻击,也能够达到提升速度,以及增加SEO 的效果。
2 建立帐户
要在网站中安装Disqus 之前,要先注册一个Disqus 帐号,才顺利的在网页中载入Disqus 的留言评论框,并且使用后台查看留言的数据与分析,请先至「Disqus 官方网站」首页点击上方的「Get Started」按钮进入注册页面,并输入注册资讯后按「Signup」按钮以获得Disqus 帐号。
3 安装
Disqus 安装在自己网站的方法有许多种,包含了在各类架站平台(例如:WordPress、Drupal、Joomla 等等)中安装,以及直接用程式码直接手动的安装方式,但如果是要安装在AMP 网页的话也是有的,只不过会比较复杂,以下介绍几种最常见的安装方式,读者只要选择其中一种安装即可。
3.1 方法一:在架站平台安装中安装Disqus
Disqus 官方所提供的架站平台的安装方式是最快速、最方便的方法,官方也有安装的步骤教学,只要按照指示做,就能够安装完成。目前官方所提供的安装平台有WordPress、Blogger、Tumblr、Squarespace、TypePad、Movable Type、Drupal、Joomla、Wix、Weebly、Strikingly、Jekyll、Ghost、HubSpot、Shopigy、AdobeMuse、Jimdo、Postach.io、Pattern 等等,有使用这些平台的读者可使用此方法安装。
目前最多人使用的架站平台应该就是自架的WordPress 了,可以直接到WordPress 后台的外挂(插件)功能中,搜寻Disqus 并快速安装,至于其它的架站平台可以到Disqus 官网参阅安装说明,在此不再说明。
3.2 方法二:手动使用程式码安装Disqus
虽然使用Disqus 官方所提供的架站平台安装方法可能是最快、最方便的方式,但是如果有独立手动安装的需求,像是想要自行更改程式码以符合自身网站的需求(像是改样式、更动显示位置等等),或是除了官方所提供的架站平台之外,或者直接黏贴在一般的HTML 档中,亦或者想要手动独立安装以减少数据查询次数以降低主机负荷等因素,那么Disqus 也提供使用程式码的方式可以使用,只要将以下官方所提供的程式码贴到想要显示的网页中即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id=“disqus_thread”></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ /* var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; */ (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://wpchennet.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href=“https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript> |
上方的程式码默认会根据所在的网址显示该网址的留言,但是如果要统一网址(避免不同网址但相同内容),或者需要不同网页但用同一个留言,那么可以手动修改程式码中该页面的网址(this.page.url) 和识别码(this.page.identifier) 等参数,而原始官方的程式码是把这两个参数给屏蔽的,所以要改成以下的程式码,记得网址和识别码要修改。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id=“disqus_thread”></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ var disqus_config = function () { this.page.url = 这边请改成要显示页面的网址; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = 这边请改成页面识别码,若无则可留空; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://wpchennet.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href=“https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript> |
若网站是使用WordPress 架站平台架设,那么可以使用WordPress 本身的参数来自动获取网址(get_permalink()) 和识别码(the_ID()),以下程式码为例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id=“disqus_thread”></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ var disqus_config = function () { this.page.url = ' '; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = ' '; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://wpchennet.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href=“https://disqus.com/?ref_noscript”>comments powered by Disqus.</a></noscript> |
3.3 方法三:在AMP 版网页中安装Disqus
AMP 的全名为「Accelerated Mobile Pages」(中文译为「加速行动页面」),是由Google 所领头的开放原始码专案,其目的是利用AMP HTML、AMP JS 和AMP Cache 三个部分让行动装置的网路存取速度有所提升。关于更多有关AMP 的介绍与AMP 系统的安装在网路上已有许多资讯,有需要的读者可自行查询参阅,以下将直接针对已经安装好AMP 系统的网站如何再安装Disqus 留言评论框。
在AMP 的网页中要使用需要网页渲染的元件(例如:JavaScript 等)或外部档案(例如:外连CSS、iframe、社交平台元件等等)时,都需要引入AMP 专案所规定的格式。而Disqus 本身是使用JavaScript 的方式来调用留言评论框,但是AMP 专案中并不能直接使用JavaScript 也没有Disqus 的元件,所以必须把Disqus 贴在非AMP 的网页(一般的HTML 档)中,并使用AMP 专案所提供的AMP iframe 来调用Disqus。
首先,因为要使用iframe 的方式调用Disqus,所以要在AMP 网页原始码HTML 档的「 」位置之前,将以下AMP 专案的iframe 元件的程式码写入。
1 2 3 |
<script async custom-element=“amp-iframe” src=“https://cdn.ampproject.org/v0/amp-iframe-0.1.js”> </script> |
将AMP iframe 元件的程式码引入后,接着创建一个新的HTML档(非AMP 网页),并将以下的Disqus 程式码贴到此档中,并将新的档案上传到其它不同的域名中保存(以下举例以「disqus-amp.html
」为保存的档案名称,可自行取其它名称),也就是此档案的域名不能与原本要显示Disqus 留言评论框的网页相同,并且请记得将程式码里的「EXAMPLE.disqus.com/embed.js
」中的「EXAMPLE
」改成你自己在Disqus 所设定的域名名称。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div id=“disqus_thread”></div> <script> window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { if (event.data) { var msg; try { msg = JSON.parse(event.data); } catch (err) { // Do nothing } if (!msg) return false; if (msg.name === 'resize' || msg.name === 'rendered') { window.parent.postMessage({ sentinel: 'amp', type: 'embed-size', height: msg.data.height }, ‘*’); } } } </script> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */ var disqus_config = function () { this.page.url = window.location; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = '//EXAMPLE.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> |
以上将Disqus 程式码在非AMP 的网页安装好后,最后在要显示的AMP 网页当中加入iframe 调用Disqus 的程式码。在要显示Disqus 的AMP 网页当中,请将以下的程式码贴到要显示的位置,请记得要将程式码里的「https://example.com/disqus-amp.html
」改成刚刚新创好的档案网址。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<amp-iframe width=600 height=140 layout=“responsive” sandbox=“allow-scripts allow-same-origin allow-modals allow-popups allow-forms” resizable src=“https://example.com/disqus-amp.html” > <div overflow tabindex=0 role=button aria-label=“Load more” style=“display:block;font-size:12px;font-weight:500;font-family:Helvetica Neue, arial, sans-serif;text-align:center;line-height:1.1;padding:12px 16px;border-radius:4px;background:rgba(29,47,58,0.6);color:rgb(255,255,255)” > Load more </div> </amp-iframe> |
另外,若网站为使用WordPress 系统所架设,可以将以上的程式码中加上开启留言才显示的判断式,并且网址与识别码可以改成WordPress 系统内的参数,并请记得一定要把程式码内的「https://example.com/disqus-amp.html
」一样改成新创档案的网址。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
if ( ! function_exists( 'add_disqus' ) ) { function add_disqus( $content ) { if(is_amp_endpoint()) { $post = get_post(); $content .= ‘ <amp-iframe width=600 height=140 layout=”responsive” sandbox=”allow-scripts allow-same-origin allow-modals allow-popups” resizable frameborder=”0″ src=”https://example.com/disqus-amp.html?url='.urlencode(get_permalink()).'&identifier='.urlencode($post->ID).‘” > <div overflow tabindex="0" role="button" aria-label="”Comentários”">Comentários</div> '; } return $content; } } add_action( 'the_content', 'add_disqus' ); |
以上做好准备后,即可在AMP 页面是否有正常显示Disqus 评论留言框,如果没显示则可以到Disqus 后台的「Site Advanced Settings」(Disqus > Admin > Site > Advanced),并将自己网站的域名加入至「Trusted Domains」当中,基本上就可以顺利地看到AMP 网页载入Disqus 的留言评论框了。
另外,由于amp-iframp 不允许使用非加密的「http」连线,所以域名记得开启SSL (Secure Sockets Layer) 凭证,并且程式码中的网址务必使用「https」连线。
4 进阶设定
在以上内容中,就已经针对Disqus 的各种安装方法做教学说明,只要正确安装完成后,基本上就可以成功地在网页中显示Disqus 留言评论框了,但是如果还要更进一步的做一些设定,让Disqus 留言评论框能够更符合自己的需求,也可以做其它的自定义化设定,本章节将会针对一些读者可能会有需求、有问题的设定做教学说明。
4.1 允许匿名留言
在安装好Disqus 之后,系统预设是不能够匿名留言的,必须要登入Disqus、Facebook、Twitter、Google 等帐号之后才能够留言,但事实上可以从后台设定来开启允许访客匿名留言。
在登入Disqus 后到系统后台,并到「Admin > Community」的页面,找到「Guest Commenting」的部分,并把「Allow guests to comment」打勾后按页面底下的「Save」按钮保存,网站访客就可以在Disqus 留言评论框留言时,选择匿名留言了。
4.2 更改语言设定
Disqus 的介面预设是以英文为主,但还是可以从后台更改语言的设定。
4.2.1 变更Disqus 留言评论框介面的语言
4.2.1.1 方法一:从后台变更Disqus 语言
更改Disqus 语言介面最简单快速的方法就是到后台设定了,只要到Disqus 后台的「Admin > Site > General」后,看到「Language」的项目,选择要设定的语言后按下方的「Save」钮保存后,就可以成功地更改Disqus 留言评论框的语言了。
4.2.1.2 方法二:插入语言代码将Disqus 更改为繁体中文
虽然上述讲解了如果快速从Disqus 后台来更改留言评论框的语言,而且也有中文(Chinese) 的选项,但预设是却是只有简体中文,而没有繁体中文的选项,如果真的一定要改成繁体中文也是有办法的,要从Disqus 程式码中修改。
由于Disqus 的本地化语言代码是藉由Transifex 服务平台网站来协做进行的,在「Disqus 翻译项目」中,可以看到许多Disqus 已经完成或者还在进行翻译的语言项目,其中是有「Chinese (Taiwan)」的语言,而且翻译进度已经达到百分之百完成了。在旧版的页面中将滑鼠移到语言名称上方,会显示出语言的代码,但是不知道为什么现在新版的介面似乎无法显示语言代码了,不过笔者还是在网路上找到以前介面的一些语言代码。
Disqus 的语言 | 代码 | 备注 | |
英文 | 中文 | ||
English | 英文 | en | |
Chinese | 中文 | zh | 简体中文 |
Chinese (Taiwan) | 中文(台湾) | zh_TW | 繁体中文 |
首先,知道了语言代码后,就要将更改语言的程式码加入至Disqus 的程式码中了。在Disqus 程式码中找到以下的程式码。
1 2 3 4 |
var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; |
在找到上方的程式码后,在其中加入以下程式码以宣告Disqus 留言评论框此页面所要显示的语言是哪一个,记得更改语言代码。
1 |
this.language = “修改为要变更的语言代码”; // Disqus 显示语言 |
以下为配置后的示范的例子,保存修改的档案后就可以正常显示更改后的语言了。
1 2 3 4 5 |
var disqus_config = function () { this.language = “zh_TW”; this.page.url = “https://www.wpchen.net/posts/disqus”; this.page.identifier = “/zh/posts/disqus”“; }; |
虽然可以用以上加入程式码的方法来将Disqus 留言评论框的语言设定为繁体中文,但是实际测试过后发现只有部分文字能够显示繁体中文,剩下的部分却是显示英文,这代表其实Disqus 官方并没有完全将留言评论框的语言翻译为繁体中文,只能等待官方日后能够将完整的译文加入了。读者可以自行选择是否还是保留此设定,还是默认英文或改为简体中文。
4.2.2 变更Disqus 留言数量连结与管理员名称的语言
除了Disqus 留言评论框可以更改语言外,如果网站是使用WordPress 架站平台,或者是有调用Disqus 的留言数量API,会发现显示的留言数量是英文的,这时可以将「Comment Count Link」内的「Comments」文字改为中文,保存后就可以更改语言设定了。
在同一个页面中,还有一个地方也可以针对语言做设定,在「Moderator Badge Text」栏中可以设定管理员在网站的Disqus 留言评论框留言时,在帐号名称左方所显示的管理员称谓,如果留空(Mod) 则会显示「General」所设定的语言。
4.3 加载速度提升
网页速度是经营网站的其中之一个指标,加速也能够适度的提升SEO,虽然在网站中加入Disqus 留言评论框能够增加网站管理者与访客之间的互动性,也能够促进不同网站却能共享Disqus 帐号的社群网路型态,但不该因此而牺牲掉网页的加载与浏览速度。可能会有网站管理者安装Disqus 后发现速度有变慢些,因为毕竟是要从第三方加载资源,但还是能够透过一些方法让加载Disqus 留言评论框的网页速度加快。
4.3.1 取消Disqus 的追踪与返利连结
在安装Disqus 完成后,在浏览有Disqus 留言评论框的网页时时,会发现即使Disqus 已经出现了,但是浏览器似乎还在加载一些资源,这是因为Disqus 留言评论框会载入一些返利连结和追踪连结,如果查看加载的资源会发现有各种不同域名、类型的请求,例如collect.gif、referrer.php、aff.php 等的档案不停地载入,再加上文章内可能会跑出一些不是自己设定的超连结。
虽然Disqus 留言评论框预设是会加载一些网路资源,但其实是可以从Disqus 官方后台禁止这些资源载入的,只要登陆到Disqus 后台,并进入到「Admin > Site > Advanced」的页面,并看到「Deeply integrate Disqus with your community.」的部分,并将「Tracking」与「Affiliate links」这两个选项取消后并按「Save」钮保存,完成之后就会发现开启有安装Disqus 的页面时,在显示Disqus 留言评论框后就不会再载入其它的资源了。
4.3.2 延迟Disqus 的载入
在上述说明如何取消Disqus 的追踪与返利连结后,基本上Disqus 的载入速度就已经很快了,但是如果觉得加载的速度还不够快的话,可以试试将Disqus 延后载入,也是能够提升网页加载速度的方法之一。另外,在以下的程式码当中,请记得一定要将「disqus_shortname
」改为自己在Disqus 的shortname,如果要指定网址和识别码时,可以在 <script>
的后方加上网址和识别码的参数。
4.3.2.1 方法一:滚动页面延迟加载
此方法只在网页访客将页面往下移动到靠近Disqus 留言评论框附近时才开始加载Disqus,方法只要将安装的方法改为以下的JavaScript 程式码即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div id=“disqus_thread”> <div id=“disqus_empty”></div> </div> <script> function load_disqus( disqus_shortname ) { // Prepare the trigger and target var is_disqus_empty = document.getElementById('disqus_empty'), disqus_target = document.getElementById('disqus_thread'), disqus_embed = document.createElement('script'), disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]); // Load script asynchronously only when the trigger and target exist if( disqus_target && is_disqus_empty ) { disqus_embed.type = 'text/javascript'; disqus_embed.async = true; disqus_embed.src = ‘//’ + disqus_shortname + '.disqus.com/embed.js'; disqus_hook.appendChild(disqus_embed); is_disqus_empty.remove(); } } /* * Load disqus only when the document is scrolled till the top of the * section where comments are supposed to appear. */ window.addEventListener('scroll', function(e) { var currentScroll = document.scrollingElement.scrollTop; var disqus_target = document.getElementById('disqus_thread'); if( disqus_target && (currentScroll > disqus_target.getBoundingClientRect().top – 150) ) { load_disqus('w3bits'); console.log('Disqus loaded.'); } }, false); </script> |
如果想要用jQuery 库来执行,则可以改为以下的程式码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div id=“disqus_thread”> <div id=“disqus_empty”></div> </div> <script> function load_disqus( disqus_shortname ) { // Prepare the trigger and target var is_disqus_empty = jQuery('disqus_empty'), disqus_target = jQuery('disqus_thread'), disqus_hook = (jQuery('head')[0] || jQuery('body')[0]); // Load script asynchronously only when the trigger and target exist if( disqus_target && is_disqus_empty ) { jQuery.ajaxSetup({ cache:true }); jQuery.getScript(‘//’ + disqus_shortname + '.disqus.com/embed.js'); jQuery.ajaxSetup({ cache:false }); is_disqus_empty.remove(); } } jQuery(document).scroll( function(e) { var currentScroll = $(window).scrollTop; var disqus_target = jQuery('#disqus_thread'); if( currentScroll > disqus_target.getBoundingClientRect().top – 150 ) { load_disqus('w3bits'); console.log('Disqus loaded.'); } }, false); </script> |
4.3.2.2 方法二:点击开关按钮的延迟加载
除了滚动页面延迟加载Disqus 来加速网页以外,如果不想要让访客把网页往下拉时自动加载,或者觉得留言的人数太少不想要自动显示,那么也可以改成让访客手动点击开启Disqus 留言评论框按钮才显示,不点击时则一直维持隐藏的状态。
如要使用JavaSript 来实现此功能可以将以下程式码加入到要显示Disqus 留言评论框的位置中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> function load_disqus( disqus_shortname ) { // Prepare the trigger and target var disqus_trigger = document.getElementById('disqus_trigger'), disqus_target = document.getElementById('disqus_thread'), disqus_embed = document.createElement('script'), disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]); // Load script asynchronously only when the trigger and target exist if( disqus_target && disqus_trigger ) { disqus_embed.type = 'text/javascript'; disqus_embed.async = true; disqus_embed.src = ‘//’ + disqus_shortname + '.disqus.com/embed.js'; disqus_hook.appendChild(disqus_embed); disqus_trigger.remove(); console.log('Disqus loaded.'); } } </script> <div id=“disqus_thread”></div> <button id=“diqus_trigger” onclick=“load_disqus('your_disqus_shortname')”>Post a Comment </div> |
如果想要使用jQuery 库的方式,则可以改为以下的程式码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> /** * Disqus loader which verifies the existence of `#disqus_thread` on * the web page and then prepares the disqus embed script to hook in * the document */ function load_disqus( disqus_shortname ) { // Prepare the trigger and target var disqus_trigger = jQuery('#disqus_trigger'), disqus_target = jQuery('#disqus_thread'); // Load script asynchronously only when the trigger and target exist if(disqus_target && disqus_trigger) { jQuery.ajaxSetup({ cache:true }); jQuery.getScript(‘//’ + disqus_shortname + '.disqus.com/embed.js'); jQuery.ajaxSetup({ cache:false }); disqus_trigger.remove(); console.log('Disqus loaded.'); } } </script> <div id=“disqus_thread”></div> <button id=“diqus_loader” onclick=“load_disqus('your_disqus_shortname')”>Post a Comment </div> |
保存之后就可以拥有点击开关而显示或隐藏Disqus 留言评论框的按钮了。如果使用的程式码是jQuery 版本的,但没有正常显示,请查看网页是否有正常加载jQuery 库,没有的话请记得引入jQuery,引入方法在网路上已有许多教学,在此不再赘述。或者改用纯JavaScript 版的程式码。
4.4 移除广告
多数网站或网路服务的经营是需要一定的经费以正常运行,所以很可能会放置广告是在所难免的,尤其像Disqus 这种留言评论框的服务很可能每时每刻会有数百甚至数千个网站在存取数百、数千条的留言数据,会消耗非常多的网站伺服器资源。
Disqus 一刚开始服务的时候是完全没有广告的,后来大约是在2013 年左右的时候(不是很确定确切的时间)开始有广告的,当时可以在Disqus 的后台自由地把广告关闭,如果不把广告关闭,也可以开启利用Disqus 所显示的广告作为分润来赚取收入。
但是后来官方关闭广告分润赚钱,并且强制无法完全取消广告,也就是在三个广告位中(评论留言框的「上方(Above Comments)」、「评论之间(In-thread)」、「下方(Below Comments)」),仅仅可以选择关闭至多两个广告位,最少要保留一个广告位(也可以三个广告位全部开启)。
不过并不是每个使用Disqus 的网页都会显示广告,只有在流量足够大的网站才会自动显示广告,若网页浏览量不够大则不会显示广告。但是对于流量较大的网站、部落格的站长来说,应该会有许多人想要把在评论留言框显示的广告给移除,以下介绍几种可以把Disqus 广告给关闭的方法。
4.4.1 方法一:从后台关闭Disqus 广告
Disqus 早期从没有广告到有广告时,那时可以在后台自由地把广告给关闭,不需要负任何的费用,但是后来随着服务量增大,已经改成强制一定要开启广告,但是官方提供升级付费帐号可以在后台关闭广告
4.4.2 方法二:利用安装AMP 过滤Disqus 广告
前本文前述的安装方法中,有提到如何将Disqus 放置在AMP 网页当中,也说明了AMP 网页不允许使用自定义的JavaScript,必须要使用AMP 专案所提供的元件才行。而Disqus 内的广告也是使用JavaScript 来调用广告的,正因为如此,如果使用AMP 网页来安装Disqus ,很自然而然地广告的程式码就会被阻挡,因此就不会显示Disqus 的广告了。
4.4.3 方法三:插入移除Disqus 广告的程式码
要移除Disqus 广告还可以只用一段jQuery 的程式码,就可以解决这个问题了。将以下程式码插入每个有显示Disqus 留言评论框的网页中,该段程式码会检查Disqus 留言评论框是否有广告,如果有则会删除广告。注意:请确定网页有引入jQuery,否则无法正常生效!
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> (function($){ setInterval(() => { $.each($('iframe'), (arr,X) => { let src = $(X).attr('src'); if (src && src.match(/(ads-iframe)|(disqusads)/gi)) { $(X).remove(); } }); }, 300); })(jQuery); </script> |
4.4.4 方法四:安装移除Disqus 广告的WordPress 外挂
若读者所架设的网站是使用WordPress 架站平台,那么可以试试使用安装WordPress 外挂(插件)的方式来移除Disqus 广告,但是不一定有用,笔者在WordPress 外挂平台中找到一款名为「Remove Disqus Ads」的外挂,但经测试后发现没有起作用,不晓得是版本的关系或其它原因,所以在此不在深入讨论,有兴趣的读者再自行试试看。
4.5 其它功能的程式码调用
Disqus 除了可以在自己的网网站上放上留言评论框的功能外,官方也提供了可以调用Disqus 的「最新评论」(Recent Comments)、「热门留言」(Top Commenters)、「聚合评论」(Combination) 与「热门文章」(Popular Treads) 等功能,只需要把程式码放在想要显示的网页上即可,例如侧边拦或任何页面。
4.5.1 最新评论
1 2 3 4 |
<div id=“recentcomments” class=“dsq-widget”> <h2 class=“dsq-widget-title”>Recent Comments</h2> <script type=“text/javascript” src=“http://[shortname].disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200&hide_mods=0”></script> </div> |
参数说明:
- [shortname]:请务必修改成在Disqus 所注册的shortname,才可以正常显示,若忘记的话可以到Disqus 后台查询。
- num_items:显示数量。
- excerpt_length:字节长度。
- hide_mods:隐藏管理员的评论,「0」为显示,「1」为隐藏。
- hide_avatars:隐藏头像,「0」为显示,「1」为隐藏。
- avatar_size:头像尺寸,预设大小为「预设32px」或「48px」。
4.5.2 热门留言
1 2 3 4 |
<div id=“topcommenters” class=“dsq-widget”> <h2 class=“dsq-widget-title”>Top Commenters</h2> <script type=“text/javascript” src=“http://[shortname].disqus.com/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32”></script> </div> |
参数说明:
- [shortname]:请务必修改成在Disqus 所注册的shortname,才可以正常显示,若忘记的话可以到Disqus 后台查询。
- num_items:显示数量
- hide_mods:隐藏管理员的评论,「0」为显示,「1」为隐藏。
- hide_avatars:隐藏头像,「0」为显示,「1」为隐藏。
- avatar_size:头像尺寸,预设大小为「预设32px」或「48px」。
4.5.3 聚合评论
1 2 3 4 |
<div class=“heading blue”> <h2>Community</h2> <script type=“text/javascript” src=“http://[shortname].disqus.com/combination_widget.js?num_items=5&hide_mods=1&color=grey&default_tab=recent&excerpt_length=30”></script> </div> |
参数说明:
- [shortname]:请务必修改成在Disqus 所注册的shortname,才可以正常显示,若忘记的话可以到Disqus 后台查询。
- num_items:显示数量
- excerpt_length:字节长度
4.5.4 热门文章
1 2 3 4 |
<div id=“popularthreads” class=“dsq-widget”> <h2 class=“dsq-widget-title”>Popular Threads</h2> <script type=“text/javascript” src=“http://[shortname].disqus.com/popular_threads_widget.js?num_items=5”></script> </div> |
参数说明:
- [shortname]:请务必修改成在Disqus 所注册的shortname,才可以正常显示,若忘记的话可以到Disqus 后台查询。
- num_items:显示数量。
4.5.5 安装至AMP 中
在AMP 网页中安装「最新评论」、「热门留言」、「聚合评论」与「热门文章」等其它Disqus 所提供的附加功能,作法与本文前述所说的载AMP 网页中安装Disqus 的方法相同。只要先把想要显示的程式码贴在另一个非AMP 的网页当中(创建一个新的HTML 档),接着在AMP 网页引入AMP iframe 元件并嵌入创建好的新档,就可以在AMP 网页中正常显示了。实际做法为将以下的程式码贴在要显示的AMP 网页中,记得更改嵌入的网址。
1 |
<amp-iframe width=600 height=140 layout=“responsive” sandbox=“allow-scripts allow-same-origin allow-modals allow-popups” resizable frameborder=“0” src=“请记得更改这里的网址” ></amp-iframe> |
参考文献
- Hovspian (2019),〈Disqus for Accelerated Mobile Pages (AMP)〉,GitHub。
- JACK (2013),〈Disqus最新评论JS调用码〉,月光部落。
- Larry (2016),〈WordPress AMP配置Disqus评论功能〉,HZSH Site。
- pallxk (2016),〈Disqus 中文化〉,zzz.buzz。
- Rahul (2018),〈Load Disqus on Click and Scroll Events〉,W3Bits。
- Sukka (2019),〈使Disqus 不再拖累性能和页面加载〉,Sukka's Blog。
- 可芮(2017),〈营销科技公司Zeta收购同类创企Disqus,交易金额或达9000万美元〉,猎云网。
- 维基百科编者(2018),〈Accelerated Mobile Pages〉,维基百科。
- 维基百科编者(2018),〈Disqus〉,维基百科。
更新纪录
- 2022/05/17,新增多语言版本。