Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

Achar as melhores formas de divulgar o blog nas redes sociais é muito importante para todos os blogueiros e neste sentido recebemos vários comentários perguntando sobre como fixar os botões de compartilhamento no canto da pagina como fazemos atualmente aqui no Dicas para Blogs. Então vamos mostrar como deixar os botões das redes sociais sempre em destaque no seu blog.

Na verdade apenas usamos juntas duas coisas já conhecidas dos blogueiros:
Fixar botões no canto da pagina
Botão para as redes sociais - AddThis

Botões de Compartilhamento Fixos no Canto da Pagina

O código para colocar os botões fixos no canto da pagina fica deste jeito:

<div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px">Gostou? Compartilhe !!!<br/>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
</div>


Para colocar no seu blog entre em design, adicionar gadget, html/javascript e cole o código. Não importa a localização do gadget na sua pagina, pois o próprio código posiciona no canto da pagina.

Agora veja algumas alterações você pode fazer para personalizar esse acessório:

Alterar bordas e cor de fundo
background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;
Você só precisa alterar o código da cor FFFFFF (veja aqui Código das Cores) e também o estilo das bordas que você encontra mais detalhado neste tutorial sobre Colocar ou alterar as bordas

Mudar o posicionamento na pagina

bottom:0px; left:0px;
Esse código posiciona o gadget na sua pagina então de trocar bottom por top ele aparece na parte de cima da pagina e mudando a palavra left por right o gadget aparece do lado direito.

Além de usar esse código com o AddThis como mostramos aqui poderia ser com qualquer outro botão de divulgação, por exemplo:

Colocar Botão +1 do Google no Blog
AddInto - Botão das Redes Sociais para Wordpress, Blogger, Firefox e muito mais
Botão Curtir e Enviar do Facebook Juntos

Ou até mesmo um link para assinar seu feed ou Receber atualizações por email (clique no link e receba as atualizações do Dicas para Blogs no seu email). Então o código ficaria assim:

<div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=dicaparablog&amp;loc=pt_BR">Receber atualizações por email</a>
</div>


Claro que usando o link da sua pagina de atualizações por email (veja aqui como fazer para Enviar Atualizações por Email do seu blog) e as alterações de cor de fundo, bordas e posicionamento podem ser feitas da mesma maneira que já citamos acima.

Como já dissemos você pode usar esse código para fixar qualquer coisa no canto da pagina do seu blog, mas recomendamos usar coisas que ocupem pouco espaço já que isso é fixo na pagina se você usar uma imagem muito grande pode atrapalhar a visualização do seu blog.

72 comentários:

  1. Olá, eu gostaria de saber como que eu faço pra colocar data personalizada ao lado do título da postagem, igual a esse blog aqui: www.garotasestupidas.com. Obrigada. Ahh, adorei esse blog, super útil! =)

    ResponderExcluir
  2. Fabiano,

    O blogger está demorando atualizar as minhas postagens, tu sabes porque está acontecendo isso?
    Se eu postar agora, por exemplo, só acontece a atualização um dia depois...ou mais. Me ajude, se puder, tem algo que eu possa fazer?

    Beijo.

    ResponderExcluir
  3. Valeu Fabiano tava mesmo precisando desse botão fixo lembra? Fabiano tenho outra pergunta, sempre que eu visualizo meu blog, fica marcado na estatisca do Blogger e do Google Analytics, como faço pra não marcar mais?

    ResponderExcluir
  4. Baker and Maker
    fiz alguns testes com códigos deste tipo mas deu erro... assim que conseguir um que funcione bem farei um tutorial sobre isso

    ResponderExcluir
  5. ღPat. Rochaღ
    mas é normal em todos os blogs demorar um pouco, as atualizações do feed não são imediatas...

    Rosiel T.S.
    nas estatisticas do blogger tem um link para não contar suas visitas... no analytics ainda não achei...

    ResponderExcluir
  6. Fabiano, vamos ver se consegue me ajudar. Em um blog que estou construindo (wzmultimidia.blogspot.com) eu queria modificar o "Read More" que tem obrigatório em todos os posts por uma frase customizada por mim, mas não encontro o local para modificar no HTML, vê se tem como aê. Obrigado.

    ResponderExcluir
  7. Fabiano,

    Quanto as atualizações nunca foram assim, ao menos para mim em 3 anos de blog...Por isso, perguntei. Elas sempre foram imediatas, mas agradeço igualmente Fabiano.

    Bj

    ************

    ResponderExcluir
  8. Olá
    Tenho um blog da minha loja http://boutiqueunica-crika.blogspot.com e já inclui nele o botão de atalho para o facebook, mas eu queria mudar aquela imagem padrão do face. Já vi em outros blogs imagens diferentes com a descrição facebook e vc clica nela e ela te direciona. Como mudo este layout, Já escolhi a imagem e tenho a o código dela.
    Obrigada
    Cristiane

    ResponderExcluir
  9. meu blog esta com problemas não consigo salvar gadgets de java script/HTML nem consigo salvar gadgets de textos, socorro mim ajuda! meu e-mail é: kevin_gatinho11@hotmail.com

    ResponderExcluir
  10. Anônimo
    imagem do facebook para que? link para sua pagina? se for é só usar uma imagem como faria um banner para qualquer outro site

    Madame chair
    deve ser um erro de carregamento da pagina... tente excluir seu historico de internet...

    ResponderExcluir
  11. Fabiano mas eu ja cliquei nesse link um monte de veses, mesmo assim conta, não tem algum código html que posso usar? eu uso o navegador Google Chrome, não tem nenhum plugin pra não contar?

    ResponderExcluir
  12. no blogger não tem plugin... veja na ajuda do analytics... acho que tem algo para ignorar as suas visitas, mas será para todos os sites, veja aqui: Mudanças no Google Analytics

    ResponderExcluir
  13. Lucas Ranzan
    Eu sei fazer isso, voce só tem que ir em "Design" onde ta escrito "Postagem do blog" voce clica em "Editar" onde ta escrito "Texto do link da página de postagem:" na frente voce coloca o que quiser. era isso que voce pergunto?

    ResponderExcluir
  14. Já tentei, mas esse "Read More" não é aquele, tipo, parece ser um à mais que veio dentro do template, é complicado de explicar. :S

    ResponderExcluir
  15. aqui tem um codigo que faz o resumo da postagem: Fazer Resumo da Postagem com Miniaturas das Imagens

    se achar um igual ao que está no seu template ficará mais facil achar dicas de como editar.

    se não for esse no tutorial tem link para duas outras formas de mostrar o tal resumo

    ResponderExcluir
  16. Fabiano,adorei e ja estou usando no meu blog!!!!
    Obgda meu amigo,vc sempre ajudando e disponivel!!
    Que Deus te abençoe!!

    ResponderExcluir
  17. oi... passando para t avisar q tem selinho pra ti no meu blog, bjoks www.restosdelcorazon.blogspot.com

    ResponderExcluir
  18. Olá gostaria de saber como você coloca o título Dicas Para Blogs enfeitado,você pode nos ensinar?

    ResponderExcluir
  19. tem como colocar mais de 1 botão fixo no MESMO canto da página? tipo um enscima do outro?

    ResponderExcluir
  20. depende do tipo de código que usa, por exemplo esse do addthis tem formatação propria então não é possivel

    mas se for outros pode colocar < p > .. codigo... < / p >
    e ficarão um embaixo do outro

    ResponderExcluir
  21. Fabiano, não tem como esses botoes ficarem só nos posts e não em todas as páginas??

    ResponderExcluir
  22. Foiador

    veja esse outro tutorial: Conteúdo diferente nas paginas do blog

    você pode colocar o código dos botões em um gadget e usar esse tutorial do link acima para mostrar esse gadget somente na pagina das postagens

    ResponderExcluir
  23. Olá,gostaria de saber como coloco meus banners em meu blog,na lateral.Obrigado

    ResponderExcluir
  24. Salete Santana
    na barra lateral?... é só adicionar um gadget

    ResponderExcluir
  25. como fasso para esse código (acessa o link pra ver o código):
    https://docs.google.com/View?id=df9875tg_15fkg8rhhd&pli=1
    aparecer como um botão no canto fixo da minha página?
    O que devo add ou tirar desse código pra que essa gadjet de tradução vire um botão fixo no canto da minha página?

    ResponderExcluir
  26. anonimo, para fixar o tradutor use deste jeito:

    <div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px">código do tradutor aqui</div>

    ResponderExcluir
  27. não tem como esses botoes ficarem só nos posts

    ResponderExcluir
  28. Boa noite Fabiano.
    Primeiramente obrigado pelas inúmeras ajudas.
    E já que vc respondeu estou perturbando novamente.
    Como posicionar esses botões na vertical na lateral do blog?

    ResponderExcluir
  29. Redes de proteção
    veja aqui: Conteúdo diferente nas paginas do blog

    você adiciona esse código dos botões em um gadget e depois usa o tutorial do link acima para fazer esse gadget aparecer só nas postagens.

    Emerson
    na vertical da barra lateral?... quer dizer as imagens uma embaixo da outra?

    fizemos um teste mas as imagens ficaram pequenas, se quiser ver como fica use o código assim:

    <div style="background-color:#FFFFFF; border-right:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; left:0px;padding:2px">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e2088636f7cce31"></script></div>
    </div>

    ResponderExcluir
  30. Obrigado... funcionou certinho.

    O problema com o tamanho eu consegui resolver inserindo o código abaixo antes da terceira linha.
    <(div class="addthis_32x32_style")> SEM OS PARENTESES.

    ResponderExcluir
  31. Emerson
    que legal... vou testar e talvez usar também rsrs

    ResponderExcluir
  32. coloquei o tradutor como botão fixo, mas pq ele fica assim?
    http://warriorspunks.blogspot.com/
    escondido na barra do blogger, eu queria que ficasse bem no canto, alinhado com o botão de baixo, mas na parte de cima. O que eu faço ?

    ResponderExcluir
  33. não achei o código do tradutor no seu blog... mas já tem coisas fixas nos dois cantos... acho que mais uma ficaria demais...

    a barra do blogger tem um código que faz ela ficar sobre tudo que está na sua pagina

    ResponderExcluir
  34. Olá, sou Maria S. e gostaria de saber como coloco esses botões fixos no canto superior direito, como é o código pra ele ficar em cima no cantinho?
    obg desde já ;)

    ResponderExcluir
  35. para ficar no topo da pagina veja esse trecho: position:fixed; bottom:0px; left:0px;

    troque a palavra bottom por top

    ResponderExcluir
  36. Poisé, fiz isso mas não ficou no canto, ficou mais centralizado, não tem como ficar bem no canto da página?

    ResponderExcluir
  37. Agora consegui arrumar:
    http://warriorspunks.blogspot.com/

    ResponderExcluir
  38. Olá fabiano coloquei o código e mudei pra ficar no lado direito, só q agora quero tirá-lo do meu blog mas não consigo. Já fui em editar Html mas o código não aparece pra mim retirar ele. O q faço?

    ResponderExcluir
  39. Valeu Fabiano. Gostei! Já estou usando esta dica.

    ResponderExcluir
  40. Coloquei no meu, ficou otimo, apenas com um porem, ele fica por tras dos banners de publicidade, sempre que rolo a pagina, e um banner fica junto, acaba ficando por cima, voc sabe me dizer por que?Obg pelo post, seu site tem sido um porto seguro, nesse mar turbulento dos blogs!

    ResponderExcluir
  41. Como deixar os botões iguais aos seus?

    ResponderExcluir
  42. milagre eu consegui, só que tá pequeno, mas ficou uma gracinha, valeu fabiano e emerson, vcs são feras...

    abraço

    Renata Pimenta

    ResponderExcluir
  43. tem como colocar uma imagem no fundo desse html sem o fundo próprio com borda ?

    ResponderExcluir
  44. esse é o código do fundo background-color:#FFFFFF; é só trocar por um de imagem de fundo assim:

    background-image: url(endereço da imagem)


    no caso da borda, se quiser pode apagar esse código: border-right:1px solid #000000;border-top:1px solid #000000;

    ResponderExcluir
  45. qual o código certo pra deixar assim como está o seu, na vertical lado direito, incluindo o botão +1

    ResponderExcluir
  46. deu algum problema nao esta funcionandos os botoes de compartilhamentos

    ResponderExcluir
  47. testei e parece tudo normal... talvez seja alguma falha na conexão... ou no site, mas foi momentaneo...

    ResponderExcluir
  48. OLá mas onde coloco o seguinte codigo?
    bottom:0px; left:0px;


    ???

    ResponderExcluir
  49. @Correia esse código é para usar em um gadget de html/javascript

    mas é o código completo do jeito que está aqui:

    ResponderExcluir
  50. Olá, Fabiano! Adorei sua dicas e até coloquei esses botões do AddThis só que estou tendo problemas em posiciona-los. Você Pode me ajudar?
    Eu tentei enviar o código que eu tinha para você ver o que eu possa estar fazendo de errado mas não consegui. Meu blog é: http://ulissestmmusic.blogspot.com/
    ainda estou arrumando ele para depois começar a postar. Se puder me contactar por e-mail será melhor para mim, se não for incômodo. tenchi_ulisses@yahoo.com.br
    Muito obrigado!

    ResponderExcluir
  51. o posicionamento é neste trecho
    bottom:0px; left:0px;

    pode trocar left por right para trocar o lado ou usar top em vez de bottom para deixar no topo da pagina

    ResponderExcluir
  52. olha tenho uma dúvida cruel...
    eu tenho um blog que tinha um antigo formato, no quel eu estava acostumado a manusear
    mas meu sobrinho que entendi um pouco mais que eu
    pediu pra dar uma melhorada
    ai colocou um formato que
    eu achei melhor
    mas algumas funções eu não sei como fazer funcionar
    ai ficou dificil
    tipo...
    queria saber como fazer pra colocar no finzinha da pagina uma seta pra ir pra próxima pagina...
    por que algumas materias estão se perdendo por que , por não da pra ser msotrada não tem como ser achada
    tem solução pro meu caso?
    por favor responda-me nesse endereço
    edilson_trindadebrandao@hotmail.com
    des de ja agradeço e estou divulgando seu blog que achei show...
    abraços ai

    ResponderExcluir
  53. Oi, gostei muito da dica, deu certinho! Só queria saber como faço pra colocar o 'balãozinho' com números ao lado dos outros botões, e não em baixo como está?

    ResponderExcluir
  54. Jesielle Alves
    esse código já está certo para o botões ficarem lado a lado, mas se quiser veja aqui Botões das Redes Sociais na Vertical - Compartilhar Posts para ficar igual ao que usamos atualmente.

    ResponderExcluir
  55. Fiz uma Correção no Codigo vertical do Emerson acho que ficou bom!!!
    Espero que gostem!!!

    se alguem se interessar visite meu blog e deixe seu email que envio!!!
    VLW.

    ResponderExcluir
  56. muito obrigada teu blog me ajuda muito Saindo do blog

    ResponderExcluir
  57. Fabiano, bom dia preciso de socorro urgente!!!!

    Ha algum tempo eu coloquei esse código no meu blog, deu tudo certo, muito bom!

    Mas com as modificações do blog eu o achei dispensável, e também eu percebi que os buto~es fazem voltar ao site e n compartilham... Pois bem, quero retirar do blog E NÃO CONSIGO!!!!!!!!!!!!
    Não acho o código html nos gadgets e ja tentei vairias coisas e não consegui!

    me ajuda por favor!!!!

    BLOG: http://www.blogmarcelosantos.com

    ResponderExcluir
  58. Marcelo Santos o código está em um gadget de html/javascript do seu blog abaixo do cabeçalho...

    entre na pagina layout e testes os gadgets

    ResponderExcluir
  59. Fabiano, ja olhei os gadgets e nada.... não acho!
    :'(

    ResponderExcluir
  60. tentou entre na pagina editar html e marcar a opção de expandir os modelos de widgets?

    infelizmente sem achar os códigos não tem como retirar os botões.

    ResponderExcluir
  61. Fabiano ja tentei sim.. mas quando busco o codigo do gadget no html expandido nada ocorre... se a caixa ta aparecendo esse codigo ta infurnado em algum lugar..rsrsrs
    alguma dica???

    ResponderExcluir
  62. CARA EU CONSEGUI!!!! \O/\O/\O/
    SAI CATANDO O CODIGO PRA VER ONDE TAVA O ERRO E ACHEI!!!
    DEMOROU 45 MIN MAS DEU!
    :-P
    VALEU! PARABENS PELO BLOG!

    ResponderExcluir
  63. GOSTARIA DE SABE SE EXISTE ALGUM CODIGO OU SCRIPT QUE EU POSSA COMPARTILHAR VARIAS COISAS OU LINKS DIFERENTES AO MESMO TEMPO DE UM SITE EXTERNO COM APENAS UM CLICK DENTRO DO FACEBOOK

    ResponderExcluir
  64. não tenho código para compartilhar varias paginas num clique apenas.

    mas acho que isso faria seu site perder credibilidade ou sofrer alguma punição pois seria uma maneira de enganar ou forçar as pessoas a compartilhar mais paginas do que elas querem de verdade

    ResponderExcluir
  65. Olá Fabiano!...Adoro esse seu site, usei para criar várias coisas legais no meu blog de receitas, até adicinei juntos aos sites que curto, olha lá!...Preciso de sua ajuda, coloquei o botão de compartilhamento na horizontal, mas gostaria de trocar por vertical, mas não sei como fazer, você pode me ajudar?...Um abraço e boa noite!...Meu blog é: http://cozinhadaniva.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. no site do addthis.com você pode pegar o código para colocar os botões na vertical, veja aqui: https://www.addthis.com/get/sharing

      Excluir