quarta-feira, 13 de agosto de 2008

Como exibir posts relacionados no Blogger

Nível: avançado

Infelizmente o Blogger ainda não tem a opção de exibir os posts relacionados ao final do texto, para facilitar a vida do leitor e aumentar o tempo de permanência dele no blog.

Desde o dia 11 de agosto estou usando neste blog um script legal que faz isso com precisão baseado nos marcadores que os posts têm em comum.

Eu até encontrei algumas traduções desse recurso, mas assim como ocorreu com o formulário de comentários embutido no post, só funcionou no meu blog depois que eu fui à fonte e traduzi por minha conta.

Este script é um tanto quanto complicado, por isso peço que use um blog de teste para não fazer besteira. Para visualizar o resultado crie neste blog de testes pelo menos cinco posts fictícios usando a mesma tag/marcador/label.

  1. Clique em Layout, Editar HTML. Cole o seguinte código antes da tag </head>: Onde está escrito 5 você pode substituir pelo número de posts relacionados que você deseja mostrar.
    <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 < 5) {
    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>
  2. Salve. Clique em Expandir modelos de widgets. Procure o seguinte código:
    <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>
  3. Substitua pelo código abaixo: A parte em destaque é o que será realmente acrescentado.
    <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>
  4. Salve. Procure (ainda em modo expandido) o código que pode ser:
    <div class='post-footer-line post-footer-line-3' />

    ou
    <p class='post-footer-line post-footer-line-3' />
  5. Substitua por:
    <div class='post-footer-line post-footer-line-3'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.url != data:blog.homepageUrl'><h4>Leia também:</h4></b:if>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>
    </div>
    Se você não encontrar nenhum p ou div que use class='post-footer-line post-footer-line-3', crie-a logo abaixo da tag que fecha class='post-footer-line post-footer-line-2'. Onde está escrito Leia também você pode escrever o texto de sua preferência. Salve.

Tradução do tutorial do PurpleMoggy's Blog aproveitando idéias do tutorial do Blosque.com.

32 comentários:

  1. Helen, não encontrei nenhum *class='post-footer-line post-footer-line-2*, nem nada parecido. O que faco?

    ResponderExcluir
  2. LR, passa o endereço do seu blog para a gente ver o que ocorre. ;)

    ResponderExcluir
  3. Muito legal seu blog. Um monte de coisa legal e útil. Parabéns!
    Obrigado por visitar o nosso blog.
    Pedro

    ResponderExcluir
  4. Olá helena tudo bem? bom fiz corretamente e deu certo só que queria esse codigo nos posts na pagina inicial. Porque só aparece os posts relacionados quando é aberto 1 post separado entendeu?

    www.blogaioh.blogspot.com

    abraços para você!

    aguardo respostas

    ResponderExcluir
  5. MUITO OBRIGADA
    mandou bem pra caramba nesse tutorial

    abraços

    Adri Amorim

    ResponderExcluir
  6. Adri, obrigada. Gostei muito dos seus blogs. Parabéns!

    ResponderExcluir
  7. Estou com o mesmo problema do leitor LR.
    Não há no meu template nada como: class='post-footer-line post-footer-line-2.
    Segui todos os passos bem, mas o ultimo não deu por isso.

    ResponderExcluir
  8. Agnaldo, eu olhei seu blog, acho que no seu o rodapé do post está assim:

    <p class="postmetadata">

    Então pode colocar nessa classe do post.

    ResponderExcluir
  9. Cara Helen,
    Infelizmente só aparece o nome LEIA TAMBÉM, mas sem os posts relacionados.
    Talvez o meu template não de pra fazer isso.
    Eu acho.

    ResponderExcluir
  10. Agnaldo, eu olhei seu código e vi que você configurou para mostrar 20 posts relacionados. Você tentou com menos primeiro? Tenta com 5 primeiro, depois vai aumentando para ver o máximo que dá certo.

    ResponderExcluir
  11. Olá Helen,
    Desculpe por tá dando trabalho.
    Diminui para 5 e não aparece.Se puder olha no meu blog. Qdo clico no titulo de um artgio, aparece só o nome:Posts Relacionado, mas as postagens não.

    ResponderExcluir
  12. OI Helen,
    Eu fiz tudo direitinho, só que não apareceu nada no meu blog.
    Porque será?

    ResponderExcluir
  13. Entrei no seu blog e não vi o código lá. o_O

    ResponderExcluir
  14. Oi Helen

    Valeu pela dia.

    Funcionou direitinho. É só prestar atenção na última etapa quanto às tags p ou div.

    Abraços

    ResponderExcluir
  15. Fiz tudo como esta dizendo ali, mas porém quando cliquei para ver uma postagem somente estava o texto " Leia também " e as postagens relacionadas nada. Se você poder me ajudar entre no meu blog ou me envie um email.
    Obrigado!!!

    ResponderExcluir
  16. Oi Helen...
    Pois bem, não tenho o trecho
    (b:if cond='data:post.labels')
    Já procurei um que seja parecido mas não encontrei, se puder me ajudar.
    Meu blog é http://rubiorc.blogspot.com/

    Obs.: Os parênteses foram trocados só para ser aceito.

    Obrigado.
    Rubio.

    ResponderExcluir
  17. Rubio, você tem que configurar seu blog para exibir os marcadores no post. Só vai aparecer quando você configurar assim.

    ResponderExcluir
  18. Oi Helen, eu aqui de novo.
    De origem, o template do meu blog por ser convertido de Wordpress para Blogger não tinha os marcadores mesmo. Então peguei de um template padrão e coloquei lá, funcionou belezinha.
    Agora esses posts relacionados não está dando certo. Dê uma passadinha por lá e veja o que está acontecendo por favor, se puder é claro.
    Pode verificar também no Blog de Teste - http://blog-de-teste-1.blogspot.com/.

    Abraço, aguardo resposta.

    ResponderExcluir
  19. Oi!

    Valeu aí pelos codigos. Muito bom.

    ResponderExcluir
  20. Bah eu fiz tudo como tu explico. O problema é que aparece só o "leia também:", porque os posts não aparecem? Obrigado.

    ResponderExcluir
  21. Helen,

    Magnífico, adicionei os códigos conforme suas orientações e..... Funcionou!!

    Obrigado,
    Fabio Velasco

    ResponderExcluir
  22. Único tutorial que pego no meu blog!

    ResponderExcluir
  23. Usei esta dica e funcionou direitinho.Muito obrigado.Irei colocar um agradecimento e o link para este blog em um post em meu blog.Thanks.

    ResponderExcluir
  24. Eu coloquei tudo certo, mas não apareceu nenhum post relacionado, será que não tem a ver com o template?

    Obrigado.

    ResponderExcluir
  25. Helen gostaria muito de colocar essa parte de postagens relacionadas ate presciso de colocar mas nao consegui voce poderia me ajudar? Desde ja muito obrigado. Qualquer coisa meu Msn: (portaltirense@hotmail.com)

    Link do blog: www.portaltirense.com

    Obrigado!

    ResponderExcluir
  26. Coloquei o último trecho do código dentro de uma div que criei com CSS para ficar personalizado, mas quando abro a página principal do blog carrega o bg da div, fora isso o relacionados está funcionando. Sabe corrigir o bg?

    ResponderExcluir
  27. Adorei o post!
    Como disse no outro comentário, este foi o único site que conseguiu ensinar corretamente!
    Mto obrigado mesmo!
    PS: eu queria que os posts relacionados aparecessem com foto, como os seus!
    Como faço para colocar?
    Agradeço MUITO toda a ajuda!
    Sucesso!

    ResponderExcluir
  28. -, eu não faço frilas mais, sinto muito.

    ResponderExcluir
  29. Sérgio, se não me engano usei esse tutorial do El Escaparate de Rosa que é uma tradução do Blogger Plugins.

    ResponderExcluir
Posts relacionados