web-dev-qa-db-ja.com

<ahref>ではなくDIVまたはSPANでDisqusコメント数を表示する

現在、ホームページの各投稿の<a href>タグ内にDisqusのコメント数が表示されています。これは、リンクに#disqus_threadが存在するかどうかを検出するJavaScriptによって更新されていることがわかります。

タグの外側にコメント数を表示するにはどうすればよいですか？

これは可能ですか？

コメントへの直接リンクは必要ないため、リンクを削除して、カウントのみを表示したいと思います。

disqus
13
pixelkicks

2014年11月3日更新：

これで、必要な要素にコメントカウントを使用する方法ができました。通常の count.js スクリプトは、次の場合に機能するようになりました。

  • 使う disqus-comment-countクラスAND
  • 使う data-disqus-url OR data-disqus-identifier属性

したがって、これらの要素のいずれかが機能するようになります。

<span class="disqus-comment-count" data-disqus-url="http://example.com/path-to-thread/"> <!-- Count will be inserted here --> </span>

そして

<span class="disqus-comment-count" data-disqus-identifier="your_disqus_identifier"> <!-- Count will be inserted here --> </span>

古い答え（もうこれをしないでください）

Count.jsスクリプトは、検索するタグのタイプに関してはかなり柔軟性がないため（aタグである必要があります）、これを実現するにはAPIを使用する必要があります。

このAPI呼び出しは、指定した任意の数のスレッドのスレッドデータの配列（「Posts」整数を探しています）を返します。 http://disqus.com/api/docs/threads/set/

APIの制限があるため、理想的にはこのサーバー側を実行し、クライアントに提供するためにカウントをキャッシュします。ただし、非常に忙しいサイトがない限り、通常はクライアント側で行うのが問題ありません。アプリケーションに1時間あたり1000を超えるリクエストが必要な場合は、developers @ disqus.comにメールを送信できます。

[〜＃〜]編集[〜＃〜]

これは、jQueryを使用してこれを行う方法の簡単な例です。これは、次のような空のdivがいくつかあることを前提としています。

<div class="my-class" data-disqus-url="http://example.com/some-url-that-matches-disqus_url/"></div>

le javascript：

$(document).ready(function () {

        var disqusPublicKey = "YOUR_PUBLIC_KEY";
        var disqusShortname = "YOUR_SHORTNAME";
        var urlArray = [];

        $('.my-class').each(function () {
            var url = $(this).attr('data-disqus-url');
            urlArray.Push('link:' + url);
        });


        $('#some-button').click(function () {
            $.ajax({
               type: 'GET',
               url: "https://disqus.com/api/3.0/threads/set.jsonp",
               data: { api_key: disqusPublicKey, forum : disqusShortname, thread : urlArray }, // URL method
               cache: false,
               dataType: 'jsonp',
               success: function (result) {

                    for (var i in result.response) {

                        var countText = " comments";
                        var count = result.response[i].posts;

                        if (count == 1)
                           countText = " comment";

                        $('div[data-disqus-url="' + result.response[i].link + '"]').html('<h4>' + count + countText + '</h4>');

                    }
                }
        });

});
34
Ryan V

JQueryソリューションなし：

var gettingCount = false;
var countCallerCallback = null;
function countCallback(data) // returns comment count or -1 if error
{
    var count = -1;
    try {
        var thread = data.response[0];
        count = thread === undefined ? "0" : thread.posts;  
    }
    catch (ex) {
        console.log("FAILED TO PARSE COMMENT COUNT");
        console.log(ex);
    }

    // always do this part
    var commentCountScript = document.getElementById("CommentCountScript");
    document.getElementsByTagName('head')[0].removeChild(commentCountScript);
    countCallerCallback(count);
    gettingCount = false;
    countCallerCallback = null; // if this got reset in the line above this would break something
}
function getCommentCount(callback) {
    if(gettingCount) {
        return;
    }
    gettingCount = true;

    var script = document.createElement('script');
    script.id = "CommentCountScript";
    var apiKey = "api_key=MY_COOL_API_KEY";
    var forum = "forum=MY_FORUM_SHORT_NAME"
    var thread = "thread=" + "link:" + window.location.href;
    script.src = 'https://disqus.com/api/3.0/threads/set.jsonp?callback=countCallback&' + apiKey + "&" + forum + "&" + thread;
    countCallerCallback = callback;
    document.getElementsByTagName('head')[0].appendChild(script);
}
getCommentCount(function(count){alert(count);});
0
user875234