Disqus - Uma thread para mais de uma URL

Disqus

Meu post sobre “Workflow Javascript com Module Pattern” saiu na BrazilJS Weekly #69 (obrigado a quem colocou lá o/), mas isso acabou me mostrando que eu tinha um pequeno “problema” com os comentários: como tinha uma query string na URL, o Disqus achava que se tratava de uma página diferente e criava uma nova thread de comentários =/

O problema

Por exemplo, se eu acessasse:

1
2
3
https://blog.da2k.com.br/2014/03/18/meu-workflow-javascript-com-module-pattern/
https://blog.da2k.com.br/2014/03/18/meu-workflow-javascript-com-module-pattern/?123
https://blog.da2k.com.br/2014/03/18/meu-workflow-javascript-com-module-pattern/?451k

Cada uma dessas URLs gerava sua própria thread de comentários. Não deveria, pois fazem parte do mesmo post, apenas com alguns parâmetros a mais.

Como resolver?

Fazendo uma pesquisa na API do Disqus, vi que o problema é bem simples de resolver :)

A solução xD

Você precisa apenas definir uma variável chamada disqus_url com a URL absoluta do seu post. Se você não fizer isso, o Disqus vai usar window.location.href, e consequentemente para cada chamada de query string diferente, ele vai gerar uma nova thread.

Coloque essa variável no início do código que o Disqus gera (linha 5):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'your_disqus_shortname'; // required: replace example with your forum shortname
    var disqus_url = 'http://www.yoursite.com/your-post-url/';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (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);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

And done :)