Neste artigo vamos dar continuidade á série Como criar um Theme para Tumblr, na qual você poderá aprender tudo o que necessita para poder criar themes para tumblr como um verdadeiro profissional, ainda que não tenha os profundos conhecimentos a nível da programação para o fazer. Na prática, esses conhecimentos avançados não são realmente necessários, pelo que a conclusão desta série e a execução dos passos contidos nela não serão um problema para si que não tem extensos conhecimentos de programação. No passado, a abordagem feita através da utilização de frameworks e bibliotecas acabava por sobrelotar com demasiadas coisas. Quantas mais funcionalidades eram adicionadas, mais dificil ficava a tarefa dos usuários terem uma experiência de utilização agradável, tornando a própria plataforma um pouco confusa e pouco intuitiva. Uma grande questão que se colocou foi, no mundo do blogging, quanto poder será realmente necessário para uma plataforma? Será necessária tanta complexidade para satisfazer todos e quaisquer desejos e necessidades dos usuários? Naturalmente que a resposta a estas questões pode variar dependendo do objetivo que se pretenda dar ao blog, mas Tumblr destacou-se e fez a diferença.

Como criar um Theme para Tumblr (Parte II)

Não perca os artigos anteriores desta série:

Neste artigo vamos-lhe ensinar como introduzir um sistema de comentários no seu Tumblr, uma vez que a plataforma por defeito não tem um sistema nativo de comentários, é necessário passar por esta tarefa.  A opção tomada pelos desenvolvedores de Tumblr em não incluir um sistema de comentários na plataforma é justificada pelo interesse em manter a simplicidade na ordem do dia, mas a verdade é que existem muitos blogueiros que não dispensam e necessitam de um sistema de comentários, dependendo obviamente do tipo de blog que possuem.

Neste tutorial vamos introduzir o sistema de comentários Disqus, que pode ser introduzido em qualquer platafora de blogagem, seja WordPress, Blogger, Tumblr ou outro. Disqus é um serviço gratuito, em que o blogueiro apenas necessita de criar uma conta no site, e o desenvolvedor tem uma série de tarefas a executar para inserir o serviço na plataforma.

1. INTRODUZIR O SISTEMA DE COMENTÁRIOS DE FORMA AUTOMÁTICA

A introdução do sistema de comentários Disqus pode ser feita de duas maneiras: Uma em que o sistema de comentários é inserido logo com as credenciais do usuário e está ativo por defeito e outra em que permite ao usuário do theme inserir o seu nome do Disqus e ativar os comentários. Vamos começar primeiro com a inserção do sistema de comentários com as credenciais do usuário.

O primeiro passo é dirigir-se ao website do Disqus e criar uma nova conta. Depois de criada a conta dirija-se a Admin -> Settings -> Install e copie o código  fornecido nas instruções manuais. De seguida dirija-se ao editor de código do seu theme tumblr e localize o seguinte código: {/block:Posts} e insira o código copiado do website do Disqus imediatamente antes do código localizado:

<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>{block:Permalink}<div id="disqus_thread"></div>
<script type="text/javascript">
  /**
    * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
    */
  (function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = 'http://diogoespinha.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=seunomedeusuario">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}<script type="text/javascript">
var disqus_shortname = 'seunomedeusuario';
(function () {
  var s = document.createElement('script'); s.async = true;
  s.src = 'http://seunomedeusuario.disqus.com/count.js';
  (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

Este é um exemplo do código fornecido pelo Disqus para a introdução do sistema de comentários de acordo com o primeiro método que falámos.

2. INTRODUZIR O SISTEMA DE COMENTÁRIOS DE FORMA MANUAL

Embora em ambos os casos seja necessário algum trabalho manual para introduzir os comentários, a verdade é que neste método os comentários só irão ser habilitados caso o usuário pretenda, daí chamarmos manual. Este processo tem um pouco mais de complexidade mas ao mesmo tempo fornece mais versatilidade ao theme, uma vez que permite que os usuários possam decidir se pretendem utilizar o sistema de comentários ou não.

O primeiro passo é criar a meta tag para que o usuário possa introduzir o seu nome de usuário no sistema Disqus, que iremos utilizar no código para habilitar ou não o sistema de comentários. Para isso, introduza o seguinte código dentro da tag <head> do documento:

<meta name="text:Usuario Disqus" content="" />

Este código irá criar um campo onde poderá introduzir o nome de usuário no Disqus:

Como criar um Theme para Tumblr (Parte V)

Á semelhança do que aconteceu no ponto anterior, o próximo passo é localizar a linha onde se encontra o código {block:Posts} e vamos começar a introduzir o código imediatamente antes dessa linha. De notar que vamos proceder á análise de pequenos pedaços de código de cada vez explicando o seu funcionamento.

Vamos começar por introduzir um bloco onde irá ser inserido todo o código e que irá definir logo á partida quando é que o sistema de comentários irá estar habilitado ou não, dependendo se o usuário introduz o nome do Disqus no painel ou não. Então, introduza o seguinte código:

{block:IfUsuarioDisqus}

{/block:IfUsuarioDisqus}

Todo o código irá ser inserido dentro deste bloco e começamos por introduzir uma div que irá conter os comentários:

<div id="disqus_thread"></div>

De seguida começamos a entrar na área do Javascript, em que fazemos a chamada ao ficheiros javascript alojado no website do Disqus que faz a busca dos comentários e dos elementos do website:

<script>
(function() {
var dsq = document.createElement('script'); dsq.async =
true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.
getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>

No caso de o visitante não ter o Javascript ativo, criamos uma ressalva para que o mesmo seja notificado:

<noscript>
Por favor ative o JavaScript para ver os comentários de <a href="http://
disqus.com/?ref_noscript={text:Usuario Disqus}"></a>
</noscript>

 De seguida fazemos a busca pelas tags na página e atribuímos o array á variável links, fazendo de seguida o processo que irá determinar o número de comentários existentes na publicação.

<script>
(function() {
var links = document.getElementsByTagName('a'),
query = '?',
len = links.length;
for (var i = 0; i < len; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' +
encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script src="http://disqus.com/forums/{text:Usuario Disqus}/get_num_replies.js' + query +
'"></' + 'script>');
})();
</script>

Se pretende obter todo o código junto de forma a facilitar-lhe a vida, aqui fica ele:

Introduzir dentro da secção <head>:

<meta name="text:Usuario Disqus" content="" />

Introduzir imediatamente antes de {/block:Posts}:

{block:IfUsuarioDisqus}
{block:Permalink}
<div id="disqus_thread"></div>
<script>
(function() {
var dsq = document.createElement('script'); dsq.async =
true;
dsq.src = 'http://{text:Usuario Disqus}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.
getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Por favor ative o JavaScript para ver os comentários de <a href="http://
disqus.com/?ref_noscript={text:Usuario Disqus}"></a>
</noscript>
{/block:Permalink}
<script>
(function() {
var links = document.getElementsByTagName('a'),
query = '?',
len = links.length;
for (var i = 0; i < len; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' +
encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script src="http://disqus.com/forums/{text:Usuario Disqus}/get_num_replies.js' + query +
'"></' + 'script>');
})();
</script>
{/block:IfDisqusShortname}

É importante salientar uma última nota, se fizer alterações ao código do theme terá obrigatoriamente de voltar a introduzir o nome de usuário do Disqus, pois este será removido caso faça alguma alteração ao código.  Portanto de fizer alterações e o sistema de comentários desaparecer, não entre em pânico, basta introduzir novamente o nome de usuário e tudo ficará resolvido.

Aqui fica o resultado final:

Como criar um Theme para Tumblr (Parte V)

3. NOTAS NOS ARTIGOS

As notas são outra forma de interação entre os usuários e os seus artigos, permitindo que sejam registados algumas ações dos usuários. Embora isto não seja um sistema de comentários no sentido literal, é uma forma de permitir que os usuários respondam diretamente a partir do seu painel de administração, permitindo ainda que os usuários façam gosto no artigo (em algo semelhante ao Facebook).

Então, para a utilização das notas existem algumas variáveis:

  • {block:PostNotes}{/block:PostNotes} – Renderizado se o artigo tiver notas
  • {PostNotes} – É o output HTML das notas do artigo, que apenas será mostrado na página do artigo
  • {block:NoteCount}{/block:NoteCount} – Renderizado se o artigo tiver pelo menos uma nota
  • {NoteCount} – É o número de notas no artigo
  • {NoteCountWithLabel} – É o número de notas no artigo mas com um texto anexado, por ex “15 Notas”.

Aqui fica um exemplo de utilização:

{block:Posts}
{block:Text}
<div class="text">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
{Body}
</div>
{/block:Text}
<ul class="post-meta">
{block:PostNotes}
<li>{NoteCountWithLabel}</li>
{/block:PostNotes}
</ul>
{/block:Posts}

Como criar um Theme para Tumblr (Parte V)

No próximo artigo iremos falar sobre a integração do Twitter no Tumblr, não perca!

Abraço

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Ismael Guimarães AJ
    5 de outubro de 2012

    Cara, isso não funciona infelizmente. Se funcionasse seria excelente pois instalei um tema personalizado e não consigo colocar para funcionar aquela caixa onde se deve colocar o username do disqus.

    É mau isso para mim pois amei o tema. Tentei a tua dica e não funcionou. Aliás, fez desaparecer os meus posts todos. Será que não tem nada de errado na tua dica?

    Dizias assim:
    «vamos começar a introduzir o código imediatamente antes dessa linha»

    Não será que teria que colocar depois???


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz