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.
Fabiano,
ResponderExcluirEu 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
Fabiano, como em outros gadgets este também provoca ou contribui para lentidão na abertura do Blog?
ResponderExcluirEdson 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.
ResponderExcluirisso varia muito conforme o tema do seu blog.
obrigado.
ResponderExcluirFabiano 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 ?
ResponderExcluirou 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
Adm acho que basicamente é o mesmo botão apenas mudando sua forma de layout
ResponderExcluirAh então utilizarei o botão compartilhar já que ele serve como google + 1 obrigado fabiano
ResponderExcluirJohni dos santos
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.
ResponderExcluirBoa Tarde Fabiano...Firmeza?
ResponderExcluirEstou 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...
existe codigo para escolher a imagem, mas seria a mesma para qualquer post.
ResponderExcluiracho melhor deixar o facebook pegar a imagem direto na sua pagina mesmo que nem sempre seja a imagem que você gostaria
Como add app como esses da pagina no face da loja kabum? Alguém pode ajudar?
ResponderExcluirestá falando do que ? banners da loja? se for isso é melhor usar o adsense que mostra anúncios diversos... e você ganha dinheiro
ResponderExcluirse 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