domingo, 4 de maio de 2008

Posts relacionados no Blogger

Bom pessoal, fazia tempo que eu não mexia no layout do meu blog, talvez por preguiça ou talvez por comodismo. Não sei qual dos dois é pior, mas resolvi mudar isso hoje, depois de ler um post no blosque.com sobre como adicionar um Widget de Posts Relacionados no Blogger.

Sempre achei interessante essa coisa de posts relacionados pois, por curiosidade, você acaba visitando alguns daqueles links que parecem interessantíssimos. Eu ainda não implementei a idéia desse post, mas pretendo em um futuro bem próximo fazer isso. Espero também que, com esse recurso, eu consiga fazer subir a estatística "Pages/Visit" e diminuir a "Bounce Rate", que me deixam sempre com um nó na cabeça, por não saber mais o que poderia fazer para que esses dois mudassem.

Bom, vamos à dica então.

Conforme o post original, as vantagens dos posts relacionados são as seguintes:
- Permitir o leitor encontrar exatamente o que lhe interessa;
- Permitir que o visitante conheça mais sobre o seu blog;
- Aumenta a possibilidade de que o visitante leia mais posts;
- Mantém os posts mais antigos à vists;
- Melhora a navegabilidade do blog.



Para implantarmos este widget no Blogger, precisaremos mexer muito um pouco no código do blog. O hack inclui também a criação de um widget que irá exibir a lista.

O hack consiste em várias partes:

Procure a tag </head>. Cole o seguinte código logo ANTES dela:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();

function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}

function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}

function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Procure o seguinte trecho de código (certifique-se de que é esse trecho exato, existem outros parecidos):
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Cole este código ANTES do </b:loop>:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"'type='text/javascript'/>
</b:if>

O código deve ficar assim (a parte vermelha é o que você adicionou):
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Salve o template. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…

Permitir a Adição de Elementos às Postagens no Blog

- Permaneça na tab “Editar HTML”:
- NÃO clique em “Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
- Procure pelo código dos Posts; ele deve estar logo após o Header-wrapper. O código é este (ou alguma coisa muito parecida):
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Postagens no blog' type='Blog'/>
</b:section>
</div>

Simplesmente substitua “no“ por “yes“. Salve as mudanças.

Fim da Adição de Elementos às Postagens no Blog

Agora podemos continuar com o hack de Posts Recentes.

Como Criar o Widget de Posts Recentes

Vá até a tab “Elementos da Página”.
Você verá que agora existe um link “Adicionar um elemento de página“, sobre o campo dos posts. Clique nesse link.
Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.
Escolha um Título - “Posts Relacionados”, “Veja Também”, o que você quiser - e cole o seguinte código no campo do Conteúdo:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Salve as alterações. Volte para a tab “Editar HTML”. Clique na caixinha “Expandir modelos de widgets”.

Procure o código do widget que você acaba de adicionar. Uma forma fácil de encontrá-lo e procurar o título que você deu ao widget, e certificar-se de que ele está dentro de uma tag <b:widget>. É algo assim:
<b:widget id='HTML13' locked='false' title='Posts Relacionados' type='HTML'>
<b:includable id='main'>
<!– only display title if it's non-empty –>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Inclua as linhas em vermelho:
<b:widget id='HTML13' locked='false' title='Posts Relacionados' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!– only display title if it's non-empty –>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>


<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Salve o template. Você já pode arrastar seu widget de Posts Recentes para onde queira; o lugar mais aconselhável é debaixo das “Postagens do Blog”. A lista só vai aparecer nas páginas de postagem - não na Home do blog.

O problema do widget é que ele fica depois dos comentários, lá embaixo, na página do post. Se você tiver muitos comentários, é provável que muitos leitores não vejam sua lista de posts relacionados. O melhor mesmo seria uma solução ótima, com a lista de posts relacionados logo abaixo do posts, não é?

Pra isso, você tem que seguir as instruções até o ponto onde é dito "Salve o template. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…" e fazer a partir daqui:

Adicionando a Lista de Posts Relacionados no Rodapé do Post

Ainda na tab “Editar Html”, clique em “Expandir modelos de widgets”.
Procure esta linha de código:
<p class=’post-footer-line post-footer-line-3′/>
Adicione este código LOGO DEPOIS dessa linha (você pode substituir “Posts Relacionados” por qualquer texto que desejar):
<b:if cond=’data:blog.url != data:blog.homepageUrl’>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

O código deve ficar assim:
<p class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.url != data:blog.homepageUrl'>Posts Relacionados</b:if>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Tenha cuidado para não apagar ou sobreescrever nada, pois um simples espaço ou caracter sobrando ou faltando pode phoder completamente seu template.

Customizando a Quantidade de Posts Relacionados

Tanto se você está usando este método, como se decidiu usar o widget, pode determinar o número máximo de posts que aparecerão na lista. Este hack usa as Categorias (Labels, Marcadores ou Etiquetas do Blogger - é tudo a mesma coisa) para escolher os posts relacionados. Ou seja, ele vai “puxar” posts que estejam na mesma (ou mesmas) categoria.

Para modificar o número de posts que serão mostrados - o número pré-determinado são 10 posts, se achar que está bem assim, não faça mais nada - vá até a tab “Editar Html”, e clique em “Expandir modelos de widgets”. Procure este código no template:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5“‘ type=’text/javascript’/>
</b:if>

Mude o número 5 para qualquer coisa que você queira. Aparentemente, esse número não indica o total de posts, mas o máximo de posts que são mostrados por cada categoria - embora eu não tenha certeza disso. Experimente mudar o número algumas vezes, até encontrar a combinação ideal para você.

E, caso você esteja se perguntando, o hack e o widget funcionam com todos os posts, inclusive os mais antigos.

Motivos Que Podem Causar Que o Hack de Posts Relacionados Não Funcione

1 - Você não usa as Categorias do Blogger.

Se seus posts não estão categorizados, a lista de posts relacionados não aparecerá - mas se você instalou o hack direitinho, provavelmente o título “Posts Relacionados” vai aparecer, sem nada embaixo. Coloque categorias nos posts, e a lista vai aparecer.

Se você tem alguns posts categorizados e outros não, a lista só aparecerá nos posts com categorias, mas o título “Posts Relacionados” vai aparecer em todos.

2 - Suas categorias contêm caracteres especiais

Alguns caracteres, como (?) e (/) podem causar problemas com este hack. Elimine-os das suas categorias, e pronto.

3 - Código adicionado de forma incorreta

Simplesmente siga as instruções ao pé da letra e não modifique nada depois de instalar o hack!

Espero que vocês tenham gostado do material. Eu achei excelente, apesar de ainda não ter implementado o mesmo no meu blog. Não antes de fazer um estudo das estatísticas do blog para ver o impacto que esse novo recurso terá após instalado.

Tou até pensando aqui. Com a instalação disso, vou precisar rever todas as minhas tags, para que os posts se relacionem melhor entre si.

Update: Eu acabei não resistindo e fiz a instalação. Uma dica para aqueles que vão fazer é atentar para a conversão que o Blogger faz de "e; para &quote; e de < e > para &lt; e &gt;, que atrapalham o funcionamento correto do script. A minha solução foi hospedar os scripts em um arquivo .js hospedado no Google Pages, já que todo mundo a maioria têm uma google account, pode usar o espaço do Pages pra colocar arquivos.

Qualquer coisa, estou por aí para tentar ajudar no que for possível. Só lembrando que o verdadeuri autor do script é blosque.com e devo muito a ele por este recurso.

Abração, e até um próximo post!