web-dev-qa-db-ja.com

1ページに複数のdisqusスレッド

たくさんのイベントを掲載しているウェブサイトがあり、それぞれのイベントにディスカッションを追加したいと思います。

そこで、disqusを使いたかったので、チェックしてみました。彼らはグローバル変数を使用してインスタンスを構成していることがわかりました。

お気に入り;

var disqus_shortname = '';

var disqus_identifier = '';

var disqus_url = '';

同じ識別子を使用したくない場合、これは問題を引き起こしますが、disqusインスタンスごとに一意の識別子を使用します。各インスタンス化と構成をiframeに入れようとしましたが、それは本当にie8を台無しにしました。それを行うより良い方法はありますか？

それで、それを要約すると、 1ページにdisqusの複数のインスタンス。どうやって？他の誰かがそれをしましたか？

ありがとう

javascriptglobal-variablesdisqus
31
Espen Schulstad

同様の問題に直面し、これについてDisqusにメールを送信しました。彼らは、デフォルトでは、ページごとに1つのDisqusモジュールのみをサポートすることを確認しました。

Disqus JSのドキュメントを閲覧しているときに、ユーザーがサイトを操作するときにDisqusモジュールをロードおよびアンロードすることで、解決策が見つかる可能性があります。

DISQUS.reset({
  reload: true,
  config: function () {  
    this.page.identifier = "newidentifier";  
    this.page.url = "http://example.com/#!newthread";
  }
});

http://docs.disqus.com/help/85/

正確な実装はサイトによって異なりますが、これにより、開始するための構成要素が得られるはずです。たとえば、コンテンツ領域を展開してイベント情報が利用可能になった場合、誰かがイベントコンテンツを展開するたびに、Disqusモジュールをロードできます。

21
Julian

私はこれについての記事を書きました、ここでそれを見つけてください。 http://mystrd.at/articles/multiple-disqus-threads-on-one-page/

本質的に、一度に1つのモジュールを表示し、ある種の「コメントを表示」コントロールを使用することに問題がない場合は、次の方法で実行できます（WordpressおよびjQueryas例ですが、必要に応じてコンテンツ識別子を調整できます）postループで、それぞれに追加のコントロールを挿入します。

<a onclick="loadDisqus(jQuery(this), '<?= $id ?> <?= $post->guid ?>', '<? the_permalink() ?>');">
   Show comments
</a>

その後、これらのpostパラメータを使用し、オンデマンドでDisqusをリロードする汎用関数が必要です。 2012バージョンのDisqusにはまだreset（）メソッドがないため、これは機能しません。

// global vars used by disqus
var disqus_shortname = 'yoursiteshortnameindisqus';
var disqus_identifier; // made of post id &nbsp; guid
var disqus_url; // post permalink

function loadDisqus(source, identifier, url) {
    if (window.DISQUS) {
        jQuery('#disqus_thread').appendTo(source.parent()); // append the HTML to the control parent

        // if Disqus exists, call it's reset method with new parameters
        DISQUS.reset({
            reload: true,
            config: function() {
                this.page.identifier = identifier;
                this.page.url = url;
            }
        });
    } else {
        //insert a wrapper in HTML after the relevant "show comments" link
        jQuery('<div id="disqus_thread"></div>').insertAfter(source);
        disqus_identifier = identifier; // set the identifier argument
        disqus_url = url; // set the permalink argument

        // append the Disqus embed script to HTML
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        jQuery('head').appendChild(dsq);
    }
};

これ以外に、iframeを使用する必要があると思います。例としてRubyを使用したこのようなソリューションの概要をここに示します- http://blog.devinterface.com/2012/01/how-to-insert-more-disqus-box -in-single-page /

17
mystrdat

おそらく2012年7月17日の時点で、Disqus2012は再び「リセット」をサポートするようになりました。

3
V Hudson

GWTアプリからDisqusを使用する必要があったため、アプリの仮想ページが変更されたときにオンデマンドでスレッドをロードする問題を解決する必要がありました。

少量のリバースエンジニアリングと実験により、ユーティリティクラス（下記）を作成しました。

主な洞察は次のとおりです。

  1. disqus_container_idと呼ばれる文書化されていないグローバルパラメータがあり、コメントを好きな場所に配置できます。それが将来のバージョンで機能しない場合、私のフォールバックは、ターゲット要素のIDを一時的にdisqus_threadに設定し、コメントを追加してから、元のIDに戻すことでした。
  2. これはJSNIを使用してGWT用に開発されていたため、$wndからアクセスできる元のウィンドウコンテキストでグローバルパラメーターを設定する必要がありました。それに応じて、デフォルトのDisqus埋め込みコードを変更しました。すべてのグローバル変数がWindowオブジェクトにあることに以前は気づいていませんでしたが、何か新しいことを学びました。
  3. 同じコンテナを再利用できます。アクティブ化すると、Disqusはコンテンツをクリアするようです。
  4. これにより、スクリプトタグのコピーがDOMに大量に残ります。使用後は、これらもクリーンアップすることをお勧めします。または、他の回答で説明されているDISQUS.resetメソッドを使用してさらに実験を行うこともできます。

JSを単独で使用している人にとって重要な情報だけを抽出すると、Disqusスレッドを好きな場所に貼り付けることができます。

function loadComments(container_id, shortname, identifier, developer) {
    // CONFIGURATION VARIABLES
    window.disqus_container_id = container_id;
    window.disqus_developer = developer ? 1 : 0;
    window.disqus_shortname = shortname; // required
    if (identifier) window.disqus_identifier = identifier;

    // DON'T EDIT BELOW THIS LINE
    (function() {
       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
       dsq.src = 'http://' + shortname + '.disqus.com/embed.js';
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
}

そして、これが完全なGWTユーティリティクラスです。これまでに必要なパラメータのみを実装しました。

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.Widget;

public class Disqus {

    public static boolean developer = false;
    public static String shortname;

    public static void showComments(Widget where, String identifier) {
        showComments(where.getElement(), identifier);
    }

    public static void showComments(Element where, String identifier) {
        if (shortname == null)
            throw new IllegalArgumentException(
                      "You must specify the disqus shortname before displaying comments");

        // Store the original id of the target element
        String id = where.getId();
        if (id == null) {
            id = "disqus-" + Integer.toHexString(Random.nextInt());
            where.setId(id);
        }

        // Update the id temporarily
        where.setId("disqus_thread");

        // Load the comments
        loadComments(id, shortname, identifier, developer);
    }

    private static native void loadComments(String container_id, String shortname, String identifier, boolean developer) /*-{
        // CONFIGURATION VARIABLES
        $wnd.disqus_container_id = container_id;
        $wnd.disqus_developer = developer ? 1 : 0;
        $wnd.disqus_shortname = shortname; // required
        if (identifier) $wnd.disqus_identifier = identifier;

        // TODO
        // disqus_url

        // disqus_title

        // disqus_category_id

        // DON'T EDIT BELOW THIS LINE (sorry, I've edited it anyway)
        (function() {
            var dsq = $doc.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://' + shortname + '.disqus.com/embed.js';
            ($doc.getElementsByTagName('head')[0] || $doc.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    }-*/;
}
1
Mike Houston

てんていっそ：

<div class="showDisqus" data-title="MyTitle" data-id="1" data-url="mysite.com/mypost">Show Comments</div>

$('.showDisqus').on('click', function(){   // click event of the show comments button
    var this_ = $(this);
        disqus_shortname = 'your_shortname',
        title = $(this).attr('data-title'),
        identifier = parseFloat($(this).attr('data-id')),
        url = $(this).attr('data-url');

    if (window.DISQUS) {

        DISQUS.reset({ // Remove the old call
          reload: false,
          config: function () {
          this.page.identifier = window.old_identifier;
          this.page.url = window.old_url;
          this.page.title = window.old_title;
          }
        });
        $('.showDisqus').show();
        $('#disqus_thread').remove();

        $('<div id="disqus_thread"></div>').insertAfter(this_);

        setTimeout( function() { // Creates a new call DISQUS, with the new ID
            DISQUS.reset({
              reload: true,
              config: function () {
              this.page.identifier = identifier;
              this.page.url = url;
              this.page.title = title;
              }
            });
            window.old_identifier = identifier;
            window.old_url = url;
            window.old_title = title;
        });

    } else {

        var disqus_identifier = parseFloat(identifier),
            disqus_title = title,
            disqus_url = url;

        $('<div id="disqus_thread"></div>').insertAfter(this_);

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();

        setTimeout( function() { // Sorry, there must be a better way to force the ID called correctly
            DISQUS.reset({
              reload: true,
              config: function () {
              this.page.identifier = identifier;
              this.page.url = url;
              this.page.title = title;
              }
            });
        },500);

        window.old_identifier = identifier;
        window.old_url = url;
        window.old_title = title;

    }
    $(this).fadeOut();  // remove the show comments button
});
1
Pedro Soares

私は上記の解決策を繰り返しましたが、箱から出してすぐに機能するものはありませんでした。ソースをチェックして、私はこれを石畳にしました、それはうまくいきます。それはそう遠くはありませんが、それが思われるすべての違いを生みます。

<script type="text/javascript">
var disqus_shortname  = 'superchocolate',
    disqus_identifier = 'default',
    disqus_title      = 'I Heart Chocoloate',
    disqus_config     = function(){
        this.language = 'en';
    };


(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();



function loadDisqus( identifier, url, title )
{
    DISQUS.reset({
        reload: true,
        config: function ()
        {
            this.page.identifier = identifier;
            this.page.url        = url;
            this.page.title      = title;
            this.language        = 'en';
        }
    });
}
</script>

マークアップに、標準を入れます。

<div id="disqus_thread"></div>

そして、クリックアクションでは、それは非常に簡単です。 AJAX呼び出しから戻ってきた 'data'というメンバーがありました。

loadDisqus( 'ugc-' + data.id,  location.protocol+'//'+location.hostname + "/ugc-submission-" + data.id + "/", data.title );

これは私にとってはうまくいき、いくつかのスレッド間で同様のコメントが渡される上記のコードの問題を解決しました。

DisqusスレッドをBootstrapモーダルで表示しています。$（el）.moda（ 'show'）を呼び出す前にloadDisqusを呼び出しますが、シームレスです。

1
Saeven

私はこの質問が非常に古いことを知っていますが、同じ問題に直面したので、私にとってかなりうまくいく回避策を見つけました。

現在、そのアルバムに属する一連の画像を一覧表示するページ（アルバムと呼びましょう）があります。

画像をクリックすると、現在の画像と、タイトル、日付、作成者、コメントなどの現在の画像情報をajax経由で取得する特別なサイドバーが表示されたライトボックスがポップアップ表示されます（Facebook画像ビューア/サイドバーのコメントと非常によく似ています）

ユーザーがメインアルバムページだけでなく、ライトボックスサイドバー内で表示している特定の画像にもコメントできるようにしたかったのです。

ライトボックスに属するいくつかのコールバック関数のおかげで、ライトボックスが開かれるたびに1つが実行されました。これは、メインアルバムページのdiv'disqus_thread 'の名前を一時的に別の名前に変更するために使用しました。

ライトボックス内の画像を変更するたびに別のコールバックが実行されました。これにより、新しいdisqus_threaddivとdisqus_resetを強制するJavaScriptを含めた画像に関するサイドバー情報を再読み込みできました。

また、ライトボックスが閉じると、もう1つのコールバックが実行されます。これにより、アルバムのコメントdivの名前をdisqus_threadに戻し、別のリセットを強制できます。

要約すると、メインページにはアルバムのコメントが含まれています。画像をクリックすると、元のdivの名前が別の名前に変更されます。次に、いくつかの情報がAJAX新しいdisqus_threaddivを含みます。DISQUS.resetを使用してコメントがライトボックスにロードされます。ライトボックスを閉じると、元のdivの名前がdisqus_threadに戻り、別のリセットを強制します。

私はそれが誰かを助けることを願っています！

0
Fred John