Colocar botão Curtir e Enviar do Facebook em Todas as Paginas do Blog

Cada vez é mais importante conseguir divulgação nas redes sociais, então vamos falar sobre o botão curtir e enviar do facebook para ser utilizado em todas as paginas do seu blog e não somente nas paginas das postagens.

Assim seus visitantes poderão curtir ou enviar para o facebook além de seus posts, a sua pagina inicial ou paginas dos marcadores, enfim o botão recomenda a pagina que ele está e não uma postagem em especifico.
Entre na pagina layout, adicione um gadget de HTML/javascript e cole esse código:

<div id="fb-root"></div><script src="http://connect.facebook.net/pt_BR/all.js#appId=169279313141006&amp;xfbml=1"></script>
<script language="JavaScript" type="text/javascript">
var endereco=(location.href)
document.write('<fb:like href="'+endereco+'" send="false" layout="box_count"style="float:right;" width="80" show_faces="false" font=""></fb:like>');
</script>

Se quiser mostrar o botão enviar só precisa trocar o código send="false" por send="true"

Ou se desejar o botão enviar ao lado do curtir apague este trecho do código: layout="box_count" e coloque no lugar layout="button_count". E aumente o valor width="80" para width="150" isso faz dar mais espaço para o iframe do facebook. Apenas precisamos avisar que depois de passar das mil pessoas que curtiram a pagina o botão neste formato apresentou uma falha nos testes que fizemos, veja na imagem abaixo que no Firefox não apareceu a palavra mil e no internet Explorer o mil ficou abaixo do botão.

Outros tutoriais para ajudar seu blog nas redes sociais:
Botões das Redes Sociais na Vertical - Compartilhar Posts
Usar Melhor as Redes Sociais da Internet - Mídias Sociais
Achar Icones para Redes Sociais (Twitter, Facebook, Orkut)

Então você deve escolher a melhor forma de utilizar o botão curtir e enviar do facebook no seu blog para conseguir mais sucesso nas redes sociais. Em breve vamos falar sobre mais alguns detalhes do botão +1 do Google, apenas não fizemos neste tutorial para não misturar varios assuntos o que poderia gerar confusão na hora de alterar os códigos.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

80 comentários:

  1. Eu pensei em por este no meu Blog,Otudo.tk (n540-tudo.blogspot.com), mas eu ja tenho aquele do quantinho da tela... e gostaria de saber se tem como por este no meio dos outros.. e o do Twitter tbm..

    ResponderExcluir
  2. Nathanael F*

    aqui tem um código Fazer Colunas dentro dos Gadgets

    você pode usar para colocar lado a lado o botão do facebook, twitter... e algum outro caso queira..

    ou ver as opções do addthis: Botão para as redes sociais - AddThis

    tem varias combinações de botões para usar no blog

    ResponderExcluir
  3. Olá Fabiano! Tenho uma dúvida enorme!

    Seguinte tenho um host pago e tals ele é de download mas queria fazer meu próprio protetor, fiz o protetor que não precisa cadastrar celular, mas queria adicionar na url do protetor o seguinte ?url=AQUI_COLOCO_O_ENDEREÇO_QUE_VAI_SER_PROTEGIDO.html

    ai fica www.meusite.com/protetor.html?url=link aqui

    Não sei como faço pra quando eu colocar o link na barra de endereços alterar o código fonte pra mim poder proteger.

    Obrigado!

    ResponderExcluir
  4. Fabiano, desculpe utilizar este meio de comunicação, sei que deverá deletar este comentário, mas recentemente criei um blog e do nada apareceu uns anúncios nele. Já tentei de tudo mas os tais anúncios não saem. Já fui tb no fórum do blogger mas nada. O blog além de não ter fins comerciais é de conteúdo adulto, sendo assim não deveria ter tais anúncios. Agradeço se puder ajudar, pois não sei mais o que fazer. O endereço do blog para que possa dar uma olhada no que acontece é http://baunilhandocompimenta.blogspot.com

    Obrigada, desde já.

    ResponderExcluir
  5. Bom dia
    Precisava de uma GRANDE AJUDA.
    É o seguinte, tenho um cursor personalixado que gostava de colocar no meu blog, no entanto não sei como criar o HTML para depois o colocar no blog.
    Será que me pode ajudar? Aguardo resposta se possivel
    Obrigada
    http://bimbexpress.blogspot.com

    ResponderExcluir
  6. É personalizado, e não o que escrevi. Sorry

    ResponderExcluir
  7. Desculpe, meti o endereço do blog. Já vi que não o devia ter feito

    ResponderExcluir
  8. Repetindo:
    Bom dia, preciso de uma GRANDE AJUDA.
    tenho um cursor personalizado que gostaria de colocar no meu blog
    acontece que não sei como criar o HTML para colocar lá. Podem ajudar-me'
    Muito obrigada desde já e fico a aguardar resposta se possivel
    Cumprimentos

    ResponderExcluir
  9. Origada Fabiano, como sempre é graças às boas dicas do seu blog, que vou aprendendo a construir o meu

    ResponderExcluir
  10. Gostaria de saber como posso fazer um email no estilo:
    contato@portalmangaka.com
    Outra coisa:
    Vc sabe qual é o HTML do rodapé da postagem? Em editar HTML, pesquisei pelo nome rodapé e não deu em nada.

    ResponderExcluir
  11. não sei como criar o protetor de link... mas não entendi a parte que você pergunta sobre como adicionar na url do protetor o seguinte

    mas veja aqui um código que usa esse tipo de link na url: Ampliar Imagens na Pagina do Blog - Zoom nas Imagens

    ResponderExcluir
  12. SUSPIRO
    você precisa hospedar a imagem do cursor e depois colocar o código no blog, veja aqui um exemplo disso: Trocar o cursor do mouse por uma imagem

    Portal Mangaká
    quando registra um dominio você tem direito de criar um email deste tipo, veja no site onde fez o registro.

    o html do rodapé é footer

    ResponderExcluir
  13. Outra pergunta fabiano, já tentei colocar um número maior de postagens na página principal, mas não consigo, o que devo fazer?

    ResponderExcluir
  14. Portal Mangaká
    as postagens você pode alterar em configurações ou na pagina modelo clicando para editar as postagens

    mas se for algum template que baixou da internet pode ter erros, então precisa saber html para procurar e corrigir

    ResponderExcluir
  15. Não foi isso que eu quis dizer, eu já tentei das duas maneiras, já coloquei para aparecer 10 postagens, 20, 30... ou seja como for, a quantidade de postagens na página principal não passa de 7.

    ResponderExcluir
  16. Fabiano desculpe pelo incomoda, mas vc conhece alguma maneira de corrigir o numero de postagens na página principal, mexendo no código HTML do blog? Porque minhas postagens estão resumidas, mas mesmo assim o número de postagens na página principal não passa de 7.

    ResponderExcluir
  17. oi fabiano eu queria saber como faz para colocar a hover nas postagens do blog.
    Aquele négocio que você coloca o mouse fica de outra cor!!!

    ResponderExcluir
  18. os nao conhece os blogueiros porque isso e tao raro respondam

    ResponderExcluir
  19. É bom para os inciantes, bom tutorial



    -------------------------------
    http://naruto-9tails.blogspot.com/

    ResponderExcluir
  20. apenas aparceu no final do bloogger no local aonde coloquei o html/javascript é assim esmo? eu pensei que aparecia em cada postagem tambem

    ResponderExcluir
  21. Ben
    esse botão aparece onde adiciona o gadget, se quiser pode usar na pagina editar html depois de trecho post.body, então aparece depois da postagem, mas tem que colocar o trecho b:if... para mostrar somente na pagina da postagem pois esse código recomenda a pagina atual e não a postagem, ou seja quando aparecer na pagina dos marcadores vai recomendar a pagina do marcador e não cada postagem. veja aqui como mostrar Conteúdo diferente nas paginas do blog

    ResponderExcluir
  22. Portal Mangaká
    não achei qual é o código que controla o numero de postagens no html do blog

    ResponderExcluir
  23. Matheu$
    é possivel trocar a cor do texto, veja aqui: Alterar cores dos links - CSS

    sobre alterações no cursor do mouse vou pesquisar

    ResponderExcluir
  24. Fabiano Roberto
    A tha entedi valleu!!

    ResponderExcluir
  25. thanks for share great post...i learn a lot

    ResponderExcluir
  26. eu queria aprender como lococar para os pessoais curtir e em seguinda aparecer foto das pessoas = no seu site

    ResponderExcluir
  27. Estou iniciando nessa área de blogs agora, devido à uma "exigência" do trabalho.. E, poxa vida! Esse tutorial é muito bom mesmo, Fabiano.. Aos poucos estou aprendendo como levar meu blog adiante, com suas dicas.. Ja vi que elogios não faltam ao seu belissimo trabalho, mas não custa nada reforçar.. Parabens!! ;)

    ResponderExcluir
  28. olá
    tenho uma duvida
    eu tenho uma pagina do meu site no facebook
    para que eu possa usar esse botão tenho que inserir algum dados da minha pagina do facebook ????
    Lá na pagina do facebook tem um botão curti quero que esse msm botão fique com o msm tanto de pessoas cutino...
    oq é precisso fazer ??

    ResponderExcluir
  29. ops desculpe minha ignorancia

    é que ñ foi explicado no tutorial

    Resposta da minha pergunta é:
    var endereco=("aqui vai o endereço da minha pagina do facebook")

    obrigadoo

    ResponderExcluir
  30. isso mesmo, mas é a like box
    http://developers.facebook.com/docs/reference/plugins/like-box/

    ResponderExcluir
  31. Não resolveu nada. Quero o botão curtir ao final de cada post.

    ResponderExcluir
  32. Luiz Fernando de Campos Velho

    veja aqui: Botão Curtir e Enviar do Facebook Juntos

    só só colocar o código depois do post.body ou post-footer-line post-footer-line-1

    mas o código deste tutorial também funcionaria sem problemas

    ResponderExcluir
  33. Olá, primeiramente, bom trabalho com seu blog. Nos ajuda muito mesmo. Mas então, sobre o botão curtir... Eu adicionei o botão CURTIR que eles disponibilizam no Facebook no meu blog , só que ao fazer um teste, ou seja, eu "curti" uma postagem minha, a contagem se deu em todos os demais posts, gostaria de saber o porquê disso, parece bobo, mas é uma dúvida que fiquei, e pesquisei, pesquisei, mas não encontrei resposta, mas enfim, cara, de qualquer forma, parabéns de novo!

    ResponderExcluir
  34. Thyago
    esse código funciona para a pagina atual que está exibindo...

    ou seja quando está na pagina principal do seu blog ele vai curtir a pagina inicial e não a postagem

    só funciona na postagem quando ela é exibida numa pagina individual

    ResponderExcluir
  35. Quando vou fazer uma postagem eu coloco o título da postagem depois seu corpo e por último os marcadores, depois a publico...


    Existe alguma forma de ocultar o título da postagem no Blog?

    Assim: nos resultados de busca aparecerem o título, mas quando clicarem no link não aparecer o título!!

    ResponderExcluir
  36. Marcos Vinicius
    seria possivel achar e retirar o titulo da postagem da pagina... mas talvez prejudique a indexação

    na pagina editar html, marque para expandir o modelo e procure por:

    < a expr:href='data:post.link' >< data:post.title/ >< /a >

    isso é o titulo do post

    ResponderExcluir
  37. Mateus Back
    acho que não tem como ver quem curtiu

    ResponderExcluir
  38. e em botoes de compartilhar? sei que aqui nao tem nava haver com botoes de compartilhar.. mais me tire essa duvida.. tem como ver quem compartilhou?

    ResponderExcluir
  39. sites como addthis permitem cadastro e você pode saber quais posts foram compatilhados... mas não dá para saber quem foi

    ResponderExcluir
  40. Super obrigada Fabiano! Consegui ! mas gostaria de coloca-lo abaixo do post, depois do LinkWithin como esta o seu e não consegui, não aparece. Vc pode me explicar como fazer. Olha como ficou:
    www.meuchocolateeeu.blogspot.com
    Mais uma vez super obrigadaaaaa!

    ResponderExcluir
  41. tem que achar o mesmo lugar que colocou o código do linkwithin então pode colocar o botão curtir próximo dele

    ResponderExcluir
  42. Olá, Fabiano,

    Sempre acompanho as dicas do seu blog e utilizo vários códigos que são publicados aqui, o que tem me ajudado bastante na melhoria e na divulgação do meu site.

    Porém, estou com um problema:

    Quando posto qualquer link do meu site no facebook, o mesmo ainda mantém a descrição antiga, sendo que eu já apaguei esta descrição e inclusive troquei-a por uma imagem. Como resolvo isto?? Se puder ajudar, agradecerei muito.

    ResponderExcluir
  43. @Luanda Vieira trocou a descrição por uma imagem? o facebook deve usar as meta tags para pegar a descrição não adianta só trocar o visual do seu blog, veja aqui: Descrição e Palavras Chave - Meta Tags

    ResponderExcluir
  44. Fabiano estou levando o código acima,eu exclui o meu estava no html,expandir modelo,eu sem querer apaguei umas aspas.
    Obrigada.
    Linda noite para vc,bjus

    ResponderExcluir
  45. Fabiano, como que eu faço para colocar no meu blog, mas não quero curtir a postagem e sim a pagina inicial do meu blog.

    Como fazer?

    ResponderExcluir
  46. @Robson Ribeiro pode criar aqui o botão curtir definindo qual a pagina deseja http://developers.facebook.com/docs/reference/plugins/like/

    ResponderExcluir
  47. Consegui colocar o botão curtir graças ao seu blog, obrigada. Pelo html eu não estava conseguindo.

    ResponderExcluir
  48. Não consegui colocar! coloco o codigo na minha pagina e nao aparece nada!

    ResponderExcluir
  49. @Make Teen Oficial veja se não apagou nada por engano no código

    nos testes que fiz funcionou perfeitamente

    ResponderExcluir
  50. Fabiano ja tentei seguir suas dicas e digo que sou uma lesma nisso viu !!!vc pode me ajudar por favor, pode ne passar seu email, por auqi fica ate tosco eu fazer minhas perguntas de tão bobas que são, mais me ajudaria muito se me respondesse as mesmas...Meu email é niviamariahsilva@hotmail.com

    obrigada

    ResponderExcluir
  51. Olá Fabiano

    Se eu consigo, qualquer um consegue...E eu consegui!!! Obrigada!!!

    ResponderExcluir
  52. Olá. gostaria de uma ajuda. Coloquei o botão enviar e curtir do facebook junto aos posts do meu blogger (www.pufolandiasantamaria.com.br), mas ele não envia um resumo do post. Envia apenas o título e o link. Alguém sabe me informar o que estou fazendo de errado. Obrigado.

    ResponderExcluir
  53. Ricardo Pivetta
    tente colocar esse código na pagina editar html depois da parte do resumo da postagem. vou fazer um mais detalhado sobre isso.

    < meta expr:content='data:post.snippet' name='description' / >

    ResponderExcluir
  54. Boa noite Fabiano, instalei o botão curtir no meu blog porem ele não posta o resumo da postagem, apenas vai o titulo e a imagem. Como que funiona esse resumo? São as Metatags? O que poderia ser feito para corrigir? Poderia me ajudar nesse sentido?

    ResponderExcluir
  55. como eu coloco um botao de curtir e enviar para uma postagem especifica e nao para a pagina toda? sempre da erro ;/

    ResponderExcluir
  56. Olá! Sei colocar o botão curtir no meu blog, porém, eu gostaria que cada post que eu publicar tenha o botão direcionado para a publicação que eu fiz, ou seja, toda vez que eu coloco o botão curtir ele entende que é toda a página, mas, eu quero somente o post que eu publicar, entendeu? Tem como resolver isso?

    ResponderExcluir
  57. O botão do jeito que está no código envia a pagina atual que é visitada

    ResponderExcluir
  58. olá,
    uma dúvida, esse botão é apenas para divulgar toda a página do blog, correto? para colocar o botão de curtir e enviar, em cada postagem é necessário outro HTML?
    obrigada

    ResponderExcluir
  59. esse código precisa repetir em cada lugar que gostaria que apareça o botão

    ResponderExcluir
  60. Meu querido, seu blog é um arraso! Tem me ajudado bastante e, pelo que percebo, não tem sido útil só para mim.
    Coloquei os botões de curtir e enviar do Face, mas fiquei com uma dúvida: como eu vejo que curtiu ou enviou um post do meu blog? Acho que essa dúvida é pertinente a outras pessoas também.
    Obrigada desde já!

    Beijão

    ResponderExcluir
  61. Onde encaixo (no código) o endereço da Página do Facebook?

    ResponderExcluir
  62. esse código é para as paginas do seu blog.

    o código "pega" automaticamente o endereço da pagina.

    ResponderExcluir
  63. Fabiano... O botão ficou abaixo da linha divisória das postagens.
    Quero que fique logo após as postagens!

    ResponderExcluir
  64. então tem que entrar na pagina editar html, marcar a opção expandir modelo de widgets e colocar o codigo depois de post.body

    ResponderExcluir
  65. Boa noite! venho sempre aki teu blog é 1000...brigada...bjs!!!

    ResponderExcluir
  66. Olá, eu gostaria de saber sobre esse botão nas postagens. Tenho blogs e parei de blogar, mas retornei em um novo.Nos outros eu tenho o botão certinho lá nas postagens, mas agora, não consigo.Sei que muita coisa mudou e nem tudo é mais permitido em blogs. Isso assim tem como usar, de curtir posts?

    ResponderExcluir
  67. Jane

    se o código não funcionou tente pegar diretamente no site do facebook ou usar os botões do AddThis para compartilhar seus posts, veja aqui:
    Escolher Qual Botão de Compartilhamento Aparece no Blog

    ResponderExcluir
  68. Olá Fabiano, voltei pra te perturbar, rs. Queria saber como deixar a data no inicio de cada post e o facebook como o desse blog: http://criemoda.com/

    ResponderExcluir
  69. Roberta

    esse template foi personalizado, mas não tenho os códigos para fazer esse tipo de alteração.

    ResponderExcluir