Código da Barra de Recomendações do Facebook (Posts Recomendados)

Gadgets com posts recomendados fazem pode ajudar muito seu blog e agora podemos colocar um gadget do facebook com assuntos recomendados que na verdade mostra as postagens do blog que receberam cliques do botão curtir do facebook. Então vamos falar sobre o gadget de posts recomendados do facebook para colocar no seu blog.

gadget postagens recomendadas no facebook

Esse código se divide em 3 partes, mas antes de começar você precisa ter um aplicativo do facebook para seu blog caso não tenha ainda veja nosso tutorial sobre: Como Criar Aplicativos no Facebook e Usar Comentários no Blog, se você já tem os comentários do facebook no seu blog então já existe o seu aplicativo e vamos usar o mesmo numero do aplicativo neste código, portanto se tiver duvidas sobre criar ou pegar o ID do aplicativo do Facebook veja no link que citamos.

Agora entre na pagina modelo (recomendamos que fizesse um Backup do Template antes de começar), entre em editar HTML e marque a opção expandir modelos de widgets. Use o ctrl F para achar <head> e coloque esse código logo abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;pt_BR&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

Agora procure por <body ....> isso pode variar um pouco conforme o template e ter outras tags junto, mas sempre vai começar assim <body então coloque esse outro código depois dele.
&lt;div id='fb-root'&gt;&lt;/div&gt;
&lt;script&gt;(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&amp;appId=ID do aplicativo';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
Apenas altere o trecho:onnect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=ID do aplicativo colocando o ID do aplicativo do seu blog no facebook.

Caso queira você pode ver e criar seu código na pagina de desenvolvedores do Facebook (Facebook Developers), mas achamos mais simples só trocar o numero do aplicativo no código pronto.

E por ultimo procure por <data:post.body/> e cole esse código logo abaixo dele:
<div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2">
</div>
Aqui podemos fazer algumas alterações de posicionamento da barra de recomendações do Facebook, isto é simaliar tutorial sobre botões das redes sociais fixos no canto da pagina, veja o que você pode alterar e personalizar:

data-read-time="30" - tempo que demora em expandir o gadget do Facebook.
data-side="right" - posicionamento do gadget, troque right por left para mostrar do lado esquerdo da sua pagina
data-num-recommendations="2" - numero de postagens recomendadas pelo Facebook


gadget do facebook com posts recomendados

Esse tipo de gadget é similar ao que já mostramos nos tutoriais sobre:
Gadget com Postagens mais Recomendados nas Redes Sociais
Personalizar Gadget Postagens Populares do Blog - Barras Coloridas

A idéia principal desses acessórios e ferramentas para seu blog é mostrar as postagens que as pessoas mais gostaram ou visitaram e provavelmente são paginas interessantes do seu blog e vão ajuda a conquistar a fidelidade de novos visitantes que ainda não conhecem o seu site. Afinal todo quer causar uma boa primeira impressão e o melhor jeito é indicar para os visitantes do blog as nossas melhores postagens.

12 comentários :

  1. Fabiano,

    Eu percebi esse código implementado em muitos Blogs Wordpress, logo você estar valorizando muito nosso desempenho no Blogger com códigos de altop nível. Parabéns

    Abraços

    ResponderExcluir
  2. Fabiano, como em outros gadgets este também provoca ou contribui para lentidão na abertura do Blog?

    ResponderExcluir
  3. Edson F. sugerimos que coloque o gadget no seu blog e deixe uns dias. Então faça uma analise nas suas visitas, tempo de carregamento da pagina e outras estatisticas para ver se vale a pena ou não manter o gadget.

    isso varia muito conforme o tema do seu blog.

    ResponderExcluir
  4. Fabiano passei aqui para resolver uma duvida rápida os cliques do novo botão compartilhar do Google + 1 serve como recomendações no Google + 1 também ou não tem nada a ver ?

    ou seja cada clique que der no botão compartilhar os leitores irão compartilhar no perfil do google plus deles e ao mesmo tempo eu clico no google + 1 ?
    By: Johni dos santos

    ResponderExcluir
  5. Adm acho que basicamente é o mesmo botão apenas mudando sua forma de layout

    ResponderExcluir
  6. Ah então utilizarei o botão compartilhar já que ele serve como google + 1 obrigado fabiano

    Johni dos santos

    ResponderExcluir
  7. Instalei e funcionou direitinho. Tinha feito com o código fornecido pelo próprio facebook, mas não deu certo, porque faltava a expressão "expr:" antes do "data-href". Obrigado pela dica.

    ResponderExcluir
  8. Boa Tarde Fabiano...Firmeza?

    Estou com um brobleminha de compartilhar post do meu blog na página do facebook será que vc poderia me ajudar?

    O negócio é o seguinte: quando compartilho um post do meu blog para a minha página no facebook aparece a opção de escolher uma imagem para representar essa postagem, a imagem que "representa o post ñ aparece, Como posso evitar isso? Fazer que o facebook enxergue somente a imagem que esta contida dentro do post. Antes eu compartilhava os posts sem problema algum... O que será que esta causando isso? desde de dezembro de 2012 q ñ compartilho nada do blog,quando fui compartilha agora,apareceu esse problema...

    ResponderExcluir
  9. existe codigo para escolher a imagem, mas seria a mesma para qualquer post.

    acho melhor deixar o facebook pegar a imagem direto na sua pagina mesmo que nem sempre seja a imagem que você gostaria

    ResponderExcluir
  10. Como add app como esses da pagina no face da loja kabum? Alguém pode ajudar?

    ResponderExcluir
  11. está falando do que ? banners da loja? se for isso é melhor usar o adsense que mostra anúncios diversos... e você ganha dinheiro

    se for algum efeito em banners deve ser feito em flash mas para fazer um igual precisa ter o programa flash e entender de criação de animação

    ResponderExcluir