Widget Vanessa S.
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&width=200&height=62&colorscheme=light&show_faces=false&border_color&stream=false&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#_&id=twitter-widget-0&lang=en&screen_name=USERNAME-TWITTER&show_count=true&show_screen_name=true&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&width=200&height=62&colorscheme=light&show_faces=false&border_color&stream=false&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#_&id=twitter-widget-0&lang=en&screen_name=USERNAME-TWITTER&show_count=true&show_screen_name=true&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.
Infelizmente no meu não existe este código:
Expandi tudo, mas o código n existe o que eu faço?
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 =)
Vc verificou se incluiu os dados do twitter corretamente?
Eu tinha digitado uma letra errada, refiz tudinho novamente e deu certo, obrigado rsrsrsr 🙂
Que bom que deu certo! 🙂
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?
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.
Como falo para colocar os botões logo abaixo do titulo da postagem?
Oi! Aparecem muitos problemas, e todos relacionados à tags que não estão fechadas. Tem como ver, por favor?
Amei o blog, parabens! *-*
Já corrigi. Era a tag de fechamento da condicional para aparecer somente nas páginas internas que estava faltando.
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
Pode ser algo relacionado ao gadget do facebook. Não tenho como saber.
Olá Vanessa , muito obrigado , isso irá me ajudar muito .
Só vim comentar para agradecer mesmo , pois sei o quanto cada comentário é importante . =)
Eu que agradeço pela presença. 🙂
O código para páginas internas não está funcionando pq falta fechar
Obrigada por avisar, acabei de incluir a tag de fechamento.
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
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.
É 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.
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.
“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
Eu dei uma olhada no código e notei que realmente estava com um errinho…mas já corrigi, pode tentar usar de novo 😉
gostaria de saber como fasso para colocar quando os visitantes entrarem no blog abrir a caixinha no centro da tela a opção curtir
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.
Pra mim abriu normal:
Inserir anúncios do Adsense dentro dos posts no Blogger
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…
Comigo também !
Infelizmente o meu também, vou continuar tentando 🙂
Obrigada pelas dicas, espero conseguir, pois gostei muito ! Beijossss
A mim também aparece a mesma mensagem de erro no blog de teste
Muito boa a sua dica, adorei fica muito bem, obrigada.