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

by · Published

最近換了新的佈景主題，有空都在玩他的配色，剛巧假日適逢台灣連外網路出問題，又想起前陣子看到 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 三個部份的程式碼整合在一起，複製貼上就搞定了。

 

Tags:

You may also like...

Top