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.
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:
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.
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:
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
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.
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 == "item"'>
<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='"pt_BR"' 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.
<div id='fb-root'></div>Apenas altere o trecho:onnect.facebook.net/pt_BR/all.js#xfbml=1&appId=ID do aplicativo colocando o ID do aplicativo do seu blog no facebook.
<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&appId=ID do aplicativo';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
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">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:
</div>
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
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.
Marcadores: Gadgets, Redes Sociais, Sites Úteis