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

by Matheus mota 11:09 0 Comments
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.

Se deu certo comenta!
Se tiver alguma duvida comenta!
Se quiser agradecer comenta!
Obrigado por sua atenção..
Fonte: http://www.dicasparablogs.com.br/2012/06/codigo-barra-recomendacoes-facebook.html 
Related Posts with Thumbnails

0 Comentários