sexta-feira, 2 de setembro de 2011

Substituir caixa de comentário do blogger pelo do Facebook

image Foram realizadas muitas mudanças no blogger desde então, porém, sua caixa padrão de comentários não sofreu nenhuma mudança. Então se você já cansou de usar a caixa de comentar do blogger, a partir deste tutorial estarei mostrando como substituir ele pela caixa de comentário desenvolvido pelo facebook.

Exemplo de caixa de comentário do facebook A implantação desse recurso não é não complicada, mas requer certa atenção para realizar os passos corretamente e ter um resultado agradável. Lembrando que não é necessário ter uma página do seu blog criado no facebook ou até mesmo uma conta no facebook.

Então vamos trabalhar!

Criando a aplicação

Antes de implantar a caixa de comentário, é necessário criar uma aplicação no facebook para darmos continuidade ao tutorial. Pra isso, entre no link abaixo:

http://developers.facebook.com/setup/

Nessa página, coloque o nome do seu blog e sua URL, em seguida clique no botão
“Create app”.

Criando aplicação no facebook

Obs. Caso apareça alguma mensagem assim: “Somente desenvolvedores autorizados podem ser adicionados a este aplicativo...” Clique no link para ativar por telemóvel, dê seu número para o facebook enviar uma mensagem com o código de ativação, em instantes receberá o código para realizar a ativação.

Na página seguinte copie o código de “Identificação de Aplicação” e cole esse código em algum lugar para usarmos mais na frente, ou deixe a página atual aberta.

APP ID Api Key

Instalando no Blogger

Criado a aplicação, é hora de completar a instalação do aplicativo no seu blog. Para isso, vá até o Editor HTML, marque a caixinha “Expandir modelso de widgets” e cole o seguinte código em destaque depois de “html”.

<html xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Este trecho está localizada logo no começo.

Agora pesquise por:

<div class='post-footer-line post-footer-line-1'/>

E cole o seguinte código abaixo dessa linha:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol  +
&#39;//connect.facebook.net/pt_BR/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

Agora substitua a parte em vermelho pelo “AppID” do seu aplicativo, aquele que você guardou lá no início. A parte azul é o tamanho da caixa de comentário.

Ainda no Editor HTML do seu blog, pesquise por :

<head>

Abaixo dessa linha cole o seguinte código:

<meta property="fb:app_id" content="APP ID" />

Substitua a parte em vermelho pela APP ID do seu Facebook.

Feito isso, salve o modelo.

Só pra finalizar, vá clique na guia “Configurações” -> “Postagens e Comentários”, na opção “Mostrar comentários?” selecione a opção ‘ocultar’. Em seguida salve as configurações.

Ocultando comentários

Pronto, pra que seguiu os passos acima, não existirá erros. Agora é só deixar seus usuários disfrutar do novo método de comentar em seu blog, que além de deixar seu blog mais por dentro das redes sociais, torna-se uma maneira mais interessante de divulgar seu blog a partir dos comentários.

Link para ver últimos comentários:

http://developers.facebook.com/tools/comments

Link para moderar seus comentários:

http://developers.facebook.com/tools/comments?view=queue

Agora lá vai a perguntinha. Você acha que o blogger deveria atualizar a sua caixa padrão de comentário e deixar de cara nova?

Marcadores: , , ,