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
Colocar botão Curtir e Enviar do Facebook em Todas as Paginas do Blog
4/ 5
Oleh

83 Comentários

5 de setembro de 2011 15:24 delete

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..

Reply
5 de setembro de 2011 15:32 delete

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

Reply
.
5 de setembro de 2011 18:05 delete

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!

Reply
5 de setembro de 2011 21:59 delete

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á.

Reply
6 de setembro de 2011 07:59 delete

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

Reply
6 de setembro de 2011 08:00 delete

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

Reply
6 de setembro de 2011 08:01 delete

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

Reply
6 de setembro de 2011 08:03 delete

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

Reply
6 de setembro de 2011 10:54 delete

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

Reply
6 de setembro de 2011 12:20 delete

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.

Reply
6 de setembro de 2011 14:03 delete

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

Reply
6 de setembro de 2011 14:06 delete

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

Reply
6 de setembro de 2011 14:21 delete

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

Reply
6 de setembro de 2011 15:50 delete

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

Reply
6 de setembro de 2011 16:21 delete

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.

Reply
6 de setembro de 2011 18:59 delete

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.

Reply
6 de setembro de 2011 20:16 delete

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!!!

Reply
6 de setembro de 2011 20:45 delete

os nao conhece os blogueiros porque isso e tao raro respondam

Reply
6 de setembro de 2011 20:47 delete

voces estao satisfeitos com o meu blog amigos

Reply
6 de setembro de 2011 21:35 delete

É bom para os inciantes, bom tutorial



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

Reply
Ben
7 de setembro de 2011 01:17 delete

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

Reply
7 de setembro de 2011 14:41 delete

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

Reply
7 de setembro de 2011 14:44 delete

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

Reply
7 de setembro de 2011 14:46 delete

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

sobre alterações no cursor do mouse vou pesquisar

Reply
Ben
7 de setembro de 2011 22:40 delete

Fabiano Roberto
A tha entedi valleu!!

Reply
9 de setembro de 2011 09:53 delete

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

Reply
11 de setembro de 2011 14:24 delete

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

Reply
13 de setembro de 2011 12:13 delete

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!! ;)

Reply
16 de setembro de 2011 15:55 delete

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 ??

Reply
16 de setembro de 2011 16:04 delete

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

Reply
16 de setembro de 2011 17:37 delete

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

Reply
26 de setembro de 2011 10:09 delete

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

Reply
26 de setembro de 2011 15:02 delete

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

Reply
29 de setembro de 2011 02:39 delete

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!

Reply
29 de setembro de 2011 12:50 delete

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

Reply
15 de outubro de 2011 10:26 delete

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!!

Reply
15 de outubro de 2011 11:06 delete

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

Reply
19 de outubro de 2011 17:06 delete

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

Reply
21 de outubro de 2011 19:32 delete

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?

Reply
21 de outubro de 2011 23:47 delete

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

Reply
20 de novembro de 2011 00:14 delete

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!

Reply
20 de novembro de 2011 01:01 delete

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

Reply
22 de novembro de 2011 16:29 delete

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.

Reply
22 de novembro de 2011 17:01 delete

@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

Reply
24 de novembro de 2011 22:40 delete

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

Reply
28 de novembro de 2011 00:01 delete

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?

Reply
28 de novembro de 2011 00:32 delete

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

Reply
7 de dezembro de 2011 21:27 delete

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

Reply
2 de janeiro de 2012 15:53 delete

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

Reply
2 de janeiro de 2012 16:31 delete

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

nos testes que fiz funcionou perfeitamente

Reply
3 de janeiro de 2012 17:41 delete

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

Reply
16 de janeiro de 2012 10:01 delete

Olá Fabiano

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

Reply
28 de janeiro de 2012 11:53 delete

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.

Reply
28 de janeiro de 2012 12:37 delete

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' / >

Reply
28 de janeiro de 2012 23:13 delete

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?

Reply
3 de fevereiro de 2012 21:05 delete

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

Reply
22 de fevereiro de 2012 09:03 delete

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?

Reply
22 de fevereiro de 2012 13:28 delete

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

Reply
.
27 de fevereiro de 2012 14:11 delete

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

Reply
27 de fevereiro de 2012 15:04 delete

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

Reply
23 de maio de 2012 15:20 delete

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

Reply
17 de dezembro de 2012 07:55 delete

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

Reply
17 de dezembro de 2012 15:58 delete

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

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

Reply
18 de dezembro de 2012 06:29 delete

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

Reply
18 de dezembro de 2012 11:14 delete

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

Reply
Zeza
21 de abril de 2013 21:51 delete

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

Reply
17 de novembro de 2013 13:15 delete

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?

Reply
17 de novembro de 2013 17:49 delete

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

Reply
18 de novembro de 2013 02:26 delete

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/

Reply
18 de novembro de 2013 08:50 delete

Roberta

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

Reply
20 de outubro de 2014 22:31 delete

ÓTIMO, DEU CERTO DE PRIMEIRA, OBRIGADA PELO TUTORIAL

Reply
27 de novembro de 2015 23:42 delete

Olá!!! Como faço para deixar as páginas dos comentários do meu blog visível?

Reply
28 de novembro de 2015 00:50 delete

entre nas configurações do blogger e procure o item postagens e comentários.

lá tem a opção Local do comentário. Então é só escolher umas das opções

Reply