Inserire box di commento Disqus più volte nella stessa pagina

By | 26 gennaio 2012

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:

1
2
3
4
- @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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- @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:

1
 var disqus_developer = 1;

subito sotto a disqus_shortname.

Category: Svliluppo JQuery Ruby Tag:, , , ,

About Claudio

Claudio Marai is a co-founder of DevInterface.

After graduating in Computer Science has contributed to develop complex web applications based on Java/J2EE and desktop applications with the. NET framework for the Ministry of Justice and ultimately for the banking ambit.

The passion for web in recent years has led him to be interested in more modern frameworks such as Ruby on Rails and Django, and to a development approach based on agile methodologies such as eXtreme Programming and SCRUM.

14 thoughts on “Inserire box di commento Disqus più volte nella stessa pagina

  1. google

    Thank-you for your kindness in sharing this knowledge. The marketing strategies has always changed year by year. These was real thought-provoking post!

  2. Pingback: DisQus Comments Not Showing Correctly with CloudFlare | elizaibeth

  3. Sagor

    Disqus is really a great comment widget.. I always wanted to add it into my blog.. but I didn’t know how. And bro for your post.. Now I will add disqus. :)

  4. Kevin

    I was also facing the same problem discussed here. By finding your blog now I can set up this idea to my blog. I appreciate your post.

  5. V Hudson

    Can you give us an html version of this? I do not know how to do haml.

  6. dago

    Una versione html sarebbe davvero la benvenuta . . . sarà possibile ?
    Grazie molte !

  7. Alpha

    1. i want to have 10+ disqus comment boxes on a single page.
    2. I have a comment image/logo which when clicked should pop up a lightbox/window in which Disqus comments are loaded OR in an iframe on right side of the website where comments are loaded.
    3. Each time new/any other comment logo is clicked, new comments for that section loads.

    How to do it ? I am a newbie. Kindly provide me code step by step. thanks.

Comments are closed.