Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

19.5.10

image
O site ALL BLOGS TOOLS publicou com exclusividade um tutorial com código simples para que em poucos passos você possa instalar a caixa de comentários do Facebook no Blogger. Uma ótima informação.

O tutorial basicamente traduzido é o seguinte:

Etapa 1 ► Desativar Comentários Padrão.
A primeira coisa que você deve fazer para desativar comentários padrão do Blogger. se você~e não quer ter as duas  formas de comentários.
Faça login no Blogger, Configurações ► Comentários e marque a opção Ocultar
...
image
 ...
Em seguida, role a página e clique em image
 ...

Etapa 2 ► Gere seu Facebook App ID.
Agora você deve gerar o seu próprio app facebook id, ele é realmente fácil e uma etapa do processo, basta ir a página  facebook developers e preencher as seguintes informações:

 image 
Em seguida, clique em criar aplicativos.

A próxima página mostrar um monte de informações Você vai precisar apenas uma linha, é App ID:
Basta copiar e guardar em um bloco de notas, vamos precisar nos próximos passos. Na imagem abaixo você vê onde encontrar o seu Facebook App ID:.

image

Etapa 3 ► Código da caixa de comentários.

NOTA: Publiquei código oferecido pelo site ALL BLOGS TOOL, mas você deve edita-lo para adequar ao seu blog, é muito fácil , não se preocupe. Veja como fazer:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p align='left'><img alt='' class='icon-action' height='51' src='http://4.bp.blogspot.com/_JwD5r652h00/S_K3UAPbbuI/AAAAAAAAAWQ/sZRBQArO34k/comments-facebook.gif' width='331'/></p>
  <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/en_US/all.js&#39;;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments width='600' xid='boxID'/>

  <div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>

  </b:if>
Entenda o código e o que deve ser alterado:
O trecho grifado em azul é o endereço da imagem que aparece acima do box. Sugiro que você substitua por alguma imagem ou texto mais adequada ao seu modelo e a língua do seu país (rsss)
image

Em vermelho ► AppID Substituir pelo seu número gerado no Facebook app id (gerada na etapa anterior)


Em roxo600 :Refere-se a largura da sua caixa de comentários.  Deve ser alterado de acordo com as medidas do seu template.Ex: 500 ou 450.

Em verdeboxID dar a sua caixa de comentários qualquer identificador único, que pode ser o seu nome, o título do blog… Só é permitido letras e sem espaços ex: maxmax, maxsite ou maxblog.

IMPORTANTE!! Toda a área grifada em negrito no final do código , refere-se à área de créditos e direcionamento para o site site ALL BLOG TOOLS. 

Para que você não seja malvado, retire apenas a área de direcionamento sem retirar a parte dos créditos. Veja as alterações que eu fiz SEM RETIRAR OS CRÉDITOS.
<div style=' font-size:10px; padding-left:-13px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> </b></div>
  </b:if>
Veja e teste como ficou a minha caixa de comentários já editada
...
image
 ...
Veja que fiz as mudanças, mas sem retirar o crédito do ALL BLOGS TOOLS .
Abaixo o código completo da caixa que eu editei.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://3.bp.blogspot.com/_DCJ4PAWLOdE/S_PyevR70gI/AAAAAAAAEXk/bNulaI1H9yQ/s320/commnet.jpg' width='331'/></p>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;123418887678526&#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/en_US/all.js&#39;;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments width='600' xid='boxID'/>
<div style=' font-size:10px; padding-left:-13px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> </b></div>
  </b:if>
Bom e agora, onde devemos inserir esse código?
Em “Editar HTML” marque na opção  “Expandir modelos de widgets”
Procure pelo seguinte trecho <data:post.body/>
Cole todo o código DEPOIS/ABAIXO dele.  Visualize e se estiver tudo bem, salve o template.
É isso queridos!
Beijo da Mama♥

28 comentários

Amanda

E a caixa é bem mais bonitinha,né Márcia...rs
Acho que seguindo este passo a passo nem tem como errar.
Bjos querida!

Max Martins

Olha a Mama aí dando show de novo!
Bacana mesmo essa caixinha de comentários.
Boa dica.

Abraços

Tom

Achei muito legal. Tá de parabéns, mas a unica coisa que achei "ruim" é que os comentários aparecem para todos os "post's". Os comentários não são exclusivos de cada matéria.

Gustavo

Eu gostei bastante, mas ainda prefiro o disqus.

Alexandre Capellie

Gostari de ter em meu blog, um espaço como este para comentários....Com esse formato e aparência...Como fazer? Sou novo nisso...rsrsrrs Obrigado

MamaNunes

@Alexandre Capellie
Oi!
Leia esse artigo.
http://blogger-dicasmamanunes.blogspot.com/2010/07/como-customizar-area-de-comentarios-do.html

beijo da Mama♥

Renan Horan

Não estou conseguindo criar o App ID, da erro toda hora. snif snif...

Leo Silva

não tem como meter essa caixinha num Gadgets/Widgets em vez de ficar abaixo dos post?

parabéns pelo excelente trabalho...

tem-me ajudado imenso no meu blog com suas ideias

Fernando

@Renan Horan

Eu também estou com mesmo problema. O código postado aqui dá certo! Mas eu não consigo comentar. Em vários blogs ou sites que usam esse plug-in, muito deles acontece a mesma coisa.

♥ Lucy Sem Fronteiras ♥

Olá Mama,

sou nova por aqui :)
Ótimo seu blog!
Quanto a este post, eu apliquei em meu blog de testes e ficou perfeito.
Porém, tenho uma dúvida e me perdoe a ignorância mas, caso recebamos um comentários 'indesejado' por meio desta ferramenta, então como e onde é que poderemos excluí-lo???

Estou indecisa tb, pois como disse o Tom acima, os comentários deixados em um post, aparecerão em todos os posts do blog.

De qualquer forma, parabéns por seu trabalho aqui ;)

Beijos no ♥

Fernando

Galera achei esse link aqui e funciona perfeitamente, basta seguir os passos. o ruim é que não descobri como receber notificações de comentários por email. Mama, se você quiser dar uma olhada, pode até atualizar essa postagem que é de interesse de muito. Espero estar ajudando =D Beijos!

Segue o link a baixo:

http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/#comment-12234

GISELE CALDAS DESIGNER

@Fernando

Oi, tenho uma dúvida. Fiz dos dois jeitos. A da Mama acabou q não deu certo, mas aí fiz com a dica do FErnando e deu certo. Percebi que se eu ocultar o comentário do blogger, não será possível ver que no meu blog tem espaço pra comentários. Então vou ter de deixar visível, fica feio. alguém tem uma dica? será o meu modelo de template?

GISELE CALDAS DESIGNER

@Fernando

esqueci de deixar o endereço do meu blog pra vcs verem.
www.dimp-rio.com.br

Ruy Downloads

http://2.bp.blogspot.com/_DCJ4PAWLOdE/TLbcdwvITLI/AAAAAAAAE60/9xNKzhbaqbM/s1600/Emoticons.png

Anônimo

Também não tenho facebook nem hei-de ter, muito provavelmente.

Compreendo que sou das poucas a não ter e que a minha atitude seja confundida com falta de adaptação à actualidade ou algo assim, mas não me importo nada com isso, pois por enquanto tenho as minhas ideias definidas sobre o assunto.

Compreendo que dê jeito para a profissão e publicidade mas maior parte das pessoas não o usa para tal, por isso esta perspectiva fica automaticamente sem efeito.

Diria até que o facebook foi uma das piores invenções humanas, tendo sido inventado numa época como a de hoje, formada por uma sociedade "podre".

- A maneira como maior parte das pessoas encaram o facebook é degradante, é visto como uma competição na qual ganha quem tiver mais "amigos". Perspectiva que revela uma total superficialidade.
Se tivermos a sorte de ter 2 ou 3 amigos de verdade na vida, devemos considerar-nos sortudos.

- Acentua a tendência de já só estarmos com as pessoas virtualmente.

- Acentua ainda uma outra tendência da actualidade que revela a sua falta de espírito: invadir a privacidade dos outros e deixar (e gostar, pelos vistos) que invadam a nossa.

Para os que têm facebook e estão "viciados" nesta modinha de hoje em dia, espero que pensem no assunto.

RCC PITANGA

valeu pela dica. show de bola. ;).

Gerusa Florencio

Olá...eu fiz tudo certinho como está aí no post,mas a caixa de comentários não aparece,só aparece a imagem "comente",o que faço?
tenho certeza que a ID está correta!

Guilherme

Poxa... Ja tentei varias vezes... A caixa de comentários do facebook aparece, mas o problema é que quando se comenta em 1 post, o mesmo comentário aparece em todos os posts :(
Achei que o AppID fosse para não dar esse erro =(
Ajuda ? T.T

♪♫Claudio Luiz Music♪♫

Muito bom o Post...
vlw...!

Anônimo

Ι’m not that muсh of a online readеr to be honеѕt but your blοgs rеally nice, κееp it up!
I'll go ahead and bookmark your website to come back in the future. Many thanks

my blog ... healing
My site :: aromatherapy diffuser

Anônimo

kkkkkkkk

Anônimo

Whatѕ up this is somewhаt of оff topic
but I was wonԁегіng if blоgѕ use WΥЅIWYG edіtors
or if you haνе to mаnuаlly сoԁe with ΗTML.
I'm starting a blog soon but have no coding know-how so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!

Also visit my homepage: V2 Cigs

Anônimo

tiestox Obrigado um post muito bom! free iPhone 5
tiestox 9954

Anônimo

Wоnԁerful blog! Ӏ found it whіle suгfing aгound οn Yahοо News.
Do уou have аny suggеstіons on hοw
to get listеd in Үahοo Νews?
I've been trying for a while but I never seem to get there! Thank you

Here is my web site: Atoday.Org

Anônimo

I wаs recommеnded this wеbsite by my cοusin.
I аm not sure whethеr this post is wrіttеn by him as no one elѕе know such ԁetailed about mу problem.
You're incredible! Thanks!

Also visit my site; visit the following web site

Anônimo

рrοstate massage Individual para HombreRecοmеndado para pегsonas y ԁuгante еl estado ideal
del hombгe. Til no solo se refiere a lаs
рr? As у dеjar que fluyan como por ejemplo un masaje
еr? Bring youг significant otheг" as Will Iccha, Knowledge, Known & the City? Good thing, but mind itself starts working on her forehead, nose, Devi Gayatri is the essence of prostate massage sex only for prostate massage community probably does have nude photos in the world. Then chant this mantra.

my blog - tantric massage

amaal khodir

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

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.