quinta-feira, 31 de maio de 2012
Barra flutuante de Redes Sociais nos posts (Blogger)
A pedidos de alguns de nossos leitores que possuem blogs no serviço Blogger (Blogspot), neste tutorial vou ensinar a como instalar um gadget flutuante de compartilhamento dentro dos posts.
Fornecerei a opção para três gadgets diferentes. Os gadgets são similar a esses da figura abaixo, cujos movimentam-se juntos ao scroll da página. Eles oferecem os botões dos principais serviços da atualidade: Facebook (Curtir e Compartilhar), Twitter, Google+, LinkedIn e Pinterest.
Veja a imagem abaixo, escolha o que mais lhe agrada e siga as instruções de instalação dele no tutorial.
Gadget Flutuante com Contador no Blogger
1ª Parte - Backup
Primeiramente, efetue login em seu blog e faça um backup completo do seu template no caso de algo sair errado.
Vá em Modelo e depois clique em Fazer backup/Restaurar (na parte superior direita). Após isso, clique no botão Fazer download do modelo completo.
2ª Parte - Adicionando o Código
1. Agora, nesta mesma página, clique em Editar HTML > Prosseguir e marque a opção "Expandir modelos de widgets"
2. Dentro do template, pressione as teclas Ctrl + F do teclado e procure pelo seguinte código: <b:includable id='post' var='post'>. [CLIQUE AQUI para copiar]
3. Exatamente ABAIXO (depois) do código pesquisado acima, cole TODO o código do modelo do gadget de sua preferência.
MODELO SIMPLES
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-80px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title='Compartilhe com seus amigos'>
<div class='sbutton' id='gb'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/></div>
<div class='sbutton' id='rt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='sbutton' id='gplusone'><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div></div>
</b:if></b:if>See the Pen yqFnI by matttttttttt (@marcelost) on CodePen
MODELO ADDTHIS
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_button_linkedin_counter" li:counter="top"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</b:if></b:if>See the Pen cAfjm by Seu Tutorial (@marcelost) on CodePen
MODELO ST
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-105px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fafafa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title='Compartilhe com seus amigos'>
<div class='sbutton' id='gb'><script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/></div>
<div class='sbutton' id='rt'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='sbutton' id='pinit'><script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/><a data-pin-color='red' data-pin-do='buttonBookmark' data-pin-height='28' href='//www.pinterest.com/pin/create/button/'><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png'/></a></div>
<div class='sbutton' id='gplusone'><div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<script type="text/javascript">
window.___gcfg = {lang: 'pt-BR'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
<div class='sbutton' id='fbshare'><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-share-button" data-width="48" data-type="box_count"></div></div>
</div>
</b:if></b:if>See the Pen ngqaL by Seu Tutorial (@marcelost) on CodePen
Nota: O gadget não aparecerá na homepage do seu blog/site, apenas nos posts individuais. Se você quiser que ele apareça em qualquer parte do blog, basta remover as duas primeiras linhas e a última do código acima.
4. Visualize e veja se está tudo ok. Se estiver, salve a alteração e pronto.
3ª Parte - Personalizando
Você pode alterar o lado onde o gadget ficará (esquerdo ou direito), o background, borda e a distância entre o campo de postagem. Para isso, iremos modificar apenas as áreas equivalentes a estas partes no container.
- Escolhendo o lado dos modelos simples e ST
Na quarta linha do código, repare nas partes destacadas em vermelho a seguir:
#pageshare {position:fixed; bottom:15%; margin-left:-80px; float:left;
Coloque 'right' para deixá-lo na direita.
Mantenha 'left' para fixá-lo à esquerda mesmo.
- Escolhendo o lado do modelo AddThis
Altere a parte em vermelho abaixo no código colocando 'right' no lugar de 'left'.
left:50px;top:50px;
- Alterando o fundo (background) e Borda
Na quarta linha do código mesmo, modifique o valor HTML do código destacado abaixo para definir a cor de fundo do gadget.
background-color:#fafafa;
Confira a tabela de cores HTML nesta página.
Nesta mesma linha, altere o nome em destaque da parte abaixo pelo código HTML da cor da borda que deseja.
border: 1px solid black;
Troque apenas o 'black' pelo código da cor.
- Configurando a distância
Você pode colocar o gadget bem próximo ao post (padrão), dentro do post (não recomendável), colado na borda da tela ou em qualquer local que achar melhor.
No modelo simples, altere o valor -80px da parte "margin-left: -80px", em:
#pageshare {position:fixed; bottom:15%; margin-left:-80px;
Quando aumenta o valor, o gadget tende a ficar mais distante do post.
Quando diminui o valor, o gadget ficará cada vez mais próximo do post.
No modelo AddThis, altere o valor 50px da parte "left:50px;top:50px;".
Quando aumenta o valor, o gadget tende a ficar mais próximo do post.
Quando diminui o valor, o gadget ficará cada vez mais distante do post.
No modelo ST, altere o valor -105px da parte "margin-left: -105px".
Dúvidas ou problemas? É só comentar!
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Não consegui :-(
ResponderExcluirObrigado Marcelo, no meu funcionou perfeitamente, show de bola. Agora só vou dar uma customizada nele pra deixar com a cara do meu blog hehe.
ResponderExcluirSó uma dúvida, aquele botão de compartilhar do Facebook não tem como colocar? Eu usava um na minha sidebar e achava bem legal...
Mais uma vez obrigado e parabéns pelo post. Sempre ajudando a quem solicita ajuda.
Abraçuuu
Natanael, estranho, acabei de acessar seu blog e encontrei o gadget lá!
ResponderExcluirhttp://familiaunidacristo.blogspot.com.br/
Basta abrir um post e o verá logo na parte esquerda flutuando.
Abraços
Juliano, valeu pelo comentário.
Quanto ao botão "Compartilhar" tem como adicionar ao gadget sim, inclusive, estava adicionado. Porém, por causa de uma incompatibilidade com os códigos do botão "Curtir" ele não estava sendo exibido no Firefox e IE.
Assim que eu corrigir a incompatibilidade insiro uma exceção deste botão no post, ok?
Abraços
Aiin q tudo, fiz no meu e funcionou direitinho.
ResponderExcluirEle até ja conta automaticamente os compartilhamentos q foram feitos e mostra no botão.
Aaammeeeeeiii, o meu ta rosa hihihihi
Bjão
Obrigado cara..funfou lindo aqui.
ResponderExcluirT+
Cara Marcelo, esse gadget funfou 1000% em meus 3 blogs velho. Thank you very very very much.
ResponderExcluirAbrasss
Pararam de atualizar? Agora que descobri o site? Atualiza ai... seu trabalho é muito bom!
ResponderExcluirOlá Erilson, agradeço sua visita e comentário. Fico muito feliz que esteja gostando do conteúdo do site.
ResponderExcluirCom a correria do dia-a-dia às vezes o tempo aperta. Mas logo estarei publicando novos artigos.
Abraços meu amigo
Funfando magnificamente aqui brother.
ResponderExcluirMuito obrigado meeeeesmo!
Marcelo, fiz no meu blog e ficou perfeito camarada. Valeu mesmo.
ResponderExcluirPS: se puder add o Pinterest na barra me avise =). Sera que tem como?
Abração brow
Lucas, você praticamente leu meu pensamento, rsrs. Eu já estou providenciando a adição do Pinterest e do botão Compartilhar do Facebook. Porém, quando soluciono um problema surge outro, então, aos poucos eu deixo certinho, divulgo e atualizo o artigo.
ResponderExcluirGrande abraço
Isso só funciona no blogger ou blogspot? No wordpress não dá certo?
ResponderExcluirOlá Thamyres, o tutorial só se aplica ao Blogger mesmo.
ResponderExcluirAbração
AI SIM MAN VLW FICO DO GEITO QUE EU QUERIA.....VC PODERIA ME ENSINAR A COMO ADICIONA VISITANTES ONLINE NESSA BARRINHA OU COLOCA UMA DO LADO DIREITO SÓ COM O CONTADOR DE VISITANDES ONLINE POR FAVOR MAN E PROCUREI MUITO MAIS NÃO ACHEI AGRADEÇO DESDE JÁ ^^
ResponderExcluirParabéns. Coloquei no meu blog ( www.blogdoronilson.com ) e ficou ótimo.
ResponderExcluirParabens .... tbm coloquei isso no meu blog ( http://sucessoaoextremo.blogspot.com.br/ ) esta funcionando perfeitamente !
ResponderExcluirPerfeito. Eu tava usando uma barra cedida pelo site Ferramentas Blog, mas não curtia ele porque a movimentação do gadget deles é muito ruim.
ResponderExcluirEssa do site Seu Tutorial é beeeem melhor.
Obrigado
OBGADA... VC EXPLICA MT BEM...
ResponderExcluirMuito obrigado Marcelo!
ResponderExcluirFicou perfeito. Deu outro visual ao Blog(poesiagalvaneana.blogspot.com)
Um forte abraço!
Emanuel Galvão
Ola, parabens, o meu esta com problema no botão curtir, não funfa, mais os outros funcionando perfeitamente.
ResponderExcluirOlá,
ExcluirPode ser que esteja havendo uma incompatibilidade com os demais gadgets do Facebook que você possui em seu blog (como aquela barra superior ou a fan page, talvez).
No entanto, em meu blog de testes eu uso vários gadgets também, mas a barra flutuante (incluindo o botão Curtir) funciona normalmente. Aliás, pode observar nos blogs dos amigos que comentaram antes. A barra está funcionando normalmente em todos.
Adorei, muito bom, mas gostaria de saber uma coisa. como remover o gadget? É que eu esqueci de fazer o backup do modelo :(
ResponderExcluirplz me ajuda
Lucas, basta ir até os locais em que você adicionou os códigos e removê-los manualmente.
ExcluirÓtimo widget Marcelo. Funcionando perfeitamente em meu site =)
ResponderExcluirBeijão
Maria Luiza
Já utilizei o código daqui e do ferramentas blog, mas com os dois um problema está ocorrendo: quando clica no curtir, a postagem não aparece na página de quem curtiu. O que será que pode estar acontecendo?
ResponderExcluirPor favor, estou há dias tentando descobrir qual o problema do meu blog, pq as páginas curtidas não vão para o facebook. Se alguém souber me responder, agradeço mto!
Acabei de testar aqui, e a publicação curtida foi postada no perfil do Facebook normalmente.
ExcluirSe isso está ocorrendo com ambos os gadgets, talvez não seja problema com os gadgets em si. Pois se fosse algo errado com eles, isso estaria acontecendo com todo mundo.
Então, notei isso. É algum problema com meu blog. Mas não faço ideia do que pode ser.
ExcluirAtualmente implantei o sistema de comentários pelo blogger e facebook que vi no Dicas para Blogs. O único problema era com o JQuery, mas acho que resolvi. Agora não sei pq as postagens curtidas não aparecem de jeito nenhum no facebook.
Se vc tiver alguma ideia, ou mais alguém...me informem, por favor. Estou precisando mto de arrumar isso o quanto antes.
Olha, coincidentemente, na época em que resolvi implantar este recurso de comentários (Blogger/Facebook) aqui, o antigo gadget flutuante que eu usava deu problemas que, inclusive, afetou o próprio recurso.
ExcluirÉ apenas uma suposição, ok? Mas, talvez, pode estar havendo um conflito qualquer dos códigos do Facebook dos comentários com os do gadget flutuante. Aliás, já fui 'privado' de muitas coisas por conflitos entre os códigos do Face. Porém, como eu disse anteriormente, é apenas uma suposição!
Sugestão prática: se você fez backup do seu template antes de implantar o recurso de comentários Blogger/Face, restaure-o e instale o gadget flutuante. Após isso observe se o problema ocorrerá ainda assim. Caso não saiba como fazer o backup, eis um tutorial abaixo.
http://www.seututorial.com/2011/10/como-fazer-backup-completo-do-seu-blog.html
Acabei de tentar sem o recurso de comentários e mesmo assim, nada.
ExcluirUtilizei duas contas do facebook, curti os posts do meu blog e não aparece na minha timeline e nem nas atividades recentes. Quando tento o mesmo em outros blogs (até tentei com esse) funcionou perfeitamente.
Já testei esse e outros gadgets de like (fixos dentro dos posts) e nenhum deles funcionou. Curto a página e nada aparece no facebook. Antigamente funcionava, agora não funciona mais... Meu layout é cheio de frescuras, talvez estou copiando o código em um lugar errado, não sei.
Agradeço mto a atenção. Se vc descobrir algo, por favor, me informe. Mto obrigada mesmo!
Aqui o lonk do meu blog: http://www.vaiassistindoterror.com/
Email: vaiassistindoterror@gmail.com
Continuarei tentando resolver o problema. Se eu descobrir, comentarei aqui.
Dei uma olhada em seu blog e curti um dos posts lá, e realmente a publicação não aparece no Face. Mas quando eu curti o post, o gadget ficou todo bugado, expandido em forma quadrangular à direita.
ExcluirVou dar uma olhada direitinho no código-fonte do seu blog, e ver se encontro algo que possa estar provocando isso. Porém, como está utilizando o gadget do Ferramentas Blog, acho que seria mais viável perguntar para o autor que postou esse gadget lá.
De qualquer maneira, ajudarei no que for possível e, caso encontre uma solução, peço que não hesite em me informar aqui.
Muito obrigada pela atenção Marcelo!
ExcluirEntão, testei o gadget daqui também e o mesmo bug ocorreu.
Tentei outros tipos de gadgets, aqueles que o botão fica no post mesmo e não adiantou, não aparece no facebook.
(já perguntei no Ferramentas Blog, mas não me responderam).
Nem Testei + TOMARA QUE FUNCIONE JÁ VI ALGUNS POSTS + NÃO AJUDARAM ESSE TOMARA QUE ME AJUDE VISITEM MEU Blog : http://meu-windows-7.blogspot.com.br/
ResponderExcluiro blog ta bom demais em,eu vou até recomenda para todos meus amigos pq é muito bom,da até gosto de ver,como estou recomendando o www.rastreamentodecelular.org que estou usando na minha empresa de www.detetive-particular.com que é muito bom tambem,nossa parabéns,to acompanhando teu blog,e vou recomendar,abraços
ResponderExcluirValeu, Luigi.
ExcluirFico feliz que tenha gostado e agradeço antecipadamente a divulgação. Obrigado mesmo.
Sucesso com a empresa e com o site!
Grande abraço
Rapaz, primeiramente, meus parabéns! São poucas as pessoas que dão tanta assistência assim ás dúvidas dos leitores, até entendo alguns, pois são muitas mensagens, e você, realmente, é super atencioso com todos os leitores. Esse tipo de consultoria que você dá nem mesmo pagando seria possível achar. Novamente, meus parabéns.
ResponderExcluirOlá Diego,
ExcluirAntes de mais nada, agradeço imensamente seu comentário. Acho que a atenção é primordial em qualquer ocasião. Sempre que está a minha capacidade, tento ajudar da melhor forma possível.
Obrigado mais uma vez e sinta-se sempre em casa aqui!
Abraços e ótima semana, Diego!
Parabéns! Funcionou perfeitamente.
ResponderExcluirFuncionou maravilhosamente bem.
ResponderExcluirMuito obrigada =)
Muito Obrigado. Ficou 10 meu Blog !!! Abraços...
ResponderExcluirOLÁ AMIGO, OBRIGADO PELA AJUDA.
ResponderExcluirGOSTARIA DE SABER COMO EU COLOCO ESTE GADGET MAIS PARA CIMA.
ABRAÇO!
Modifique o valor de "bottom", no começo do script. O valor está 15%. Aumentando o valor, o gadget tende a ficar mais para cima da página.
ExcluirParabéns, funcionou perfeitamente belo trabalho.
ResponderExcluirParabéns foi a unica barra que achei que funciona em todoas as resoluções.
ResponderExcluirvalew pela dica,.......... na verdade eu kiria msm era tirar a barra do meu blog,.... fiz o contrario
ResponderExcluirrsrs
O meu ficou muito bom,coloquei borda 0 e ficou parecendo ser parte do post. muito bom esse tutorial, o melhor que encontrei, para esse tipo de barra lateral flutuante..
ResponderExcluirhttp://dinheiroaganharonline.blogspot.com.br
Perfeito Marcelo. Esse modelo ST é sensacional.
ResponderExcluirEra o que eu queria há mto tempo e só achei no seu site.
Abraço
Excelente msm. Ñ tava conseguindo add outros botões no do addthis pelo site deles..e seu tutorial foi certinho nos botões q eu queria.
ResponderExcluirOi Marcelo tdo bem?
ResponderExcluirEu coloquei em meu weblog o MODELO ST e deu tdo certinho. Mas o único problema é o botão do Pinterest que não tem contador.
Vc pode me ajudar por favor?
Obrigada e Feliz Ano Novo a todos! =]
Kelly
Olá Kelly,
ExcluirIsso não é problema com o gadget, mas sim com o Javascript que o Pinterest fornece mesmo. Aliás, nem é um problema.
O contador só aparece quando alguém compartilhe algo clicando nele. Ele não mostra "0" no contador. Aparece somente a partir do "1".
Abraços e Feliz Ano Novo para você e sua família!
Olá Marcelo!
ResponderExcluirMuito bom seu post, contudo tive um problema ao adicionar a barra flutuante em meu blog. O modelo que escolhi foi o AddThis, e o fundo (branco) ficou menor do que os botões. Não sei como corrir... se quiser dar uma conferida: http://coisaepensamento.blogspot.com.br/
Grato,
Jonathan
Olá Jonathan,
ExcluirPor algum motivo desconhecido, a largura de sua barra foi automaticamente configurado em 60px (pelo que analisei em seu código). Talvez possa ser esse o motivo do background estar menor.
Basta adicionar uma linha "width" no código.
Veja se o código a seguir resolve:
http://pastebin.com/raw.php?i=J2UjrhVR
Onde está "width: 100px" é a largura do gadget. Altere para o valor desejado ou se não quiser substituir o código, basta adicionar a respectiva linha no seu código.
Abraços
Mto bom
ResponderExcluirvlw
Valeu brother! Ótimo trabalho!!!
ResponderExcluirSucesso e muito rock'n roll!!!!
http://www.rocknorio80.blogspot.com.br/
Valeu, Robson. Sucesso e muito rock'n'roll pra você também - afinal é a verdadeira música!
ExcluirAbraços
Obrigado galera! foi o único tutorial útil quando o assunto é botões deste modelo em toda a internet! grande abraço!
ResponderExcluirParabéns pelo excelente post, Marcelo. Me ajudou muito. Acabei de implementar essa barra em meu blog www.euquerobiologia.com.br.
ResponderExcluirShow!
Valeu Guellity. Fico feliz que tenha ajudado.
ExcluirAbraços
Muito obrigado mano. :) resultou perfeitamente...
ResponderExcluirEu gostaria de saber, Como posso colocar ele mais acima. pois ele esta muito abaixo!
ResponderExcluirMaycon, qual das barras você está usando?
ExcluirAs tags Bottom e Top são responsáveis pela distância da parte inferior (bottom) e da parte superior (top). Altere os valores (px) deles para ajustar isso.
Abraços
Não conhecia este seu site de tutoriais, muito bacana tudo aqui, seus tutoriais são realmente muito úteis, parabéns. Estou usando o código disponibilizado por você, ficou excelente, ganhou um novo seguidor :)
ResponderExcluirolá gostei muito do seu post. as 3 barras que vc apresentou sao muito boas, mas eu gostaria de colocar no meu blog uma mais atual tipo essa que vc usa com o link do messenger. ficaria muito grato se vc pudesse compartilhar isso com a gente. :D
ResponderExcluirSensacional, muito obrigado e parabéns pelo trabalho! :)
ResponderExcluirOlá, Marcelo! Muito boa a dica. Como faço para determinar a altura, ou seja, até onde vai pra cima e até onde vai pra baixo? Grato!
ResponderExcluirOlá! A parte superior "top" para mudar a altura não se encontra. Como faz? Já que só a da parte inferior (bottom) aparece... ?
ResponderExcluirtem como diminiuir o tamanho das caixas
ResponderExcluirObg ajudou muito:)
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirExcelente
ResponderExcluirPerfeito! Parabéns pelo tutorial.
ResponderExcluir