Assine nosso Feed

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. Related Posts with Thumbnails


Link desta Pagina

70Comentários:

Baker and Maker disse...

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

ღPat. Rochaღ disse...

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.

Rosiel T.S. disse...

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?

Fabiano Roberto disse...

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

Fabiano Roberto disse...

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

Lucas Ranzan disse...

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.

ღPat. Rochaღ disse...

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

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

Anônimo disse...

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

madame chair disse...

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

Fabiano Roberto disse...

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

Rosiel T.S. disse...

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?

Fabiano Roberto disse...

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

Rosiel T.S. disse...

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?

Lucas Ranzan disse...

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

Fabiano Roberto disse...

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

Ana Paula Wanderley disse...

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

Suellen Lyra disse...

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

Syang Hair disse...

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

Anônimo disse...

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

Fabiano Roberto disse...

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

Foiador disse...

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

Fabiano Roberto disse...

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

Salete Santana disse...

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

Fabiano Roberto disse...

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

Anônimo disse...

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?

Fabiano Roberto disse...

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>

Redes de proteção disse...

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

Emerson disse...

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?

Fabiano Roberto disse...

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>

Emerson disse...

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.

Fabiano Roberto disse...

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

Anônimo disse...

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 ?

Fabiano Roberto disse...

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

Anônimo disse...

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

Fabiano Roberto disse...

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

troque a palavra bottom por top

Anônimo disse...

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

Anônimo disse...

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

дĿΞxдndЯΞ™ disse...

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?

Fabiano Roberto disse...

ok, é bom saber que conseguiu

Edvaldo Corrêa disse...

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

OTALDIDIAMANTEDOBEM disse...

muito bom

Lost4eveR disse...

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!

O Eremita disse...

Como deixar os botões iguais aos seus?

Fabiano Roberto disse...

O Eremita
veja aqui Botões das Redes Sociais na Vertical - Compartilhar Posts

Administrador disse...

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

abraço

Renata Pimenta

Bmviicio | Play Team disse...

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

Fabiano Roberto disse...

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;

Natalia Sousa disse...

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

Fabiano Roberto disse...

aqui está o código que usamos: Botões das Redes Sociais na Vertical - Compartilhar Posts

Anônimo disse...

deu algum problema nao esta funcionandos os botoes de compartilhamentos

Fabiano Roberto disse...

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

Cícera disse...

Muito obrigada pelas dicas!!!

Correia disse...

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


???

Fabiano Roberto disse...

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

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

Ulisses ™ disse...

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!

Fabiano Roberto disse...

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

Edilson Trindade Brandão disse...

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

Jesielle Alves disse...

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

Fabiano Roberto disse...

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.

Oliver_sax disse...

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.

As mina pira*** disse...

muito obrigada teu blog me ajuda muito Saindo do blog

Marcelo Santos disse...

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

Fabiano Roberto disse...

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

Marcelo Santos disse...

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

Fabiano Roberto disse...

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.

Marcelo Santos disse...

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

Marcelo Santos disse...

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!

Fabiano Roberto disse...

que bom que você conseguiu...

Apoio Distribuidores disse...

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

Fabiano Roberto disse...

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

Postar um comentário

Gostou? Compartilhe!