Comentários do Facebook no Blogger - Sem duplicar e sem complicação

Bom dia nobres senhores que leem - reforma ortográfica moment: "As palavras paroxítonas terminadas em dois "-oo" e em "-eem" agora perdem o acento circunflexo" - este nobre blog.

Explico-vos agora como inserir aquela caixa de comentários do facebook no blogger, sem duplicar, sem complicar, na maior facilidade do universo conhecido pelo homem.

1) Modelo > Editar HTML > Prosseguir > Expandir modelos de Widget

2) Procura o </head> , abaixo dele vai tá abrindo o body

3) Cola logo abaixo do <body> antes das outras coisas:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4) Em qualquer lugar que quiser os comentários cola

<div class="fb-comments" data-href="data:post.url" data-num-posts="10" data-width="470"></div>

5) se desse jeito não deu certo, cola

<div class="fb-comments" expr:data-href="data:post.url" data-num-posts="10" data-width="470"></div>

6) Se ainda assim não deu certo, desiste porque essa porcaria não funciona não.


Me deparei com o problema ao ajudar o maluco do fantasymedieval.blogspot.com/ que é meu brodi de infância.

Ele me disse que rodou a web inteira, brasileira e gringa, e não achou como inserir a caixa de comentários no facebook no blogger corretamente. Quando ele conseguia, sempre duplicava os mesmos comentários em todas as páginas.

Dei uma navegada no google e vi que realmente todos os tutoriais que tinham por aí eram muito complexos.

Como eu já tinha inserido comentários do Facebook no WordPress na maior simplicidade do mundo, imaginei que no blogger não deveria ser tão complexo quanto os tutoriais estavam ensinando, daí mandei o código acima por email para o cara sem testar nem nada (preguiça) e incrivelmente funcionou.

Se deu certo pra você, ao contrário dos complicadíssimos tutoriais da net, comente abaixo e ajude a divulgar em redes sociais e talz.

Atualização: Pra quem quer monitorar os comentários, terá que criar um app pra caixa de comentários: http://www.dicasparablogs.com.br/2012/06/aplicativo-facebook-comentarios-blogger.html
. Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Rec6 - Botão de número de votos já mandando o título

Opa.

Sei que estou falando demais nesse Rec6 mas, olhando minha postagem anterior, ví que dava pra fazer um upgrade que ia auxiliar a toda comunidade que tem o botão de número de votos do Rec6 no seu site.

Bom, no capítulo anterior (heheh postagem anterior), vimos que não precisamos ficar presos ao layout oferecido pelo script do Rec6 e aprendemos também a guardar em uma variável JavaScript a quantidade de votos de qualquer link no Rec6.

Mas, ví que, ao clicar no link do botão oferecido pelo script, só vai a URL da página para a indicação, não vai o título automaticamente. O que dá trabalho a nosso visitante que indica o post (ou a nós mesmos quando somos nós que indicamos). Temos que escrever toooodo o título (ou usar a técnica milenar do Ctrl+C Ctrl+V).

Chega de blablablá, o truque consiste apenas em alterar o href dos 2 links presentes no botão, via JavaScript. Simples não? Por que o mico não pensou nisso antes? Mico burro.

O script deles gera um botão sem o parâmetro 'titulo', nosso script adiciona ao link do botão o atributo 'titulo'. É claro que pra fazer isto cada botão precisa estar dentro de algo (div) que tenha um nome único (ID). Mão na massa:

<div class="cod_syxt" id="cod_syxt_js">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=http://sua_url" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "Seu Titulo";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "Seu Titulo";
</script>

Se você tiver mais de um botão na mesma página, tem que usar alguma coisa pra dar um nome diferente pra cada div pai dos botões. Eu usei os IDs das postagens. Veja abaixo.

Pro pessoal do Blogger:

<div class="cod_syxt_css" id="cod_syxt_js_<$BlogItemNumber$>">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<$BlogItemPermalinkUrl$>" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js_<$BlogItemNumber$>").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "<$BlogItemTitle$>";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "<$BlogItemTitle$>";
</script>

Não sei muito de WordPress mas arrisquei aqui:

<div class="cod_syxt_css" id="cod_syxt_js_<?php the_ID(); ?>">
 <script language="JavaScript" src="http://rec6.via6.com/link.php?action=widget&url=<?php the_permalink(); ?>" type="text/javascript"></script>
</div>
<script>
 links_rec6 = document.getElementById("cod_syxt_js_<?php the_ID(); ?>").getElementsByTagName("a");
 ptos = links_rec6[0].innerHTML;
 links_rec6[0].href = links_rec6[0].href + "&titulo=" + "<?php the_title(); ?>";
 links_rec6[1].href = links_rec6[1].href + "&titulo=" + "<?php the_title(); ?>";
</script>

Veja esse negócio funcionando ao passar o mouse sobre o botão que tem aqui no meu blog (aproveita e clica heheh). Veja na barra de status que, além do parâmetro 'url', agora também temos o parâmetro 'titulo'.

Bugs? Grita nos comentários ae. Té. (Agora acho que já acabaram minhas postagens sobre Rec6).

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Indicar o post do blog em bookmark social

Postado também no: fórum iEvolution.

Olá povo.

Nesta postagem ensinarei uma forma rápida de inserir botões/links de indicação da sua postagem em sites como Digg, del.icio.us, rec6 e TutoCle. (Assim como há no final dos meus posts)

Editado 27/11/06: A pedido nos comentá estou adicionando o LinkBlog e favorit0br (que nome!).

Após inovar colocando no Fórum iEvolution este sistema de indicação decidi escrever este post.

Sim, sei que nos sites dos caras eles devem ensinar a fazer isso, porém nos sites que eu pesquisei ví que só ensinam de forma genérica (para o site todo) e com aquelas imagenzinhas chatas. Não ensinam especificamente para usuários do blogger ou wordpress.

Bom, basicamente é só você fazer um link para a página de recepção dos links do site de bookmark passando como parâmetro a URL e o título que você quer. (obs.: O rec6 ainda não tem suporte para receber o título, mas eu já inclui na esperança de que eles corrijam a mancada futuramente Graças ao comentário do Anônimo descobri que o Rec6 usa 'titulo' ao invés de 'title' - editei os códigos).

Exemplo para o blogger:

Adicionar esta página no
<a href='http://tutocle.com/post?url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>' target='_blank'>TutoCle,</a>
<a href='http://del.icio.us/post?v=4&partner=fb&url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>' target='_blank'>Del.icio.us,</a>
<a href='http://digg.com/submit?phase=2&partner=fb&url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>' target='_blank'>Digg,</a>
<a href='http://rec6.via6.com/link.php?url=<$BlogItemPermalinkUrl$>&titulo=<$BlogItemTitle$>' target='_blank'>Rec6,</a>
<a href='http://www.linkblog.com.br/novoPost.jsp?acao=voltar&link=<$BlogItemPermalinkUrl$>&titulo=<$BlogItemTitle$>' target='_blank'>LinkBlog,</a>
<a href='http://favorit.0br.com.br/bookmarks/?action=add&address=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>' target='_blank'>Favorit0br,</a>

Exemplo para o Wordpress:

Adicionar esta página no
<a href='http://tutocle.com/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>' target='_blank'>TutoCle,</a>
<a href='http://del.icio.us/post?v=4&partner=fb&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>' target='_blank'>Del.icio.us,</a>
<a href='http://digg.com/submit?phase=2&partner=fb&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>' target='_blank'>Digg,</a>
<a href='http://rec6.via6.com/link.php?url=<?php the_permalink(); ?>&titulo=<?php the_title(); ?>' target='_blank'>Rec6,</a>
<a href='http://www.linkblog.com.br/novoPost.jsp?acao=voltar&link=<?php the_permalink(); ?>&titulo=<?php the_title(); ?>' target='_blank'>LinkBlog,</a>
<a href='http://favorit.0br.com.br/bookmarks/?action=add&address=<?php the_permalink(); ?>&title=<?php the_title(); ?>' target='_blank'>Favorit0br,</a>

//Pessoal do Wordpress, não tenho muita habilidade com o mesmo, por isso me corrijam aí nos comentários a respeito de qualquer erro cometido.

Prontim, espero ter ajudado. :)

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.