Box flutuante animado com Tweet, Curtir, +1 e Addthis

As redes sociais estão cada vez mais dispostas a ajudar a nós blogueiros. O que devemos fazer é simplesmente instalar nossos blogs nessas redes sociais, como o Facebook e o Twitter. E para isso, existem os gadgets que fazem isso. Os mais eficientes que podemos citar hoje são o Tweet (do Twitter), o Like (do Facebook), o +1 (lançado a pouco tempo pela Google) e o Addthis (esse incrível botão reúne várias formas de compartilhamento). Nesse artigo você vai ver como adicionar um gadget flutuante animado que reúne todos esses 4 botões.

Esse gadget anteriormente só podia ser usado em blogs da plataforma WordPress.org. Até então que blogueiro Claudio Sanches o adaptou para o Blogger, além de ainda  adicionar o botão do Addthis e complementar esse gadget.

Se você notar o exemplo, esse box flutua de forma animada enquanto rolamos a página do blog.

Como instalar?

Para instalar, basta ir em “Editar HTML” do blog e fazer uma cópia de segurançapara prevenir seu blog. Depois, marque a caixinha “Expandir modelos de widgets”.

Encontre a linha e logo ANTES dela, cole o código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() { var offset = $("#fblog-box").offset(); var topPadding = 60; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#fblog-box").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#fblog-box").stop().animate({ marginTop: 0 }); }; }); }); </script> <br /> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'pt-BR'} </script> <br /> <style type='text/css'> #floating-fblog {width:60px;} #fblog-box {border:1px solid #ccc; padding:5px; background:#fff; z-index:9999; display:block; position:absolute; top:200px; float:left; margin:0 0 0 -100px; text-align:center;} #fblog-box div {margin:0 0 5px;} </style>

Não importa o lugar no seu layout que esse gadget ficará posicionado ele sempre aparecerá na posição que você configurar.

Veja como editar e escolher a posição dos botões flutuantes das redes sociais no seu blog:

position:fixed; bottom:20%; margin-left:-98px: posicionamento da caixa, então altere a altura na pagina 20% e o posicionamento horizontal modificando o valor -98px, aqui note que o valor é negativo ou seja o sinal de menos faz parte do posicionamento.

float:left: lado que aparece a caixa

width:60px: largura da caixa

padding: 5px: margem entre as bordas da caixa e os botões

background-color:#ffffdf: cor de fundo da caixa de botões de compartilhamento, veja o código das cores.

border:1px solid #000;border-right:none: neste trecho retiramos um lado da borda para parece que a caixa com os botões flutuantes fazem parte do nosso layout.

Depois de colado o código anterior, procure pela linha: e adicione o seguinte código logo ANTES:

<br /> <script src='http://connect.facebook.net/pt_BR/all.js#appId=102576646508501&xfbml=1' type='text/javascript'/>

Faça uma nova busca e encontre a linha: 

 e cole logo DEPOIS, o seguinte código:

<b:if cond='data:blog.pageType == "item"'> <br /> <div id='floating-fblog'><div id='fblog-box'><div><a class='twitter-share-button' data-count='vertical' data-related='ferramentasblog:Aprende como criar um Blog - Blogger ou WordPress [ Ferramentas Blog ]' data-via='ferramentasblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></div><div><g:plusone size='tall'/></div><div><div id='fb-root'/><fb:like expr:href='data:post.url' font='arial' layout='box_count' send='true' show_faces='false' width='54'/></div><div><div class="addthis_toolbox addthis_default_style "><a class="addthis_counter"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e5c1b1835b6b565"></script></div></div></div></b:if>
Salve o modelo e veja como ficou.

Divirtam-se!

OBS: O box só funciona dentro das página dos posts.

Código:  Diretório Blogger

Share This :