多くのイベントを掲載している Web サイトがあり、各イベントにディスカッションを追加したいと考えています。
そこで、disqus を使用したいと考え、調べてみました。グローバル変数を使用してインスタンスを構成していることがわかりました。
お気に入り;
var disqus_shortname = '';
var disqus_identifier = '';
var disqus_url = '';
同じ識別子を使用するのではなく、disqus インスタンスごとに一意の識別子を使用したい場合、これは問題を引き起こします。各インスタンス化と構成をiframeに入れようとしましたが、それは本当にie8を台無しにしました。それを行うより良い方法はありますか？
要約すると、1 ページに disqus の複数のインスタンス。どうやって？他の誰かがそれをしましたか？
ありがとう
同様の問題に直面し、これについて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モジュールをロードできます。
私はこれについて記事を書いたので、ここを見つけてください。http://mystrd.at/articles/multiple-disqus-threads-on-one-page/
本質的に、一度に 1 つのモジュールを表示し、ある種の「コメントを表示」コントロールを使用することに問題がない場合は、次の方法で実行できます (Wordpress と jQuery を例として使用しますが、コンテンツを調整できます)。必要に応じた識別子)。ポスト ループで、それぞれに追加のコントロールを挿入します。
<a onclick="loadDisqus(jQuery(this), '<?= $id ?> <?= $post->guid ?>', '<? the_permalink() ?>');">
Show comments
</a>
その後、これらのポスト パラメーターを使用し、オンデマンドで Disqus をリロードする汎用関数が必要です。Disqus の 2012 バージョンにはまだ reset() メソッドがないため、これは機能しないことに注意してください。
// global vars used by disqus
var disqus_shortname = 'yoursiteshortnameindisqus';
var disqus_identifier; // made of post id 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/で概説されています。
おそらく2012年7月17日の時点で、Disqus2012は再び「リセット」をサポートするようになりました。
上記の解決策を繰り返しましたが、すぐに使用できるものはありませんでした。ソースを確認して、これを石畳にしましたが、これは機能します。それほど遠くないですが、見た目はすべて違います。
<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 呼び出しから返された「データ」というメンバーがありました。
loadDisqus( 'ugc-' + data.id, location.protocol+'//'+location.hostname + "/ugc-submission-" + data.id + "/", data.title );
これは私にとってはうまくいき、いくつかのスレッド間で同様のコメントが渡されていた上記のコードの問題を解決しました。
Disqus スレッドを Bootstrap モーダルで表示しています。$(el).moda('show') を呼び出す前に loadDisqus を呼び出しますが、シームレスです。
GWT アプリから Disqus を使用する必要があったため、アプリ内の仮想ページが変更されたときにスレッドをオンデマンドでロードするという問題を解決する必要がありました。
少量のリバース エンジニアリングと実験により、ユーティリティ クラスを作成しました (以下を参照)。
主な洞察は次のとおりです。
disqus_container_id
コメントを好きな場所に配置できる、ドキュメント化されていないグローバル パラメータが呼び出されます。将来のバージョンでそれが機能しない場合、私のフォールバックは一時的にターゲット要素の id を に設定しdisqus_thread、コメントを追加してから元の id に戻すことでした。$wnd。それに応じて、デフォルトの Disqus 埋め込みコードを変更しました。すべてのグローバル変数が Window オブジェクトにあることを以前は知りませんでしたが、新しいことを学びました。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);
})();
}-*/;
}
テンテイソ：
<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
});
この質問が非常に古いことは知っていますが、同じ問題に直面したため、かなりうまくいく回避策を見つけました。
私は現在、そのアルバムに属する一連の画像を一覧表示するページ (アルバムと呼びましょう) を持っています。
画像をクリックすると、現在の画像と、タイトル、日付、作成者、コメントなどの現在の画像情報を ajax 経由で取得する特別なサイドバーが表示されたライトボックスがポップアップ表示されます (Facebook の画像ビューアー/サイドバーのコメントに非常に似ています)。
ユーザーがメインのアルバム ページだけでなく、ライトボックス サイドバー内で表示している特定の画像にもコメントできるようにしたかったのです。
ライトボックスに属するいくつかのコールバック関数のおかげで、ライトボックスが開かれるたびに 1 つが実行されました。これを使用して、メイン アルバム ページの div 'disqus_thread' を一時的に別の名前に変更しました。
ライトボックス内の画像を変更するたびに、別のコールバックが実行されました。これにより、新しい disqus_thread div と、disqus_reset を強制する JavaScript を含めた画像に関するサイドバー情報をリロードできました。
もう 1 つのコールバックは、ライトボックスが閉じるときに実行されます。これにより、アルバム コメント div の名前を disqus_thread に戻し、別のリセットを強制することができます。
要約すると、メイン ページにはアルバムのコメントが含まれています。画像をクリックすると、元の div の名前が別の名前に変更されます。次に、新しい disqus_thread div を含む AJAX を介していくつかの情報が取得されます。私は DISQUS.reset を使用し、ライトボックスにコメントをロードします。ライトボックスを閉じたら、元の div の名前を disqus_thread に戻し、別のリセットを強制します。
誰かの役に立てば幸いです！
各インスタンスをiframeを介して読み込むことができます。ただし、ページはめ込みスクロールバーが必要になる場合があります...うん。