Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508711548
Vida do cache: 1508754748
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Widget

Gadget Like box e twitter Button no final do post

Sabemos a importância da utilização das redes sociais na divulgação do blog. Devemos dar aos nossos leitores as mais variadas formas possíveis de opções para acompanhamento do seu conteúdo publicado.

Pensando nisso, hoje veremos como adicionar um gadget com Like Box da sua página no Facebook, juntamente com o botão “Follow” do Twitter, logo ao final de seus artigos no blogger.

Passo 1: Acesse o painel do Blogger, vá no menu “modelo”, entre na edição HTML do seu template, não precisa marcar a opção “expandir modelos de widgets” e procure pela tag: ]]></b:skin>
e cole o seguinte código logo ACIMA dela:


#fbtwitterbox{
padding:10px; 
margin: 2px 0px 15px 0px;
height:60px;
}
#fblikebox{
float:left; 
border-right:1px dashed #ddd; /*---borda divisória---*/
}
#twitterbox{
margin:15px 0px 0px 0px; 
padding:0px; 
float:right; 
}


No código acima, a linha border-right:1px dashed #ddd; se refere a borda divisória, se quiser, edite ou retire-a, fica a seu critério.

Salve as modificações.

Passo 2: Acesse novamente o painel do Blogger, vá no menu “modelo”, entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure por:


<div class='post-footer-line post-footer-line-1'>


Logo ABAIXO da linha que você localizou, cole o seguinte código:


<div id='fbtwitterbox'>
<div id='fblikebox'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOME-DA-SUA-PAGINA&amp;width=200&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true' style='border:none; overflow:hidden; width:200px; height:82px;'/>
</div>
<div id='twitterbox'><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=USERNAME-TWITTER&amp;show_count=true&amp;show_screen_name=true&amp;size=l' style='width: 310px; height: 32px;' title='Twitter Follow Button'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div><br/><!-- FIM fbtwitterbox-->

O código acima está projetado para que o gadget apareça no final dos post da página inicial e de todas as demais páginas.
Caso queira que apareça somente nas páginas internas, ao invés de usar o código acima, use este a seguir:


<b:if cond='data:blog.pageType == "item"'>
<div id='fbtwitterbox'>
<div id='fblikebox'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FNOME-DA-SUA-PAGINA&amp;width=200&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true' style='border:none; overflow:hidden; width:200px; height:82px;'/>
</div>
<div id='twitterbox'><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=USERNAME-TWITTER&amp;show_count=true&amp;show_screen_name=true&amp;size=l' style='width: 310px; height: 32px;' title='Twitter Follow Button'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
</b:if>
<br/><!-- FIM fbtwitterbox-->

Não esqueça:
No campo destacado em amarelo, substitua NOME-DA-SUA-PAGINA pelo nome que aparece na url da sua página (é aquele que aparece logo após o "facebook.com/" )
No campo destacado em laranja, substitua USERNAME-TWITTER pelo seu nome de usuário do twitter.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

30 Comentários

  1. lu disse:

    Infelizmente no meu não existe este código:
    Expandi tudo, mas o código n existe o que eu faço?

  2. Olá Vanessa eu fiz como está no tutorial e só está mostrando a parte do facebook, a parte do twitter não mostra :c o que será? abraços e parabéns pelo blog =)

  3. Dani disse:

    Fiz tudo certinho, mas no final das postagens fica só um espaço de uns 7cm em branco com um tracejado cinza claro… qual o problema?

    • Vanessa disse:

      Vc deve ter feito algo errado, ou pode ser algo relacionado ao seu template. Lamento,mas não há como eu saber o que ocorreu.

  4. David disse:

    Como falo para colocar os botões logo abaixo do titulo da postagem?

  5. Oi! Aparecem muitos problemas, e todos relacionados à tags que não estão fechadas. Tem como ver, por favor?
    Amei o blog, parabens! *-*

    • Vanessa disse:

      Já corrigi. Era a tag de fechamento da condicional para aparecer somente nas páginas internas que estava faltando.

  6. Carol Santos disse:

    Estou tentando colocar aURL da minha pagina e nao da aparece este erro na pagina: Could not retrieve the specified page. Please verify correct href was passed in.
    ME ajude o do Twitter deu certo
    OBRIGADO

  7. Olá Vanessa , muito obrigado , isso irá me ajudar muito .
    Só vim comentar para agradecer mesmo , pois sei o quanto cada comentário é importante . =)

  8. Filipi Junio disse:

    O código para páginas internas não está funcionando pq falta fechar

  9. SamantaSammy disse:

    Olá!! tentei novamente depois que vi sua resposta a um comentário dizendo que tinha atualizado o código e deu tudo certo ! Já estou usando e adorei, obrigada :)
    Beijosssss

  10. Ananda Maciel disse:

    me socorre, segui todos os passos e salvei, mas não fiz isso:

    “No campo destacado em amarelo, substitua NOME-DA-SUA-PAGINA pelo nome que aparece na url da sua página (é aquele que aparece logo após o “facebook.com/” )
    No campo destacado em laranja, substitua USERNAME-TWITTER pelo seu nome de usuário do twitter”.

    eu salvei já, antes nem fiz um backup, agora deu errado e fica aparecendo um quadradinho de error no meu blog :( o que eu faço pra corrigir? me ajude por favor.

    • Vanessa disse:

      É só vc voltar no html do seu template, procurar o código que vc incluiu e substituir nome da sua página e username do twitter, conforme as orientações.

      • Ananda Maciel disse:

        ei flor, muito obrigada. sabe por que eu não tava achando? por que não cliquei na caixinha “expandir modelos de widgets” rsrs bom, encontrei o código e já ajeitei! obrigada, novamente.

  11. Thiane Valdez disse:

    “Erro ao analisar XML, linha 959, coluna 114: The reference to entity “width” must end with the ‘;’ delimiter.”
    É o que aparece quando eu colo o código, acho que tem algum erro, poderias verificar? Obrigada, adoro o teu blog. Beijos

    • Vanessa disse:

      Eu dei uma olhada no código e notei que realmente estava com um errinho…mas já corrigi, pode tentar usar de novo 😉

  12. jackson disse:

    gostaria de saber como fasso para colocar quando os visitantes entrarem no blog abrir a caixinha no centro da tela a opção curtir

  13. J.Menezes disse:

    Olá amiga, a postagem de (Inserir anúncios do Adsense dentro dos posts no Blogger) é a melhor e mais descomplicada q conheço, mas NÃO ESTÁ ABRINDO.

  14. Gisele Santos disse:

    Eu adorei a dica, mais fiz 2 vezes todos os passos certinho e não deu certo ;/
    Só aparece: “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The reference to entity “width” must end with the ‘;’ delimiter.

    Error 500″

    Mais tudo bem…

  15. Muito boa a sua dica, adorei fica muito bem, obrigada.

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.