用jQuery讀取Disqus留言數

Disqus是除了Facebook以外的另一個社群留言外掛系統, 他可以讓你很容易地把留言系統整合到你的網站或是部落格中,
而除了Disqus本身的帳號外, 還支援Facebook、Twitter、和Google+帳號登入, 將時下流行的社群留言都整合在一起,
是個相當好用的留言系統. 在這裡我們會用jQuery來取得Disqus的留言數. 

在安裝Disqus時會教你把下面的script放到網頁中的</body>前面
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    } ());
</script>
然後建立一個超連結, 超連結裡的href屬性指向你有放置Disqus外掛的網址, 並在網址後再加上#disqus_thread, 這樣子
Disqus就會自動回傳該網址多少留言數, 並在超連結裡顯示.
<a href="http://www.pureexample.com/pagewithcomment.html#disqus_thread">MyPage</a>
輸出結果會像這樣 51 Comments .

當然你可以手動把所有的超連結都加上#disqus_thread, 但如果超連結太多改起來會相當困難的. 不過我們可以寫一段
jQuery小程式來幫我們自動更改超連結.

假設你的HTML如下
<div id="link-block">
    <a href="http://www.pureexample.com/article1.html">Article 1</a>
    <a href="http://www.pureexample.com/article2.html">Article 2</a>
    <a href="http://www.pureexample.com/article3.html">Article 3</a>
    <a href="http://www.pureexample.com/article4.html">Article 4</a>
    <a href="http://www.pureexample.com/article5.html">Article 5</a>
</div>
那麼jQuery就可以這樣寫
$(document).ready(function () {
    $("div[id='link-block']").find("a").each(function () {
        var url = $(this).attr("href");
        $(this).attr("href", url + "#disqus_thread");
    });
});
我們先用selector找到id屬性為link-block的div標籤, 然後再用find找標籤為a的物件, 再接著用.each()去遍歷所有
超連結物件, 在href屬性後再加上#disqus_thread, 如此一來Disqus就會去抓該網址的留言數.

最後結果會變成
<div id="link-block">
    <a href="http://www.pureexample.com/article1.html#disqus_thread">2 Comments</a>
    <a href="http://www.pureexample.com/article2.html#disqus_thread">15 Comments</a>
    <a href="http://www.pureexample.com/article3.html#disqus_thread">5 Comments</a>
    <a href="http://www.pureexample.com/article4.html#disqus_thread">22 Comments</a>
    <a href="http://www.pureexample.com/article5.html#disqus_thread">1 Comments</a>
</div>



 
comments powered by Disqus