sábado, 7 de fevereiro de 2009

Um jeito bem simples de adicionar "Posts Relacionados" em seu blogger

Esta é uma tarefa bem simples, até mais simples do que pode-se pensar. Mas deu trabalho para bolar. Em particular, existem alguns detalhes sobre os quais fui buscar ajuda em alguns sites especializados sobre javascript [1]. A idéia é a seguinte: ao fim do texto (ou onde mais o usuário quiser) adicionar uma lista de outros posts de conteúdo relacionado. Detalhes: não pode repetir o próprio post que o leitor está visualizando no momento e não pode desperdiçar muito tempo do navegador do usuário. Sim, porque javascripts são códigos interpretados pelo navegador, não pelo servidor. Logo, se não usado com parsimônia e sabedoria, scripts podem causar lentidão em conexões mais lentas.

Algumas palavras

Aplicações web vêm se desenvolvendo e ficando cada vez mais poderosas. Um dos episódios que mais me impressionou na história das aplicações web foi a criação do Ajax. Há tantas vantagens em utilizar, é uma idéia tão esperta [2]. Eu e alguns colegas (incluo você, Rodrigo?) tivemos nosso primeiro verdadeiro contato com linguagens de marcação para internet (html, xhtml e xml) e algumas linguagens script (PHP, javascript, python, perl) em 2006, no curso de Programação Voltada à Internet. Desde aquele momento, tenho visto o quão importante é o respeito por padrões e a utilização de sites gigantes, dentre os quais talvez o mais óbvio seja o w3c. Acha que isso não é importante? Veja o Google Gadgets Editor ou Google Mash Up Editor: trata-se praticamente de puro xml desenvolvido sobre tags definidas pela Google, adicionando-se HTML e javascript. Eu arriscaria (com razoável certeza) dizer que hoje o nivelamento inferior para os desenvolvedores web está em conhecimentos sólidos de xml e XHTML.

Chega de enrolação!

Javascript

Todo javascript que for adicionado em uma página html vai dentro de uma tag identificada como script. Como esta tag também é usada para outras linguages, especificamos qual a linguagem de seu conteúdo pelo atributo type. A seguir, o script que desenvolvemos para gerar a lista de posts relacionados.

<script type='text/javascript'>
//<![CDATA[

/* Quantidade de links */
var relcounter = 0;

/* Quantidade máxima de links */
var relmax = 10;

/* Lista ordenada com os títulos */
var reltitulos = new Array();

/* Lista ordenada com os endereços */
var relend = new Array();

/* Algumas variáveis para o caso de um post com poucas tags */

/* Número mínimo de tags */
var tag_min = 3;

/* Número de tags */
var tag_counter = 0;

/* Essa função pega os posts relacionados, ou seja, ele vai atrás
do título e do endereço dos posts com um certo marcador. Por isso,
esta função deve ser chamada PARA CADA marcador. */
function getrels(json)
{
tag_counter++;

/* Vale mais truncar a busca agora... */
for (var i = 0; i < 5 && i < json.feed.entry.length; i++)
{
var entry = json.feed.entry[i];
reltitulos[relcounter] = entry.title.$t;

for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == 'alternate')
{
relend[relcounter] = entry.link[j].href;
relcounter++;
break;
}
}
}
}

/* Adiciona tags fantasma......... */
function completeTags()
{

}

/* Função verifica repetições, pois pode ocorrer de um post pertencer a mais
de uma etiqueta (ex. física e ciências são as etiquetas de um mesmo post.
Esta rotina deve ser chamada antes da rotina que imprime a lista. */
function remInuteus()
{

/* Listas auxiliares para verificarmos possíveis repetições (como já explicado) */
var auxend = new Array(0);
var auxtit = new Array(0);

/* Vamos testar se o proprio post está na lista usando a url. No entanto, se
o usuário tiver ido pra páginas de recado, então o endereço terá um #comments.
Para evitar esses e outros casos relacionados (marcadores gerais), usamos
o método split de strings e pegamos apenas o primeiro elemento do resultante. */

var thisURL = location.href.split("#")[0].split("?")[0];

/* Agora é só ir testando... */
for (var i = 0; i < relend.length; i++)
{

/* A primeira das condições a seguir simplesmente verifica se
um dos endereços já está na lista auxend (nova). A segunda condição
impede que o próprio post visualizado entre na lista! */

if ( !contains(auxend, relend[i]) && thisURL != relend[i])
{
auxend.length += 1;
auxend[auxend.length - 1] = relend[i];
auxtit.length += 1;
auxtit[auxtit.length - 1] = reltitulos[i];
}
}

/* Redefinimos as listas "globais". */
reltitulos = auxtit;
relend = auxend;
}


/* Esta função imprime a lista (depois de pronta). Como é utilizada
uma lista não ordenada (<ul>), basta adicionar marcações de estilo
em sua css. */
function printlegauss()
{

/* Para embaralhar, vamos usar uma idéia que pode ser encontrada
em diversos outros scripts. */
var r = Math.floor((reltitulos.length - 1)*Math.random());
var i = 0; var counter = 0;

document.write('<ul id="leiatbm">');
while (i < reltitulos.length && counter <= relmax)
{
/* Conta quantas entradas já foram adicionadas */
counter++;

/* Preferimos a abertura de nova aba para que
o usuário não perca o post original */
document.write('<li><a target="_blank" href="' + relend[r] + '">' + reltitulos[r] + '</a></li>');

r++;
if (r >= reltitulos.length - 1) { r = 0; }

i++;
}

document.write('</ul>');
}

/* Retorna um boolean: verifica se 'e' está em 'a'. */
function contains(a, e)
{
for(var j = 0; j < a.length; j++)
{
if (a[j] == e) { return true; }
}

return false;
}

//]]>
</script>


Note que há diversos comentários e muito provavelmente não deve ser difícil compreender o código por si só. Infelizmente não pude mais desenvolver os scripts devido a problemas com do servidor do blogspot. Assim que conseguir, posto sobre como adicionar certas funcionalidades bem interessantes.

Adicionando a lista ao fim dos textos

Suponha que você queira fazer assim como o LeGauss e deixar a lista dos posts relacionados ao fim do texto de cada artigo. Vamos passar o que é necessário para tal. Logo após, comentaremos como é possível colocar a lista de posts relacionados em qualquer outro local do post.

Lembre-se de ter consigo uma cópia do código html de seu blog antes de fazer modificações!


Primeiramente, abra seu painel do blogspot (identificando-se) e entre na aba Layout. Lá, vá em Editar HTML. Habilite a caixa Expandir modelos de widgets. Procure pelo trecho do código <div class='post-body entry-content'> que estiver próximo (algumas linhas de distância) do trecho <data:post.body/>.

Para que a lista apareça na página inicial e em cada página particular dos posts, adicione o seguinte código em baixo do trecho <data:post.body/>.

<br/>
<hr align='center' width='300px'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=getrels&max-results=10"' type='text/javascript'/>
</b:loop>
<span class='leiatbm'>Aproveite para </span>
<script type='text/javascript'>
remInuteus();
printlegauss();
</script>


Para que a lista NÃO apareça na página inicial, MAS APENAS em cada página particular dos posts, adicione o seguinte código em baixo do trecho <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<br/>
<hr align='center' width='300px'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script amp;callback=getrels&max-results=10"' type='text/javascript'/>
</b:loop>
<span class='leiatbm'>Aproveite para </span>
<script type='text/javascript'>
remInuteus();
printlegauss();
</script>
</b:if>


Como nós utilizamos o "Leia mais...", o nosso código aproveita certos atalhos. Por isso ficaria difícil de comparar. Para dúvidas, deixe comentários. Salve o que você acabou de fazer.

Definindo melhor o estilo da lista

Os scripts java foram escritos já com o intuito de aplicarmos formatações usando css, usando a identificação leiatbm. Veja no nosso caso como fizemos. O ícone está em no domínio webpicasa, então por favor não o sobrecarregue.

#leiatbm
{
padding: 0 0 0 15px;
margin: 0;
}

#leiatbm li
{
list-style-image: url(http://lh4.ggpht.com/_aB-c0cjjsr8/SYQ8tfDGD9I/AAAAAAAAAIA/xRMzj6NLtGo/icon.jpeg);
}


Terminando...

A partir daí, já deve estar tudo funcionando. Se você quiser colocar em qualquer outro ponto do blog, basta procurar com cuidado no html (com a caixa Expandir modelos de widgets habilitada) de seu layout. Se tiver problemas, deixe comentários (pode deixar e-mail para contato).

Utilize tudo o que ensinamos à vontade e sem restrições. Se achar que merecemos, divulgue o LeGauss em seu blog : )

Agradeço profundamente à ajuda de nosso fã-paga-pau declarado amigo Ponhovo Loreno [3].


Notas:
  • [1] Sites que recomendo sobre javascript.
    - w3school
    - DevGuru
    - JavaScript.com (TM)
    -
  • [2] Não que tenha sido a primeira: independentemente do nome da tecnologia, mas a idéia de se utilizar páginas dinâmicas é sensacional.
  • [3] Ponhovo Loreno disse não ser paga-pau do blog, mas sim pagapau. Nós não temos nenhuma objeção contra isso.




Um comentário: