Como colocar o botão do Facebook no Blogger - Dicas Blogger '+g+"
Home » Hacks » Como colocar o botão do Facebook no Blogger
Como colocar o botão do Facebook no Blogger 10 6 99
Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de fora do Facebook é perder a oportunidade de receber milhares de visitas no seu blog ou site. Vou iniciar uma série de artigos ensinando como integrar um blog ao Facebook, e o primeiro é como colocar um botão do Facebook no Blogger:
A vantagem de utilizar o botão "Gosto" (ou "Like", em inglês e "Curtir", em português de Portugal) é que sempre que alguém clica no botão será feita uma atualização do status no mural do perfil no Facebook com o link do post em questão. Os amigos deste perfil também irão receber esta atualização. Para colocar este botão, tal como o botão do Twitter, não é necessário ter conta no Facebook.
Integrando o botão do Facebook no Blogger:
O botão "Gosto" pode ser inserido em qualquer parte. Recomendo que seja colocado no final do post, é o local onde o leitor irá realizar a próxima ação após a leitura, mas isto não é uma regra. Antes de fazer esta alteração, faça um backup completo do template do blog.
Entre no painel do Blogger, clique em design e, depois, em editar HTML. Marque a caixa expandir modelos de widgets e procure por:
Copie e cole logo abaixo do código anterior:
Se deseja que o botão do Facebook apareça na parte superior do post, ao lado do título, coloque o código logo abaixo desta linha:
Otimizar o botão do Facebook:
Para que o botão não apareça na página inicial, somente nos posts, deve inserir o código em verde:
Para que apareça as fotos dos utilizadores que gostaram, deve alterar o false para true, e o tamanho do widget de 40px para 80px:
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px;'/>
Outra coisa que pode ser feita é alteração de "Gosto" para "Recomendar", bastando para isto alterar o like (em vermelho, no código acima), por recommend.
A fonte das letras também pode ser alterada, por default vem em Arial, mas é possível utilizar outras fontes.
Salve e veja se ficou tudo correto.
Gostou? Seja fã do Dicas Blogger no Facebook!
Facebook, Hacks
Unknown 29 de setembro de 2010 09:28
O botão ficou ótimo! ;)
Anônimo 29 de setembro de 2010 09:38
Ótima Dica ! Obrigada.
Ana Corina 29 de setembro de 2010 10:27
Eu já tinha o botão, mas ele só aparecia depois que a pessoa entrava no post e eu queria justamente q ele aparecesse sempre, obrigada!
Só que com a 'novidade', meu Tweet Button endoidou e fica mostrando 35 retweets pra todos os posts, a menos que a pessoa clique no título ou no 'leia mais', daí sim ele mostra o número real...
Como posso mudar isto?
Unknown 29 de setembro de 2010 11:50
Muito legal esta dica.
Assim que puder colocarei no meu blog.
Washington Charles 29 de setembro de 2010 12:19
Em primeiro lugar parabens pelas dicas, elas ajudam bastante, muito boas msm!
Agora deixa eu te pergunta, vcs poderiam me ajudar, pois coloquei o cadigo no meu blog mas aparece uma mensagem de "erro" em vermelho logo apos a frase "X pessoas gostam disso".
Quando clico no erro fala que e impossivel mostrar a pagina pois ela recebeu denuncias de abuso =/
essas denuncias em questão e referente ao meu blog ou nda a ver? ou oe outra coisa?
se vcs puderem me ajudar agradeço muito
Raphaela Pimentel 29 de setembro de 2010 12:47
Como faço para colocar essa caixa cinza nos meus códigos Juliana já procurei em todo lugar e não acho me ajuda por favorrrrrrrrrrrr
Jose 29 de setembro de 2010 13:58
Ana Corina, eu coloquei uma tabela com os dois botões, o do Facebook e o do Twitter, funcionou perfeitamente (netdentista.com). Se você não conseguir eu coloco aqui para você tentar colocar igual.
Ton, qual é a URL do teu blog?
Juliana 29 de setembro de 2010 15:09
Rafaela, vc só esqueceu de procurar no Dicas Blogger :)
http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html
Washington Charles 29 de setembro de 2010 16:51
JV, a Url e essa: http://www.wcombr.co.cc/
Jose 29 de setembro de 2010 17:46
Ton, os subdominio criados no co.cc são considerados Spam pelo Facebook, os códigos e widgets relacionados com este domínio não funcionam (o Google também considera estes domínios abusivos, raramente indexa um subdominio no co.cc, pondere adquirir domínio próprio, será muito mais vantajoso para o blog).
Washington Charles 30 de setembro de 2010 00:08
JV, obrigado pelo esclarecimento!!!
Fabiano Roberto 30 de setembro de 2010 00:36
achei legal o botão... mas vou comentar outra coisa, sempre que venho no seu blog penso preciso aprender com a juliana como usar o twitter rsrs (quase 7 mil seguidores), mas confesso que no twitter não faço por merecer rsrs.
Raphaela Pimentel 30 de setembro de 2010 06:06
obrigada juliana como me ajuda sempre
Juliana 30 de setembro de 2010 06:23
Na verdade já era pra ser uns 9.000 rsss
Lembra quando sequestraram meu domínio? Exclui cerca de 1800 seguidores.
O segredo? Vou te contar por email ;)
Nanda Botelho 30 de setembro de 2010 11:42
Não achei a marca data post no meu template, existe alguns que não têm isso?
Anônimo 30 de setembro de 2010 14:38
Coloquei no meu blog, mas quero fazer uma pergunta. O texto pode ser alterado?
Lanna Teen 30 de setembro de 2010 19:00
fikouu ótimuh
Jose 30 de setembro de 2010 19:42
Nanda, você marcou "Expandir Widgets"?
Maria Lucia, o texto pode ser alterado somente para "Recomendar", como foi explicado no post.
Nanda Botelho 30 de setembro de 2010 21:07
JV - Eu cliquei sim.Esta marca é encontrada no começo, meio ou fim do HTML?
Anônimo 30 de setembro de 2010 22:21
Ok. Obrigada. Bjs!
Bianca 1 de outubro de 2010 17:36
Adorei! Valeu por mais essa dica!
Nanda Botelho 2 de outubro de 2010 10:31
JV - Eu achei a marca e já coloquei o botão, obrigada!
Anônimo 11 de outubro de 2010 00:08
Achei esse botão muito útil! Já coloquei no meu blog!
Brian Luis 16 de outubro de 2010 17:01
Esse botão é muito legal! Ótima dica, o meu anterior era SHARE, agora melhorou, pois é Gosto! Parabéns Juliana, ótimo artigo!
O facebook tá crescendo! ;)
Prika Vask 18 de outubro de 2010 01:04
Essa dica foi show!! Adorei, já coloquei nos meus Blogs! Vlw msm!!! ;)
Livia - De olho nas tendências 27 de outubro de 2010 19:33
Ótima dica! Até eu que sou iniciante consegui fazer!
Já adicionei no meu blog.
Renato Peres 5 de novembro de 2010 09:35
Muito boa sua dica. Me ajudou muito!!
queria saber, como faço para alterar a cor da fonte?
Anônimo 30 de novembro de 2010 18:21
O meu contador (balãozinho com o número) do botão curtir tá cortado que nem o seu aí em cima.
Vc sabe se tem como acertar isso? xx
InfoInformatica 30 de novembro de 2010 18:39
Em portugues de portugal like = gosto
Teté 3 de dezembro de 2010 11:47
Olá, não estou conseguindo que funcione... segui as regras, mas realmente a coisa não aparece no meu blog... http://tetelog.blogspot.com/
Tenho que esperar algum tempo ou funciona na hora?
Teté 3 de dezembro de 2010 13:22
Me desculpa, não sei se cheguei a enviar um recado antes desse... deu um bug aqui no envio, só agora que vi.
Enfim, não consigo fazer funcionar... segui as instruções mas o botão nem sequer aparece... alguém poderia me ajudar?
Meu blog é o: http://tetelog.blogspot.com/
Teté 6 de dezembro de 2010 15:55
Opa, sou eu de novo (sorry).
Na verdade funcionou, mas em parte. Dentro do blog não aparece o botão. A não ser que você acesse o blog via Facebook pelo Networkblogs. Alguém pode me dizer como resolvo isso?
Nanda Botelho 16 de dezembro de 2010 13:53
Quanto a marca data post, eu consegui achar quando digitei letra por letra na caixa de busca.
Foi uma descoberta sem querer, não sei se funciona para todos, mas comigo funcionou.
Sapatinhos da Val 18 de dezembro de 2010 16:32
Estou montando meu blog, vou aproveitar todas as dicas! Gracias!
Unknown 28 de dezembro de 2010 00:27
thomaz 4 de janeiro de 2011 23:31
Olá, não consigo localizar o data post, já tentei várias vezes.
thomaz 5 de janeiro de 2011 16:38
consegui adicionar o botão fshare, mas ele fica bem isolado, no canto direito de minha publicação.
como fazer para mudá-lo de lugar?
E ainda quando clico nele nada acontece, é normal,por eu ser o proprietario do blog?
Outra coisa, o botão só aparece em posts individuais, quando abro o blog por inteiro, ele não aparece.
obrigado e desculpe-me o excesso de palavras....
Willams Nunes 7 de janeiro de 2011 03:07
Muito boa a dica, uma pergunta como fazer para deixar ambos lado a lado, botão twitter e facebook?
Já esgotei meus conhecimentos de webdesigner, vontade de rasgar meu diploma rssss
Já tentei display inline e nada é unica forma que funcionou com display inline foi aplicando direto no post-fooster
post-footer style='display:inline;'>
Mas ai os botões ficaram desalinhados e um pouco acimas do post-footer, além de aparecer os um pedaçinho dos artigos relacionados.
Abs e grato desde já pela ajuda.
Vinicius Chargel 9 de janeiro de 2011 16:31
Muito bom, funcionou corretamente! Obrigado!!
Elias 10 de janeiro de 2011 12:49
O Botão funcionou perfeitamente. Obrigado! Mas tenho uma pergunta: Gostaria que, ao invés de aparecer "Seja o primeiro de seus amigos a curtir isso." ou "5 pessoas curtiram isso, seja o primeiro entre seus amigos.", aparece apenas o número! Igual aparece no Dicas Blogger. É possivel?
Weberson Luis 15 de janeiro de 2011 15:29
Primeiro parabéns pelo Blog, uma excelente fonte de referência.
Resolvi colocar o código acima no meu Blog (www.NegociaAcao.blogspot.com), mas o botão "Curtir" só aparece quando mando vizualizar o que estou escrevendo. Quando publico o post ele não mais aparece.
Vocês tem idéia o que pode estar acontecendo?
Anônimo 17 de janeiro de 2011 16:27
Nossa muitoo legal !
Alexandre Schubert 16 de março de 2011 10:58
Mamãe caprichosa 17 de março de 2011 09:31
Muito obrigado!!!Ficou ótimo!
Curti muuuito...
Unknown 23 de março de 2011 23:24
Simone F. Lima 27 de março de 2011 13:09
Eba!!! Consegui. Muito obrigada galera!
Yara Caroline Alflen 5 de abril de 2011 00:11
obrigadaa!! abri varios tutoriais e só este funcionou, porém coloquei o "curti" no final do post! thanks
maisup 3 de junho de 2011 16:16
Dica muito importante valeu!
Marcinha 3 de julho de 2011 19:02
muito legal, ajudou bastante
Rodrigo Avila 12 de julho de 2011 22:15
JV, muito bom, mas nao consegui descobrir quais pessoas LIKEaram o meu post. To ajudando uma amiga, se quiser ver o blog dela... www.bossaclube.com.br abraco!!