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: , , ,

22 Comentários:

Às 7 de setembro de 2011 07:37 , Blogger Códigos Blogger disse...

Ow, mas você tem dois comentários aqui no seu blog.
Tipo o meu é do blogger. Como coloco caixa de comentário igual esse acima que tem o facebook, e ainda deixando o meu comentário padrão.

 
Às 7 de setembro de 2011 22:31 , Blogger Códigos Blogger disse...

É só não fazer a última parte do tutorial que é ocultar a caixa de comentário do blogger.

 
Às 10 de setembro de 2011 14:50 , Blogger Códigos Blogger disse...

Pessoal quando eu ia para a pagina de Identificação não aparecia a tela citada.
então eu fiz todo procedimento mas copiei os números finais da url do meu facebook pessoal.

E Deu Tudo certo! Muito Obrigado a TODOS

 
Às 21 de setembro de 2011 02:43 , Blogger Bauerlopez disse...

não deu certo, e prestei bastante atenção.

 
Às 4 de outubro de 2011 19:21 , Blogger Marcio Rocha disse...

Ok, eu fiz e deu tudo certo. Só um "pequeno" probleminha: quando desativo a caixa de comentarios do blogger, a opção "comentar" no final dos posts tambem desaparece. Como meus leitores vao comentar agora?
Grato.

 
Às 4 de outubro de 2011 20:50 , Blogger Códigos Blogger disse...

@Marcio Rocha tente fazer isso...
vá no HTML do seu blog, marque a opção "Expandir modelos de Widgets". Procure por

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

Abaixo dessa linha cole...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='#comments'>ADD COMENTÁRIO</a>
</b:if>

Depois salve e veja.
Obs. Ele só aparece na página de postagem. Para aparecer no início, exclua <b:if cond='data:blog.pageType == &quot;item&quot;'> e também </b:if>

 
Às 14 de outubro de 2011 22:55 , Blogger Marcos Pergentino disse...

OLÁ CAMARADAS,

POR ESSA DICA EU NÃO ESPERAVA! EU ENTRAVA EM BLOGS DO UOL.COM E FOLHAONLINE E FICAVA "PAQUERANDO" ESSE ESQUEMA E AGORA ELE ESTÁ FUNCIONANDO MUITO BEM EM MEU BLOG [www.desfiledequartetetos.blogspot.com] - FAÇA-NOS UMA VISITA AMIGOS!
E MUITO OBRIGADO NOVAMENTE!

 
Às 10 de novembro de 2011 16:05 , Blogger Roodriigoo disse...

ouu eu nao too conseguindo isso poor qee meu blogger ta com um bug nao aparece essa caixa de comentarios oqee eu devo fazer ?

 
Às 11 de novembro de 2011 03:07 , Blogger Equipe disse...

BOM

 
Às 11 de novembro de 2011 16:28 , Blogger Códigos Blogger disse...

Rodrigo, você pode optar em instalar outro template.

 
Às 16 de novembro de 2011 16:52 , Blogger Jonaz Lima disse...

Quando eu me registro, não aparece uma página informando meu APP ID, mostra uma página pra escolher os aplicativos

 
Às 30 de novembro de 2011 15:49 , Blogger Vagner Santos disse...

Estou com o mesmo problema do Jonaz acima. Alguém ajuda?

 
Às 1 de dezembro de 2011 11:34 , Blogger Códigos Blogger disse...

Jonaz e Vagner,

Entrem na página http://developers.facebook.com/
No meno ao topo clique em Aplicativos
Faça o login se necessário
Repita a senha se necessário
Agora é só copiar o APP ID que está na sessão Configurações e logo abaixo Resumo, exibindo o App ID/API Key

 
Às 3 de dezembro de 2011 23:44 , Blogger Leivas disse...

Mto útil o post!
Só uma dúvida...até ontem tava funcionando normal, mas agora os comentários do facebook sumiram. Alguma ideia do porque?
Valeu!

 
Às 5 de dezembro de 2011 13:57 , Blogger Códigos Blogger disse...

Estranho. Tente refazer o tutorial.

 
Às 11 de dezembro de 2011 02:47 , Blogger Marcos Pergentino disse...

como colocar o botão "assinar" do facebook no blogger?????

 
Às 9 de janeiro de 2012 13:41 , Blogger Abner disse...

Como faço pra aumentar, o tamanho da caixa de comentários do facebook?

 
Às 11 de janeiro de 2012 20:05 , Blogger Códigos Blogger disse...

Abner, Creio que o tamanho se ajusta automaticamente dependendo do local.

 
Às 8 de agosto de 2012 11:53 , Blogger Mega Tablóide disse...

O Meu aparece a seguinte mensagem: "Aviso: este plugin de comentários está operando no modo de compatibilidade, mas não tem publicações ainda. Considere especificar um 'href' explícito como sugerido na documentação do plugin de comentários para aproveitar todos os recursos do aplicativo."

E também some os comentários, depois aparece de novo!

 
Às 22 de janeiro de 2013 02:29 , Blogger SrtaInhani disse...

Eu estou com uma duvida, quando eu clico em SALVAR MODELO em EDITAR HTML aparece a seguinte frase: Error parsing XML, line 3, column 14: Element type "htmlxmlns: fb" must be Followed by Either attribute specifications, ">" or "/>". O que eu fiz errado?

 
Às 3 de abril de 2013 22:38 , Blogger Blogue do Renato disse...

Fantástico! Valeu!

 
Às 2 de março de 2014 04:43 , Blogger amaal khodir disse...

http://www.fnur.bu.edu.eg/
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/422-2013-12-10-10-18-01
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/421-2013-12-10-09-48-39
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/419-2013-12-09-07-21-12
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/420-2013-12-10-09-48-38
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/417-2013
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/418-2013-12-09-07-17-28
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/415-2013-12-03-08-09-23
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/416-2013-12-03-08-25-21
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/413-2013-11-21-07-50-21
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/414-2013-11-25-09-38-30
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/411-2013-11-20-08-11-53
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/412-2014
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/409-2013-2014
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/410-2013-11-13-17-25-28
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/407-2013-11-09-08-51-15
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/408-2013-11-13-11-55-53
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/405-2013-11-09-08-42-05
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/406-2013-11-09-08-46-10
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/403-2013-11-09-08-25-45
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/404-2013-11-09-08-28-15
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/400-2013-11-09-07-50-13
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/401-2013-11-09-08-03-31
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/398-2013-11-09-07-29-40
www.fnur.bu.edu.eg/fnur/index.php/main-news/item/399-2013-11-09-07-43-49
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/397-eugen-ionesco
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/402-2014-2013

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial