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.
Chega de enrolação!
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.
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/>.
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/>.
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.
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 nossofã-paga-pau declarado amigo Ponhovo Loreno [3].
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>
//<![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>
<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>
<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);
}
{
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
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:
Próximo post: assim que me permitirem, deixarei terminarei de implementar um código para "adicionar tags fantasmas", assim mesmo que o post não esteja relacionado com algum assunto, aparecerão sugestões sobre tal assunto.
Postar um comentário