Cursos 24 Horas - Cursos 100% Online com Certificado

Botão Curtir/Recomendar do Facebook - Blogger

67 Comentários Autor : Notícia e blog 09 julho 2010

facebook

O Facebook é a maior rede social, depois do Orkut aqui no Brasil, que tal você usar desta plataforma de rede social para divulgar seu blog, está incrível rede possui muitos widgets e entre eles estes botões, de opinião e compartilhamento, eles são compatíveis com o Blogger graças a algumas modificações feitas pelo Blogger Plugins, veja abaixo um demo do Widget em funcionamento, e abaixo como inseri-ló:


Como inserir

Adicionando o Widget abaixo das postagens:

1) Acesse o painel do Blogger(blogger.com)

2) Vá em “Layout/Design”->“Editar HTML”-> marque a caixa “Expandir Modelos de Widgets”

3) Procure pelo seguinte trecho utilizando as teclas CTRL e F:

<data:post.body/>

4) Abaixo dele adicione o seguinte:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=false&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:40px;'/>
</b:if>

Este código exibirá o widget apenas nas páginas de postagem, para exibir em todas retire os trechos em vermelho.

5) Salve e visualize

Personalizando o Widget

1º)Se desejar mudar o texto “curtir” para “recomendar” altere o seguinte trecho no código:

Substitua:

action=like

Por:

action=recommend

Veja o o demo:

Mudando a cor do Botão

2º) Para que seu Botão tenha um fundo cinza mude o trecho:

colorscheme=light

Por:

colorscheme=dark

 

Veja outros artigos relacionados a Facebook:

Referência: Facebook Like / Recommend Button For Blogger

    67 Comentários

    rede social tudofree disse...
    18 de julho de 2010 09:32 #

    rede social "tudofree" www.tudofree.eu5.org

    Divulgue seu site!
    envie sua noticia,links,jogos,musicas e muito mais!

    Daniel Castelo Branco disse...
    15 de agosto de 2010 11:21 #

    Tentei várias dicas para inserir o botão "curtir", mas só através de seu blog obtive êxito. Obrigado! www.senhorjones.com

    Notícia e blog disse...
    15 de agosto de 2010 20:55 #

    @Daniel Castelo Branco
    Que bom que conseguiu! Sempre que precisar é só voltar.

    Saulo Sales disse...
    28 de agosto de 2010 23:54 #

    Gostaria de deixar o botão na página incial do post. Ele só é visualizado quando o internauta clica no título do post, daí ele aparece lá dentro do artigo! Queria deixar o botão na página incial, pois meus artigo não precisam ser clicados para serem lidos!
    Valeu, gostei do blog!
    www.saulosales.com.br

    Notícia e blog disse...
    29 de agosto de 2010 18:56 #

    @Saulo Sales
    Leia o trecho em azul na parte 4

    a-boca-magica disse...
    15 de setembro de 2010 21:13 #

    É possível dar um espaço entre o final do texto e o botão?
    Parabéns, eu também entrei em vários blogs e só com seu tutorial ele funcionou.

    Alcabecinha disse...
    21 de setembro de 2010 17:09 #

    ótima dica...já instalei no meu blog
    prabéns pelas dicas do seu blog

    Anônimo disse...
    2 de dezembro de 2010 15:16 #

    Pretendo colocar o botão "Curtir" do facebook no meu site. Mas o meu site está em CSS.
    Se colocar o codigo HTLM este não funciona.
    Precisava de saber qual o codigo do botar "Curtir" no formato CSS, alguem me pode ajudar?
    Obrigado malta

    Bh Poe a Mesa disse...
    28 de dezembro de 2010 10:03 #

    Visitem nosso blog! http://bhpoeamesa.blogspot.com/

    Mandy... disse...
    6 de janeiro de 2011 11:33 #

    Adorei a dica!

    Marilucia disse...
    10 de janeiro de 2011 12:25 #

    Olá Fernando, como sempre encontro aqui as melhores dicas de uma maneira mais simples. Tem como voce me dizer como faço para colocar um botão igual ao seu, aquele lindinho que esta abaixo do post na área "Compartilhe e Salve!" ? Sou novata no facebook e tenho algumas dificuldades com estes botões. Obrigada

    Abraços

    Weberson Luis disse...
    15 de janeiro de 2011 15:27 #
    Este comentário foi removido pelo autor.
    jader resende disse...
    27 de janeiro de 2011 14:18 #

    Olá Fernando, já tentei e não consegui.
    Coloquei o código como você manda, infelizmente não funcionou, acredito que tenho que colocar meu endereço neste código, se for onde devo colocar?
    Agradeço a ajuda.
    Abraços

    Matheus S.tavares disse...
    5 de fevereiro de 2011 06:00 #

    EU coloquei como estava escrito mas infelizmente não foi.

    Alexandre disse...
    20 de fevereiro de 2011 16:02 #

    Cara gostaria de saber se é possivel fazer o Blog Uol? Se for poderia me ensinar

    Notícia e blog disse...
    20 de fevereiro de 2011 16:08 #

    @Alexandre
    Olha nesta plataforma nuca testei, vou procurar saber e assim que tiver resposta te falo.

    Alexandre disse...
    20 de fevereiro de 2011 16:17 #

    ficaria extremamente grato!!!!!

    Angélica Mascaro disse...
    28 de fevereiro de 2011 21:52 #

    funcionou tranquilo, valeu! =D

    Camila e Karina disse...
    1 de março de 2011 21:43 #

    Valeu, muito boa dica e funcionou direitinho!!!
    artsforyoulembrancinhas.blogspot.com

    Investimob Investimentos Imobiliários disse...
    13 de março de 2011 03:35 #

    Valeu pela dica, depois de tentar umas 10 x com dicas de outros blogs, finalmente com a sua consegui!
    Obrigado e parabéns pela objetividade na dica..

    bloginvestimob.blogspot.com
    www.investimob.com

    Camimila disse...
    13 de março de 2011 21:56 #

    Ja tinha visto em outros sites, mas esse foi o unico que funcionou. =D

    Enjoairy disse...
    15 de março de 2011 14:47 #

    Oi, finalmente encontrei o lugar certo. Correu tudo direitinho no meu blog, obrigado, mas tem um PORÉM: quando alguém curte não aparece para todos os amigos do facebook, somente em seu próprio mural. Você sabe o porquê disto?

    digratisps3 disse...
    22 de março de 2011 20:17 #

    Qual a diferença de clicar no botão curtir ou no botão compartilhar no facebook ?

    Poliana Prates disse...
    23 de março de 2011 23:52 #

    Ficou perfeito, obrigada pela dica! Foi difícil encontrar um código que funcionesse bem! O código fornecido pelo próprio Facebook Developers não funciona direito!..Valeu mesmo!
    Veja o resultado:
    www.prituca.blogspot.com
    Abração!

    Tour Chapada dos Veadeiros disse...
    29 de março de 2011 19:55 #

    Como colocar a Logomarca da empresa para aparecer no facebook quando a pessoa curti?

    JP disse...
    14 de abril de 2011 14:29 #

    Muito bom estou começando na blogosfera agora, não sabia que ganhar grana era tão facil huauha

    PagueMenos disse...
    21 de abril de 2011 19:19 #

    Amigao,

    mesmo retirando a parte em vermelho, no meu blog apareceu apenas quando se clica no titulo da postagem. Nao aparece na pagina inicial.

    Obrigado

    Deborah Lima disse...
    22 de abril de 2011 16:35 #

    Há tempos procurava um artigo que explicasse como fazer isso, mas sempre q eu tentava nunca dava certo. Esse foi o único que realmente funcionou, valeu!

    Rhanda Yassine disse...
    10 de maio de 2011 00:06 #
    Este comentário foi removido pelo autor.
    Moisés disse...
    10 de maio de 2011 15:14 #

    Parabens, tenho alguns blogs, vivo nas redes sociais e uma delas é o FB e queria isto no Blogger, com tua dica e dica da sweetmakeups2.blogspot (http://goo.gl/jnbEy) consegui que o botão "mostrar" e "curtir" agora façam parte de minhas postagens. Pode conferir, aqui meus blogs:
    http://www.moisesalba.com/
    http://linkpelotas.blogspot.com/
    http://modurbana.blogspot.com/
    http://dicasmoisesalba.blogspot.com/
    http://dicasmoisesalba.blogspot.com/
    Abraços e muito sucesso!!

    Baixe Muito disse...
    13 de junho de 2011 19:53 #

    amigo, tenho um facebook, queria fazer que nem vc fez aquele widget do facebook curtir, to tentando mas não consigo, pode me ajudar porfavor? está em baixo de "Publicidade" procurei varios tuto mais nao acho o geito, se poder ajudar ficarei grato

    DonoBlog disse...
    14 de junho de 2011 16:20 #

    vlw gostei desse post, era o eu estava procurando, um completo, nao só o incone "curtir" mas o texto tbm tava qrendo =D.
    Se quiserem ver como ficou no meu blog acesse:

    http://ultraimpactodownloads.blogspot.com/

    Bia disse...
    18 de junho de 2011 14:53 #

    Olhe, também passei por muitos sites mas foi só aqui que realmente consegui instalar o botão do jeitinho que queria! Muito obrigada pelas dicas! :D

    AdmCG disse...
    30 de junho de 2011 10:13 #

    Obrigado amigo!!!
    100%

    Leandro e Gabriela disse...
    30 de junho de 2011 11:24 #

    @a-boca-magica

    To com a mesma duvida! Valeu.

    Samanta disse...
    4 de julho de 2011 21:16 #

    Olá !!

    Ufaaa, até que enfim um botão que funciona !!!
    Obrigada por compartilhar !!

    Um abraço e boa semana !

    Rodrigo Santos disse...
    25 de julho de 2011 23:34 #

    Valew pçrocurei em todas as partes e vcs foram os unicos a passar um tuto decente... valew mesmo

    Papo de Arquiteto disse...
    5 de setembro de 2011 12:17 #

    Muito bom suas dicas, estaremos usando em nosso site.

    Curtir e Descurtir disse...
    6 de setembro de 2011 10:14 #

    Que tal Curtir fora da web também.
    Adcione o Botão Curtir na sua vida.

    ADESIVOS CURTIR
    Cartela com 6 adesivos (4x4 cm cada adesivo, cartela 10X15)
    Por apenas R$ 5 (cinco reais)
    FRETE GRÁTIS NAS COMPRAS ACIMA DE 10 CARTELAS
    http://adesivoscurtiredescurtir.blogspot.com/
    email: curtiredescurtir@gmail.com

    Compre para você, sua família e seus amigos.
    Seja o primeiro na sua cidade.

    Anônimo disse...
    10 de setembro de 2011 15:53 #

    parabéns amigo. de todos os que tentei, foi o único que funcionou!

    ♪ Vivi ♫ disse...
    17 de setembro de 2011 03:09 #

    Olá, muito boa a dica, havia procurado em outros sites, mas o botão curtir não funcionou. Porém, fiz a experiência de curtir, mas na página do Face, não aparece o post ou o resumo do post, o que aparece é esse texto:

    Reações: Enviar por e-mail BlogThis! Compartilhar no Twitter Compartilhar no Facebook Compartilhar no orkut

    Poderia me ajudar a arrumar isso, como faço? Obrigada!

    http://segredodasborboletas.blogspot.com/

    Ciência e Tecnologia disse...
    6 de outubro de 2011 19:59 #

    Valeu! ->Segue a dica http://eletroscience.blogspot.com/

    Solange de Paula disse...
    16 de outubro de 2011 21:47 #

    Muito obrigada pela preciosa dica, que há muito tempo estava querendo. Grande abraço, Solange de Paula.

    Márcio Tavares disse...
    18 de outubro de 2011 01:08 #

    Já vi muitas explicações por aí, mas a sua foi a mais simples, objetiva e compreensível de todas.

    Parabéns!

    Tatiana Lucia disse...
    31 de outubro de 2011 16:54 #

    Obrigadaaaaaa!!!!!! Funcionou super bem!
    Abraços!

    Anônimo disse...
    7 de dezembro de 2011 16:24 #

    vejam e me diz se gostaram www.ficanaweb.blogspot.com

    Anônimo disse...
    21 de janeiro de 2012 12:13 #

    Olá como eu coloco o botão "compartilhar" do facebook em baixo da postagem???

    The Re@lly Jhonny disse...
    9 de fevereiro de 2012 19:26 #

    Muito obrigado amigos, já faz muito tempo que tento e não consigo. Cheguei até aqui por recomendação do "Blog Salada da Camila" http://camilasilva1402.blogspot.com/2011/08/botao-curtir-do-face-no-blogger.html
    Meu blog automotivo é All Car Wallpapers Free Download! http://www.carwp.blogspot.com

    juninhodownloads disse...
    10 de fevereiro de 2012 05:14 #

    Chegou o seu mais novo site de downloads. Acessem:

    www.detudopc2.blogspot.com

    Obrigado !

    Elias di Nunes disse...
    11 de fevereiro de 2012 00:01 #

    Muito boa a explicação!
    Conseguí colocar o "curtir" na primeira.
    Parabéns!

    Paulo Cesar disse...
    23 de fevereiro de 2012 19:56 #

    Alguem ai pode me ajudar tenho uma fanpage no facebook www.facebook.com/Osinuteis (aproveita e curti la galera) enfim to querendo adicionar o botao : "Recomende aos seus amigos" na pagina de fans no facebook, alguem ai sabe como fazer isso se puderem me ajudar me manda um email como fazer isso ok , (paulocesar019@hotmail.com)
    agradesco a todos.

    Alessandro disse...
    22 de março de 2012 08:39 #

    Como mudar a cor do texto?

    Fernando Sousa disse...
    25 de março de 2012 19:41 #

    Otima dica, ficou show no meu blog.

    http://dicasappinventor.blogspot.com.br/

    E. Souza disse...
    11 de abril de 2012 21:52 #

    Não deu no meu... nao aparece nada.... =/
    Alguem pode me ajudar?

    Miss. Benayne M. S. Souza disse...
    11 de maio de 2012 11:57 #

    ÓTIMO, ÓTIMO, ÓTIMO! MUITÍSSIMO OBRIGADA! SÓ AQUI CONSEGUIR, DICAS PRÁTICAS QUE DÃO CERTO!

    Miss. Benayne M. S. Souza disse...
    11 de maio de 2012 12:18 #

    Uma pergunta: como faço para divulgar a uma página do facebook no meu blogue?? com imagem e tudo?'

    Tardelli Pires disse...
    16 de maio de 2012 01:29 #

    otimo tutorial, so que fiquei com uma duvida, queria saber se tem como tirar a frase "Seja o primeiro de seus amigos a recomendar isso" que aparece depois do botão de recomendar

    Paulinho disse...
    17 de maio de 2012 23:08 #

    Boa noite, eu não achei essa seção onde tem editar HTML. Sou novo em blogs. Você poderia me ajudar? Obrigado.

    JuniinhoO PB disse...
    26 de julho de 2012 11:26 #

    Muito bom !
    Procurei em vários sites mais não dava certo no meu !
    Mais agora encontrei um site bom !
    Vllw ! :D

    Douglas Feer disse...
    2 de outubro de 2012 15:27 #

    Quero deixar só o botão, não quero que tenha esse texto "seja o primeiro a curtir.." etc. como faço isso?

    Blog by Loira Dobem divulgação e assessoria virtual disse...
    11 de outubro de 2012 02:05 #

    Vcs são o "bixo"..de bom devo ter ido aos 30 sites antes de vcs, nenhum recupero meus curtis de antigamente, vcs sim.. Muito Obrigada, por compartilhar seu conhecimento de fato.
    Abraço faterno vida longa !

    Aline Stechitti disse...
    2 de abril de 2013 12:35 #

    Tá tudo certo, mas fica aparecendo "confirmar". Não tem como tirar isso não?

    Luana disse...
    11 de abril de 2013 16:56 #

    Esse deve ser o décimo tutorial que eu vejo exatamente igual aos outros e como sou perseverante e teimosa, fico tentando porém todas as tentativas sem exito, eu colo o código e salvo e visualizo e nada. O que pode ser?

    Renato Viana Waquim disse...
    13 de abril de 2013 14:15 #
    Piadas Engraçadas disse...
    23 de julho de 2013 16:27 #

    Muito obrigado pelas dicas, consegui inserir em meu blog... forte abraço!

    FeMaSites - Criação de Sites disse...
    23 de julho de 2013 16:28 #

    Show de bola.... valeu!

    Wender disse...
    11 de janeiro de 2014 22:33 #

    muito boa a dica. 2014 rs

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.