Blogger: Aprenda a como colocar a barra de recomendações do Facebook em seu blog

   Olá caros leitores blogueiros e blogueiras, hoje estamos aqui com mais um tutorial destinado ao Blogger, estou aqui com uma ferramenta nova do Facebook, a barra de recomendações, que ajuda o seu blog a promover-se tanto na internet quanto no Facebook.

Introdução
    A barra de recomendações como se pode ver abaixo, é uma ferramenta oficial do Facebook que pode ser integrada a qualquer blog, com facil instalação e sem muita complicação durante o processo, mas leia com atenção cada passo para que a ferramenta fique estável e válida em seu blog.

  Obs.: Iremos mexer no HTML central do seu blog, aconselho que você faça um backup do seu template.

Adicionando Marca Open Graph (importante)


  Primeiramente é necessário que você contenha o as tags de gráfico do Facebook abertos para que esta ferramenta consiga ficar estável, caso o contrário ela mostrará um bug.

  • Vá até o Painel do Blogger > Clique em Mais Opções > Escolha a página Modelo > Clique em Editar HTML.
  •  Agora procure pela tag: <head> e abaixo introduza o seguinte código:
 
<!-- Começo Open Graph metadata -->
<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'/>
<!-- Fim Open Graph metadata -->

Agora clique em Salvar

Criando um app do Facebook


    É necessário criar um aplicativo para o Facebook, caso você tenha um aplicativo criado em sua conta você pode avançar para a instalação do JavaScript. Caso o contrário, vá até a página de desenvolvedores do Facebook.
Exemplo de como preencher os campos

  • Clique em Criar um novo aplicativo;
  • Coloque o Título do seu blog, e clique em Continuar;
  • Após pedirá a verificação de palavras, você dijita corretamente e clique em Criar;
Após você será redirecionado para a página do seu aplicativo, caso isso não aconteça aperte F5 ou acesse novamente a página de desenvolvedores.

(Obs.: Anote o APP ID do seu aplicativo, como destacado na imagem)

  • Preencha todos os campos;
  • Nos campos "App Domains e Website with Facebook Login" adicione o URL do seu blog — (com http://)
  • Clique em Salvar Alterações;

Pronto, o seu aplicativo está com ajustes corretos para a ferramenta.

Adicionando o JavasScript

   Agora estaremos introduzindo o JavaScript DK, um código essencial para que o widget fique válido.
  • Enfim, volte até o Blogger e entre novamente no HTML central.
  • E procure pela tag <body> 
(provavelmente o seu template é novo então estaria assim:   <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>). 
  • Ao encontrar a tag certa, adicione abaixo o seguinte código:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP_ID_DO_SEU_APLICATIVO', // App ID
      channelUrl : '//http://www.SEU_BLOG.com', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    // Additional initialization code here
  };
  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Salve, e pronto. Agora siga para o próximo passo.
Adicionando o código do widget

   Agora vá até o Layout, clique em Adicionar Gadget, escolha a opção HTML / JavaScript, e cole o seguinte código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="25"
data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div></b:if>

Obs.:
  • "25" - Número de segundos que o plugin irá esperar antes de ele se expande.
  • "Like" - tipo de ação (ou Como Recomendado).
  •  "2" - Número de recomendações a serem exibidos.
  •  "right" -  A posição do plugin.
---------------------------------------------------

 Salve, e finalmente a ferramenta está adicionada.

Queria agradecer a equipe Blogger Tricks, que me ajudou muito com essa ferramenta.