Inserindo comentários com Django Disqus

Posted by Gilson Filho on ter 09 agosto 2011

Olá pessoal,

Já tem alguns meses que uso o Django em alguns dos meus projetos, e agora entendo o porque que ele é um dos frameworks mais usados pelos desenvolvedores Python. No post de hoje eu irei apresentar a vocês a aplicação chamada Django Disqus, feito para facilitar a integração da sua conta Disqus com o seu projeto/aplicação Django.

Criando uma conta no Disqus

Eu não vou explicar a forma de criar sua conta no Disqus, porque já possui muitos posts sobre isso. Qualquer dúvida temos o Google, ou acesse esses abaixo:

Instalando e configurando o Django Disqus

O Django Disqus ajuda você a fazer a integração da sua aplicação com a plataforma de forma simples e fácil de colocar. Ele tem as seguintes funcionalidades:

  • Export django.contrib.comments to DISQUS;

  • Dump comments from DISQUS into a local JSON file;

  • Exporting Comments as WXR;

  • Templatetags.

Agora que você criou sua conta no Disqus, é importante que tenha perto de você as seguintes informações: DISQUS_API_KEY e DISQUS_WEBSITE_SHORTNAME. O primeiro é o key gerado pelo Disqus, e ele é único para cada conta cadastrada. E o segundo é a URL inserida no ato da criação da instância (site) no Disqus. Abaixo tem um exemplo disso:

``` python settings.py DISQUS_API_KEY = 'alsKjaskAjKSlaskJQIWiqoqwo12LAsk1920' DISQUS_WEBSITE_SHORTNAME = 'gilsondev.com'

Vamos instalar o disqus usando o pip:

``` bash
~$ pip install django-disqus

Feito a instalação, vamos inserir os parâmetros descritos acima no seu settings.py. Claro que você vai substituir os valores com os da sua conta. Após isso insira ele junto com as outras aplicações instaladas no seu projeto. Vai ficar dessa forma:

``` python settings.py INSTALLED_APPS = ( ... 'disqus', )

DISQUS_API_KEY = 'FOOBARFOOBARFOOBARFOOBARFOOBARF'
DISQUS_WEBSITE_SHORTNAME = 'foobar'
Com isso, já temos o nosso django-disqus instalado.


###




### Inserindo o formulário de comentários


Como exemplo nesse post, abaixo possui um template simples que simula uma página de post. Ele contêm o título do post, o seu conteúdo e logo abaixo o formulário de comentários. O django-disqus usa template tags para a inserção desse formulário. Lembrando, que o formulário já vem pronto, ou seja, vamos acoplar ele ao nosso projeto:

``` html+jinja html templates/comments.html
{% extends "base.html" %}
{% load disqus_tags %}

{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="/static/css/post.css" />
{% endblock stylesheets %}

{% block corpo %}
    <div id="post">
        <h2>{{ post.titulo }}</h2>
        <h3 class="resumo">{{ post.resumo_geral }}</h3>
        <h4 class="autor">Autor: {{ post.autor.first_name }} {{ noticia.autor.last_name }}</h4>
        {{ post.conteudo|safe }}
    </div>
    {% if post.comentarios %}
        <div id="comentarios">
            {% set_disqus_identifier "post_" noticia.id %}
            {% set_disqus_url post.get_absolute_url %}
            {% disqus_show_comments %}
        </div>
    {% endif %}
{% endblock corpo %}

Vamos por partes. Na linha 2, temos a instrução load que carrega os template tags da aplicação. Na linha 18, temos a tag set_disqus_identifier  que serve para criar um identificador para a página. Na linha 19 temos a tag set_disqus_url que recebe o endereço completo do nosso post. Essas duas últimas informações são importantes porque é com elas que vai ser vinculado os comentários com o nosso post. Mais informações acesse a documentação do Disqus. A tag disqus_show_comments serve para acoplar o template usado pela aplicação, com isso você terá que criar para receber esse formulário e os comentários já postados.

Crie esse template na pasta que armazena todas as suas páginas. Aqui será armazenado em templates/disqus/comments.html. Nessa página insira o seguinte trecho conforme na documentação solicita aqui:

``` html templates/disqus/comments.html

blog comments powered by Disqus

Tem um trecho comentado e que é a partir dele que vai ser vinculado os comentários com os posts:

``` javascript
var disqus_identifier = 'unique_dynamic_id_1234';
var disqus_url = 'http://example.com/permalink-to-page.html';

É a partir desse trecho acima, é que o Disqus vai acoplar o formulário de comentários e os já postados. Lembra daquelas tags que colocamos? Os parâmetros daquelas tags vai ser armazenado no contexto da aplicação. Não entendeu? Assim:

  • Tag set_disqus_identifier cria no contexto a variável disqus_identifier;

  • Tag set_disqus_url cria no contexto a variável disqus_url;

Outro ponto importante é a variável de contexto chamado shortname. Ela possui armazenada o valor de DISQUS_SITE_SHORTNAME inserido no arquivo settings.py. Então substitui o valor 'examples' com essa variável:

var disqus_shortname = '{{ shortname }}';

Isso vai funcionar somente na produção porque ele vai pegar a URL do nosso blog no modo de produção. Mas como vou saber se está funcionando? Simples, o django-disqus tem uma tag para simular essa situação, que é a tag disqus_dev. Vamos inserir ela no início do arquivo comments.html:

{% load disqus_tags %}
{% disqus_dev %}

O que vai acontecer? Ele vai criar um alias para que o formulário de comentários apareça. Quando ver a fonte no navegador, o resultado é esse:

<script type="text/javascript">
    var disqus_developer = 1;
    var disqus_url = 'http://arthurkoziel.com/';
</script>

Vamos ver o geral do template comments.html:

``` html+jinja templates/comments.html {% load disqus_tags %}

blog comments powered by Disqus ```

Depois disso, execute o seu servidor e acessando a página do nosso post, vai aparecer o formulário e os comentários:

[caption id="attachment_310" align="aligncenter" width="300" caption="Comentários do Disqus"]Comentários do Disqus[/caption]

O bom de usar o disqus é que você não vai se preocupar com o registro de usuários para fazer os comentários. Ele usa as contas Google, Twitter e Facebook para a autenticação. Fora que no seu painel de controle terá a opção de moderar e marcar comentários indesejados como spam ou moderá-los.

Então é isso. Qualquer dúvida, mande um comentário, fiquem a vontade! Tem também a documentação. Vale a pena dar uma olhada.

Até mais, :)


Comments !