Disqus 詳細教學:讓網站擁有社群網路形式的網站留言服務系統、社會化評論框

Disqus

  Disqus 是一個可以在自己網站加入社群網路形式的留言服務,本文將會介紹多種安裝的方法(包含手動安裝、AMP 版安裝),以及針對網站管理員可能會遇到的問題或設定做完整的步驟教學與相關內容(例如:改為繁體中文、移除廣告、加速等等)。

壹、前言

  近年來,有許多網站或部落格在網頁下方使用了 Disqus 留言評論框,到底什麼是 Disqus 呢?為什麼那麼多網站要使用 Disqus 呢?

一、簡介:Disqus 是什麼?

  Disqus 是一家利用社群網路的形式,並向各種網路社區(例如:網路論壇、部落格等等)提供網站留言服務的公司,並提供了許多不同功能的平臺,像是不同社群網路服務連結(例如提供 Disqus、Facebook、Twitter、Google 等帳號登入,但也提供匿名留言)、社群網路、用戶個人檔案、垃圾宣傳及審核工具、資料分析、電子郵件通知和在行動裝置留言等等。

  在 2011 年的時候,在 Quantcast 的美國網路排名報告中,Disqus 顯示第一,一個月單次訪問美國的次數高達 1.44 億的獨立用戶存取。在許多知名的網站(如:CNN、每日電訊報和 IGN 等)和大約七十五萬個網站(包含部落格)上,都使用了 Disqus 的留言系統。Disqus 在 2017 年 12 月 5 日的時候被 Zeta global 收購了。

二、優點:為什麼要用 Disqus?

  而在兩、三年前熱門一時的第三方留言系統,包含了 Google+ 留言、多說等等,這些曾經熱門的留言系統如今卻關閉了,若有在這些倒閉的第三方評論框留言,則在關閉後就一去不復返了,所以選擇一款能夠長久經營、不容易關閉的第三方留言系統才是較好的選擇。而 Disqus 則是目前全球熱門的留言系統之一,也是非常老牌的第三方留言系統,同時也被營銷公司 Zeta global 以九千萬美元所收購,較容易長久經營,不容易倒閉。

  目前除了 Facebook 留言框以外,再來最多網站使用的留言評論框就是 Disqus 了。雖然 Disqus 的競爭對手像是 IntenseDebate、Livefyre 及 Echo 等等,但是較不為人知、熱門程度較小。同時 Disqus 所使用的留言系統是以社群網路的形式,也就是可以查看 Disqus 用戶在不同網站有哪些留言,形成一個留言用戶在不同網站的互通,能夠增加許多人流。

  另外,Disqus 所提供的留言評論框可以提供網站管理員導入與導出留言數據,使用 WordPress 平臺還可以同步留言,所以可以讓管理員隨時備份,不會被留言平臺綁死,像 Facebook 留言框等系統接不能讓網站管理員導出留言數據,如果像之前 Google+留言框、多說等平臺那樣倒閉,留言就再也拿不回來了,所以在留言數據能夠備份或與網站同步的情況下,Disqus 是很好的選擇。

  另外,網站安裝 Disqus 留言評論框後,網站瀏覽者留言或發表留言時,留言數據與留言框都是經由 Disqus 的主機(服務器)所提供的,能一定程度上減少網站主機的負荷(因為網站就不必有大量留言的數據寫入與讀取),也能夠避免黑帽駭客與垃圾留言機器人的攻擊,也能夠達到提升速度,以及增加 SEO 的效果。

貳、建立帳戶

  要在網站中安裝 Disqus 之前,要先註冊一個 Disqus 帳號,才順利的在網頁中載入 Disqus 的留言評論框,並且使用後臺查看留言的數據與分析,請先至「Disqus 官方網站」首頁點擊上方的「Get Started」按鈕進入註冊頁面,並輸入註冊資訊後按「Signup」按鈕以獲得 Disqus 帳號。

參、安裝

  Disqus 安裝在自己網站的方法有許多種,包含了在各類架站平台(例如:WordPress、Drupal、Joomla 等等)中安裝,以及直接用程式碼直接手動的安裝方式,但如果是要安裝在 AMP 網頁的話也是有的,只不過會比較複雜,以下介紹幾種最常見的安裝方式,讀者只要選擇其中一種安裝即可。

方法一:在架站平臺安裝中安裝 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 官網參閱安裝說明,在此不再說明。

方法二:手動使用程式碼安裝 Disqus

  雖然使用 Disqus 官方所提供的架站平臺安裝方法可能是最快、最方便的方式,但是如果有獨立手動安裝的需求,像是想要自行更改程式碼以符合自身網站的需求(像是改樣式、更動顯示位置等等),或是除了官方所提供的架站平臺之外,或者直接黏貼在一般的 HTML 檔中,亦或者想要手動獨立安裝以減少數據查詢次數以降低主機負荷等因素,那麼 Disqus 也提供使用程式碼的方式可以使用,只要將以下官方所提供的程式碼貼到想要顯示的網頁中即可。

<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) 等參數,而原始官方的程式碼是把這兩個參數給屏蔽的,所以要改成以下的程式碼,記得網址和識別碼要修改。

<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()),以下程式碼為例。

<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 = '<?php echo get_permalink(); ?>';  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '<?php the_ID(); ?>'; // 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>
                            

方法三:在 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 檔的「</head>」位置之前,將以下 AMP 專案的 iframe 元件的程式碼寫入

<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 所設定的域名名稱。

<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」改成剛剛新創好的檔案網址。

<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」一樣改成新創檔案的網址。

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>
 </amp-iframe>';
 }
 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」連線。

肆、進階設定

  在以上內容中,就已經針對 Disqus 的各種安裝方法做教學說明,只要正確安裝完成後,基本上就可以成功地在網頁中顯示 Disqus 留言評論框了,但是如果還要更進一步的做一些設定,讓 Disqus 留言評論框能夠更符合自己的需求,也可以做其它的自定義化設定,本章節將會針對一些讀者可能會有需求、有問題的設定做教學說明。

一、允許匿名留言

  在安裝好 Disqus 之後,系統預設是不能夠匿名留言的,必須要登入 Disqus、Facebook、Twitter、Google 等帳號之後才能夠留言,但事實上可以從後臺設定來開啟允許訪客匿名留言。

  在登入 Disqus 後到系統後臺,並到「Admin > Community」的頁面,找到「Guest Commenting」的部分,並把「Allow guests to comment」打勾後按頁面底下的「Save」按鈕保存,網站訪客就可以在 Disqus 留言評論框留言時,選擇匿名留言了。

二、更改語言設定

  Disqus 的介面預設是以英文為主,但還是可以從後臺更改語言的設定。

(一)變更 Disqus 留言評論框介面的語言

方法一:從後臺變更 Disqus 語言

  更改 Disqus 語言介面最簡單快速的方法就是到後臺設定了,只要到 Disqus 後臺的「Admin > Site > General」後,看到「Language」的項目,選擇要設定的語言後按下方的「Save」鈕保存後,就可以成功地更改 Disqus 留言評論框的語言了。

方法二:插入語言代碼將 Disqus 更改為繁體中文

  雖然上述講解了如果快速從 Disqus 後臺來更改留言評論框的語言,而且也有中文 (Chinese) 的選項,但預設是卻是只有簡體中文,而沒有繁體中文的選項,如果真的一定要改成繁體中文也是有辦法的,要從 Disqus 程式碼中修改。

  由於 Disqus 的本地化語言代碼是藉由 Transifex 服務平臺網站來協做進行的,在「Disqus 翻譯項目」中,可以看到許多 Disqus 已經完成或者還在進行翻譯的語言項目,其中是有「Chinese (Taiwan)」的語言,而且翻譯進度已經達到百分之百完成了。在舊版的頁面中將滑鼠移到語言名稱上方,會顯示出語言的代碼,但是不知道為什麼現在新版的介面似乎無法顯示語言代碼了,不過筆者還是在網路上找到以前介面的一些語言代碼。

Language語言語言代碼
English英文en
Chinese簡體中文zh
Chinese (Taiwan)繁體中文zh_TW

  首先,知道了語言代碼後,就要將更改語言的程式碼加入至 Disqus 的程式碼中了。在 Disqus 程式碼中找到以下的程式碼。

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 留言評論框此頁面所要顯示的語言是哪一個,記得更改語言代碼。

this.language = "修改為要變更的語言代碼"; // Disqus 顯示語言

  以下為配置後的示範的例子,保存修改的檔案後就可以正常顯示更改後的語言了。

var disqus_config = function () {
  this.language = "zh_TW";
  this.page.url = "https://www.wpchen.net/zh/posts/disqus";
  this.page.identifier = "/zh/posts/disqus"";
};

  雖然可以用以上加入程式碼的方法來將 Disqus 留言評論框的語言設定為繁體中文,但是實際測試過後發現只有部分文字能夠顯示繁體中文,剩下的部分卻是顯示英文,這代表其實 Disqus 官方並沒有完全將留言評論框的語言翻譯為繁體中文,只能等待官方日後能夠將完整的譯文加入了。讀者可以自行選擇是否還是保留此設定,還是默認英文或改為簡體中文。

(二)變更 Disqus 留言數量連結與管理員名稱的語言

  除了 Disqus 留言評論框可以更改語言外,如果網站是使用 WordPress 架站平臺,或者是有調用 Disqus 的留言數量 API,會發現顯示的留言數量是英文的,這時可以將「Comment Count Link」內的「Comments」文字改為中文,保存後就可以更改語言設定了。

  在同一個頁面中,還有一個地方也可以針對語言做設定,在「Moderator Badge Text」欄中可以設定管理員在網站的 Disqus 留言評論框留言時,在帳號名稱左方所顯示的管理員稱謂,如果留空 (Mod) 則會顯示「General」所設定的語言。

三、加載速度提升

  網頁速度是經營網站的其中之一個指標,加速也能夠適度的提升 SEO,雖然在網站中加入 Disqus 留言評論框能夠增加網站管理者與訪客之間的互動性,也能夠促進不同網站卻能共享 Disqus 帳號的社群網路型態,但不該因此而犧牲掉網頁的加載與瀏覽速度。可能會有網站管理者安裝 Disqus 後發現速度有變慢些,因為畢竟是要從第三方加載資源,但還是能夠透過一些方法讓加載 Disqus 留言評論框的網頁速度加快。

(一)取消 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 留言評論框後就不會再載入其它的資源了。

(二)延遲 Disqus 的載入

  在上述說明如何取消 Disqus 的追蹤與返利連結後,基本上 Disqus 的載入速度就已經很快了,但是如果覺得加載的速度還不夠快的話,可以試試將 Disqus 延後載入,也是能夠提升網頁加載速度的方法之一。另外,在以下的程式碼當中,請記得一定要將「disqus_shortname」改為自己在 Disqus 的 shortname,如果要指定網址和識別碼時,可以在 <script> 的後方加上網址和識別碼的參數。

方法一:滾動頁面延遲加載

  此方法只在網頁訪客將頁面往下移動到靠近 Disqus 留言評論框附近時才開始加載 Disqus,方法只要將安裝的方法改為以下的 JavaScript 程式碼即可。

<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 庫來執行,則可以改為以下的程式碼。

<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>
方法二:點擊開關按鈕的延遲加載

  除了滾動頁面延遲加載 Disqus 來加速網頁以外,如果不想要讓訪客把網頁往下拉時自動加載,或者覺得留言的人數太少不想要自動顯示,那麼也可以改成讓訪客手動點擊開啟 Disqus 留言評論框按鈕才顯示,不點擊時則一直維持隱藏的狀態。

  如要使用 JavaSript 來實現此功能可以將以下程式碼加入到要顯示 Disqus 留言評論框的位置中。

<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</button>
</div>

  如果想要使用 jQuery 庫的方式,則可以改為以下的程式碼。

<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</button>
</div>

  保存之後就可以擁有點擊開關而顯示或隱藏 Disqus 留言評論框的按鈕了。如果使用的程式碼是 jQuery 版本的,但沒有正常顯示,請查看網頁是否有正常加載 jQuery 庫,沒有的話請記得引入 jQuery,引入方法在網路上已有許多教學,在此不再贅述。或者改用純 JavaScript 版的程式碼。

四、移除廣告

  多數網站或網路服務的經營是需要一定的經費以正常運行,所以很可能會放置廣告是在所難免的,尤其像 Disqus 這種留言評論框的服務很可能每時每刻會有數百甚至數千個網站在存取數百、數千條的留言數據,會消耗非常多的網站伺服器資源。

  Disqus 一剛開始服務的時候是完全沒有廣告的,後來大約是在 2013 年左右的時候(不是很確定確切的時間)開始有廣告的,當時可以在 Disqus 的後臺自由地把廣告關閉,如果不把廣告關閉,也可以開啟利用 Disqus 所顯示的廣告作為分潤來賺取收入。

  但是後來官方關閉廣告分潤賺錢,並且強制無法完全取消廣告,也就是在三個廣告位中(評論留言框的「上方 (Above Comments)」、「評論之間 (In-thread)」、「下方 (Below Comments)」),僅僅可以選擇關閉至多兩個廣告位,最少要保留一個廣告位(也可以三個廣告位全部開啟)。

  不過並不是每個使用 Disqus 的網頁都會顯示廣告,只有在流量足夠大的網站才會自動顯示廣告,若網頁瀏覽量不夠大則不會顯示廣告。但是對於流量較大的網站、部落格的站長來說,應該會有許多人想要把在評論留言框顯示的廣告給移除,以下介紹幾種可以把 Disqus 廣告給關閉的方法。

方法一:從後臺關閉 Disqus 廣告

  Disqus 早期從沒有廣告到有廣告時,那時可以在後臺自由地把廣告給關閉,不需要負任何的費用,但是後來隨著服務量增大,已經改成強制一定要開啟廣告,但是官方提供升級付費帳號可以在後臺關閉廣告

方法二:利用安裝 AMP 過濾 Disqus 廣告

  前本文前述的安裝方法中,有提到如何將 Disqus 放置在 AMP 網頁當中,也說明了 AMP 網頁不允許使用自定義的 JavaScript,必須要使用 AMP 專案所提供的元件才行。而 Disqus 內的廣告也是使用 JavaScript 來調用廣告的,正因為如此,如果使用 AMP 網頁來安裝 Disqus ,很自然而然地廣告的程式碼就會被阻擋,因此就不會顯示 Disqus 的廣告了。

方法三:插入移除 Disqus 廣告的程式碼

  要移除 Disqus 廣告還可以只用一段 jQuery 的程式碼,就可以解決這個問題了。將以下程式碼插入每個有顯示 Disqus 留言評論框的網頁中,該段程式碼會檢查 Disqus 留言評論框是否有廣告,如果有則會刪除廣告。注意:請確定網頁有引入 jQuery,否則無法正常生效!

<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>

方法四:安裝移除 Disqus 廣告的 WordPress 外掛

  若讀者所架設的網站是使用 WordPress 架站平臺,那麼可以試試使用安裝 WordPress 外掛(插件)的方式來移除 Disqus 廣告,但是不一定有用,筆者在 WordPress 外掛平臺中找到一款名為「Remove Disqus Ads」的外掛,但經測試後發現沒有起作用,不曉得是版本的關係或其它原因,所以在此不在深入討論,有興趣的讀者再自行試試看。

五、其它功能的程式碼調用

  Disqus 除了可以在自己的網網站上放上留言評論框的功能外,官方也提供了可以調用 Disqus 的「最新評論」(Recent Comments)、「熱門留言」(Top Commenters)、「聚合評論」(Combination) 與「熱門文章」(Popular Treads) 等功能,只需要把程式碼放在想要顯示的網頁上即可,例如側邊攔或任何頁面。

(一)最新評論

<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」。

(二)熱門留言

<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」。

(三)聚合評論

<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:字節長度

(四)熱門文章

<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:顯示數量。

(五)安裝至 AMP 中

  在 AMP 網頁中安裝「最新評論」、「熱門留言」、「聚合評論」與「熱門文章」等其它 Disqus 所提供的附加功能,作法與本文前述所說的載 AMP 網頁中安裝 Disqus 的方法相同。只要先把想要顯示的程式碼貼在另一個非 AMP 的網頁當中(創建一個新的 HTML 檔),接著在 AMP 網頁引入 AMP iframe 元件並嵌入創建好的新檔,就可以在 AMP 網頁中正常顯示了。實際做法為將以下的程式碼貼在要顯示的 AMP 網頁中,記得更改嵌入的網址。

<amp-iframe width=600 height=140 layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups" resizable frameborder="0" src="請記得更改這裡的網址" ></amp-iframe>

參考文獻

  1. Hovspian (2019),〈Disqus for Accelerated Mobile Pages (AMP)〉,GitHub。
  2. JACK (2013),〈Disqus最新評論JS調用碼〉,月光部落。
  3. Larry (2016),〈WordPress AMP配置Disqus評論功能〉,HZSH Site。
  4. pallxk (2016),〈Disqus 中文化〉,zzz.buzz。
  5. Rahul (2018),〈Load Disqus on Click and Scroll Events〉,W3Bits。
  6. Sukka (2019),〈使 Disqus 不再拖累性能和页面加载〉,Sukka’s Blog。
  7. 可芮 (2017),〈营销科技公司Zeta收购同类创企Disqus,交易金额或达9000万美元〉,猎云网。
  8. 維基百科編者 (2018),〈Accelerated Mobile Pages〉,維基百科。
  9. 維基百科編者 (2018),〈Disqus〉,維基百科。