Instalar SDK e Open Graph do Facebook no Blogger

By | julho 15, 2011

Se você já leu e fez o processo de criar sua página dentro do Facebook, agora pode completar o processo adequando a sua página do Blogger ao protocolo open graph.

O Open Graph é um protocolo que torna qualquer página na internet um objeto fácil de compartilhar nas redes sociais, por isso é tão importante que você adeque a sua página Web.

Para colocar as meta tags do Open Graph no Blogger, você deve ir na página de gerenciamento, Design, Editar HTML.

Veja como instalar o Open Graph no WordPress

Clique em “Baixar Modelo Completo” para fazer um backup do seu modelo atual em caso de qualquer erro.

Agora que está com seu backup, clique em editar HTML e depois em “Expandir modelos de widgets”.

Edite o código HTML da sua página, pesquise por head (Ctrl+F) e inserir o seguinte código na linha logo após a o texto head.

ATENÇÃO: Lembre-se de alterar os valores do ID do administrador da página no Facebook, do App Id e também “Meu Site” e “Descrição do seu site”.

Veja como Obter o UID no Facebook e também o ID da sua página

<!-- Facebook open graph -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta expr:content='data:blog.pageName + &quot; posts&quot;' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:description'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='Meu Site' property='og:title'/>
<meta content='Descricao do seu site' property='og:description'/>
<meta content='article' property='og:type'/>
</b:if>

<meta expr:content='data:blog.url' property='og:url'/>
<meta content='https://seusite.com/seulogotipo.jpg' property='og:image'/>

<meta content='1234567' property='fb:admins'/>
<meta content='1234567890' property='fb:app_id'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<!-- Facebook open graph -->

Instalando Facebook SDK no Blogger

Caso você tenha uma necessidade particular de colocar o SDK do Facebook no seu blog, o processo é bem simples, mas lembro que não é requisito obrigatório para instalar o botão “Curtir” no blogger.

Ainda na opção de editar HTML do Blogger, com a opção “Expandir modelos de widgets” marcada, procure pela tag “body” e insira logo apoós o seguinte código:

ATENÇÃO: Lembre-se de alterar “Seu App ID” no código abaixo para o correspondente ao seu aplicativo do Facebook.

<!– Facebook SDK script Code –> 
<div id=’fb-root’/> 
<script> 
window.fbAsyncInit = function() { 
FB.init({ 
appId  : 'SEU APP ID', 
status : true, // check login status 
cookie : true, // enable cookies to allow the server to access the session 
xfbml  : true  // parse XFBML 
}); 
FB.Event.subscribe(‘comments.create’, function(response) {
}); 
FB.Event.subscribe(‘edge.create’, function(response) {
}); 
};
(function() { 
var e = document.createElement(‘script’); 
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’; 
e.async = true; 
document.getElementById(‘fb-root’).appendChild(e); 
}()); 
</script> 
<!– End SDK script Code –>

Instalar Botão de Curtir no Blogger

Agora que você já fez a maior parte do trabalho, pode colocar um botão de curtir nos seus artigos do blogger para que os visitantes possam compartilhar com seus amigos

Veja como colocar botão curtir do Facebook no blogger

Teste de Página do Facebook

Para testar se sua instalação está funcionando utilize a ferramenta URL Linter, criada pelo próprio Facebook.

Facebook URL Linter

Veja como instalar o Open Graph no WordPress

One thought on “Instalar SDK e Open Graph do Facebook no Blogger

  1. Pingback: Instalar SDK e Open Graph do Facebook na Página Web Wordpress | Gus SOS Brasil

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *