用 Disqus API 3.0 做一個 Disqus 最近留言小工具 Widget

最近換了新的佈景主題,有空都在玩他的配色,剛巧假日適逢台灣連外網路出問題,又想起前陣子看到 Disqus 官網說因為提供 API 3.0 的關係,之前提供由 javascript 寫成的最近留言小工具(recet comments widget已經不再維護, 趁有點時間,順道把這個 widget 換成使用 api 3.0 的版本。

什麼是 Disqus?

Disqus 就是一個第三方整合的留言系統,它可以讓使用者透過第三方的社群帳號如:Google、Facebook、Twitter 登入留言,不需要特別記住另一組帳號密碼就可以登入留言。註冊完後,Disqus 也會將在各個網站的留言都整合在一起,方便查看、回顧以及與他人互動。

對維護部落格來說,最好的當然就是他會雙向備份留言,要搬家的時候可以無痛轉移;而且需要登入社群帳號,來亂的垃圾留言也少很多。雖然在註冊那邊勾選「I'd rather post as a guest」,就只要暱稱和信箱便可留言,但大概沒人特別寫針對 Disqus 的垃圾信箱留言機,使用後垃圾留言少了非常、非常多。

具體安裝方法可以參考香腸烤魷魚這篇非常詳細的介紹,安裝完成後WordPress 建議安裝我在之前介紹 WordPress 外掛文章提及的 Disqus Conditional Load 外掛,它能夠比官版外掛更快的載入網頁。

不再維護的 Disqus Recent Comments Widget

儘管 Disqus 已經不維護了,但如果還是想要在部落格中使用舊版的官方最近留言小工具,可以參照下面這列 javascript,到目前為止都依然能夠正常使用:

<script src="https://shortname.disqus.com/recent_comments_widget.js?num_items=5&amp;hide_mods=0&amp;hide_avatars=0&amp;avatar_size=48&amp;excerpt_length=60" type="text/javascript"></script>

使用方法是把網址中的 shortname 替換成自己網站的(在 Disqus 網站管理的 setting > general 項目中可以找到),然後 avater size(頭像大小)、expert_lenth(留言最多字數)改一改,整個複製丟到自己網頁創造的文字小工具中即可。

API 3.0 版本的 Disqus Recent Widget

鋪成了這麼久,終於可以開始講 API 3.0 版本的 Disqus 最近留言小工具。儘管舊有的 javascript 版本還可以用,但既然官方不再維護,也不建議使用,又不知道哪天會停止作用,故趁著有時間還是能換就趕快換吧!

當然我們不需要重複去造輪子,隨便 Google 一下網路上滿是方法,我參考的是 Jaime Iniesta 寫的「Building a Disqus Recent Comments Widget with JavaScript」這篇所提供的方法。使用他提供的方法,只要先拿到自己的 API KEY,然後按著他的程式碼簡單修改一下即可。

一、public Disqus API key

首先我們需要一個支援 public Disqus API key,所以我們得先連到這個網頁去創造一個新的應用(applications),在 label 的地方填上應用名稱、Description 填上敘述、Organization 填上你公司或組織、Website 入網站。這邊除了 label 要填一個好辨認的名字,Website 要填正常的網址外,其他隨便填都可以,好了後勾選下方的驗證碼完成驗證。

接著會展開網頁,讓你繼續填資料,首先是 Settings 項目 Domains(網域)中,要填可以應用在哪個網頁,一行一個:

1584DisqusRecentCommentsWidget1.jpg

Authentication(身份驗證)中,因為安全需求的問題,把 Default Access 項目改成「Read Only」,接著就可以拉到網頁最下面選擇「save changes」,完成設定。:

1584DisqusRecentCommentsWidget2.jpg

然後把網頁拉到左上角的,找到 Details 點進去,就可以在 OAuth Settings 項目中找到專用的 API Key,把他記下來:

1584DisqusRecentCommentsWidget3.jpg

二、Disqus Recent Widget 程式碼部份

1.html 部份,這裡最簡單,直接照著 Jaime Iniesta 文章中提供的 html 碼複製貼上即可:

<html>
<head>
<title>Disqus Recent Comments</title>
</head>
<body>
<ul id="comments">
<script id="comments-template" type="text/x-handlebars-template">
{{#each response}}
<li>
<div class="avatar-container">
<a href="{{author.profileUrl}}" target="_blank">
<img src="{{author.avatar.small.permalink}}" class="avatar" alt="avatar" />
</a>
</div>
<div class="post-container">
<a href="{{author.profileUrl}}" class="author_name" target="_blank">
<span class="author_name">{{author.name}}
</a>

<span class="bullet" aria-hidden="true">•</span>

<span class="timeago" title="{{createdAt}}Z">{{createdAt}}</span>

<p>{{{message}}}</p>

<span class="posted">posted on <a href="{{thread.link}}" target="_blank">{{thread.title}}</a></span>
</div>
</li>
{{/each}}
</script>
</ul>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.0/jquery.timeago.min.js"></script>
</body>
</html>

2.Javascript 部份,在第十四列 http 網址調用 API 的地方,往後拉參數「&limit=」後面的數字就是要載入多少則留言,預設是 25,最高可以 100,我這邊把他設定成 5 則。

當然這部份最重要的是,記得要將最底下第 31 列 api_key 的地方,改成自己在一步驟拿到的 API Key;以及在第 32 列 forum 的地方改改為前面提過的 shortname:

<script>
var DisqusRecent = {
init: function( config ) {
this.api_key = config.api_key;
this.forum = config.forum;
this.template = config.template;
this.container = config.container;

this.fetchRecentComments();
},

fetchRecentComments: function() {
$.ajax({
url: "https://disqus.com/api/3.0/forums/listPosts.jsonp?forum="+this.forum+"&related=thread&limit=5&api_key="+this.api_key,
dataType: "jsonp",
context: this,

success: function(results) {
var source = $(this.template).html();
var template = Handlebars.compile(source);
$(this.container).html(template(results));

$('.timeago').timeago();
}
});
}
}

$(function() {
DisqusRecent.init({
api_key: '在這裡填你的 API Key。',
forum: '在這裡填你的 short name。',
template: '#comments-template',
container: '#comments'
});
});</script>

3. CSS 設定的部份,以下 CSS 樣式,是依照我部落格配色所使用的,建議依自己需求去修改,以更符合你的網站配色,或著點進原文作者提供的程式碼頁面去複製貼上:

<style>
ul#comments {
  list-style-type: none;
  font-family: "Helvetica Neue",arial,sans-serif;
  font-size: 15px;
  color: #a5b2b9;
}
ul#comments li { margin-bottom: 30px; position: relative;}
ul#comments li a { font-size:1em;text-decoration: none; color: #a8a744; }
.avatar-container { width: 60px; box-sizing: border-box; }
.avatar { width:60px;height:60px;border-radius: 50px; float: left; margin: 5px; }
.post-container {padding-top: 3px; margin-left: 70px;  box-sizing: border-box; }
.post-container p { color:#6e3a60;font-size:1em;font-weight:500;}
.author_name { font-weight:bold;font-size:1.2em; }
.timeago, .posted { 
  font-weight: 500;
  font-size: 1em;
  color: #a5b2b9;
  color: rgba(0,39,59,.35);
}
.bullet {
  padding: 0 2px;
  font-size: 1em;
  color: #ccc;
  line-height: 1.4;
}
</style>

最後,在 wordpress 界面的「外觀」>「小工具」裡產生一個「文字」工具,接著把 Html、Javascript 和 CSS 三個部份的程式碼整合在一起,複製貼上就搞定了。

You may also like...

Top