Inserire box di commento Disqus più volte nella stessa pagina

Ciao a tutti!

Per chi non lo conoscesse Disqus è una piattaforma che permette di inserire facilmente un box per i commenti su qualsiasi sito web, e consente agli utenti di utilizzare il loro account facebook o twitter (ma non solo) per autenticarsi.

Il limite di Disqus è che associa ogni thread di commenti ad un unica url.
Di conseguenza, si aspetta che in ogni pagina ci sia solamente un box di commenti.

Nella stragrande maggioranza dei casi questo limite è accettabile, tuttavia, per alcune applicazioni è utile poter inserire più box di commento in un unica pagina. Si pensi ad esempio ad un blog dove si vuol dare la possibilità di commentare ogni singolo post direttamente dalla pagina principale dove sono elencati tutti i post uno sotto l’altro.

Quello che voglio mostrarvi oggi è un metodo per superare il limite di Disqus ed implementare in modo semplice una pagina con più box di commento, come nell’esempio del blog appena fatto.
Sfruttando un iframe e jQuery renderemo inoltre i box dinamici.

Supponiamo di avere la nostra pagina index.html.haml come segue e di aver già creato il nostro account su Disqus:

- @posts.each do |post|
= show_for post do |s|
= s.attribute :title
= s.attribute :body

L’idea è quella di creare un iframe dinamicamente sotto ogni post e farlo visualizzare/nascondere tramite jQuery quando si clicca su un link “commenta”.

Come prima cosa quindi creiamo la pagina comments.html.haml che andremo a caricare nell’iframe.

#disqus_thread

%noscript
Please enable JavaScript to view the
%a{:href => "http://disqus.com/?ref_noscript"} comments powered by Disqus.

%a.dsq-brlink{:href => "http://disqus.com"}
blog comments powered by
%span.logo-disqus Disqus


:javascript
var disqus_shortname = 'devinterface-example';

(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 disqus_config() {
this.callbacks.onReady = [function() {
var frameHeight = $(document).height();
$('iframe.comment_frame', top.document).attr("height", frameHeight)
}];
this.callbacks.onNewComment = [function() {
var frameHeight = $(document).height();
$('iframe.comment_frame', top.document).attr("height", frameHeight)
}];
}

In questa pagina inseriamo l’html ed il javascript fornitoci da Disqus e settiamo la variabile disqus_shortname.
Utilizzando poi la funzione disqus_config impostiamo due callback per disqus in modo tale che dopo il completo caricamento di disqus o all’inserimento di un nuovo commento, l’iframe che contiene questa pagina venga ridimensionato opportunamente.
NOTA: il ridimensionamento dell’iframe “contenitore” è possibile solo perchè le due pagine index e comments stanno sullo stesso dominio. Se cosi non fosse infatti, l’accesso al parent di un iframe sarebbe impossibile per i criteri di sicurezza dei browser.

Ora che abbiamo creato la nostra pagina comments, non ci resta che aggiungere alla index in modo dinamico l’iframe.
Per rendere le cose più “carine” faremo in modo che il link di apertura/chiusura del box dei commenti contenga il conteggio dei commenti di quello specifico post.

Torniamo quindi alla pagina index e modifichiamola come segue:

- @posts.each do |post|
= show_for post do |s|
= s.attribute :title
= s.attribute :body
/ disqus comments
= link_to "", "/#{post.slug}/comments#disqus_thread", :class=> "dq_comment", :id => post.id
.comment_box{:id => "comment_#{post.id}"}

:javascript
var disqus_shortname = 'devinterface-example';

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

$(document).ready(function(){
$(".dq_comment").click(function(e){
e.preventDefault();

var id = $(this).attr("id");
var href = $(this).attr("href");
var src = href.substring(0,href.length-14); // Remove #disqus_thread

if ($("#comment_"+id).is(':visible'))
$("#comment_"+id).html('');
else
$("#comment_"+id).append('<iframe scrolling="no" frameborder="0" src="'+src+'" class="comment_frame"></iframe>');

$("#comment_"+id).toggle('slow');
})
});

Come vedete abbiamo aggiunto il link con una url univoca del post ed il tag #disqus_thread per attivare il counter dei commenti, come spiegato nella documentazione.
Infine tramite la funzione jQuery abbiamo intercettato il click sul link facendo in modo di creare dinamicamente sotto al post un iframe con l’url della nostra pagina comments.html.haml.
Ovviamente l’url di comments dovra essere definita opportunamente nel nostro file di routes.

Ora non vi resta che aprire il vostro browser e vedere i vostri post, ognuno con il suo box di commenti caricato dinamicamente cliccando sul counter.

NB: se provate questi script in locale, ricordatevi di aggiungere nei due javascript di Disqus:

var disqus_developer = 1;

subito sotto a disqus_shortname.