Redes Sociais – Botões de Compartilhamento

Atualmente, todos temos contato com o mundo digital constantemente. Seja  no trabalho, na escola, na faculdade e assim por diante…

Boa parte desse tempo que passamos conectado, é usando as redes sociais, como twitter, orkut, facebook e etc.

Sabendo a importância das redes sociais nas nossas vidas, este artigo irá ensinar a criar botões de compartilhamento nas principais redes sociais.

1. Criando Sua Conta no Add This.

Para se registrar no Add This Clique Aqui

Preencha os campos corretamente e, escolha uma senha na qual se lembre futuramente.

• O campo onde está marcado “Email me a weekly analytics report” é se refere a um relatório semanal de utilização do serviço. Caso não queria receber esse relatório no seu Email, desmarque-o

Efetuado o registro você receberá uma confirmação no seu Email.

2. Inserindo Estilo nos Botões

Para dar uma aparência mais sofisticada, vou ensinar aqui a colocar um suave efeito de opacidade nos botões.

• Para sua segurança faça o backup do modelo do seu blog antes de começar, clicando em Baixar modelo completo

Vá para Design/ Editar HTML clique em Expandir modelos de widgets e localize esse trecho ]]></b:skin>

Copie o código abaixo e cole logo acima do trecho citado anteriormente

/* Social icons */
.addthis_toolbox{padding:15px 0 5px 0; text-align:center}
.addthis_toolbox .custom_images a{width:32px;  height:32px;  margin:0 2px 0 2px;  padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}

3. Inserindo os Botões no Código

Localize o seguinte trecho <div class='post-footer'> ou <p class='post-footer'> (Isso vai depender do seu modelo de template)

Acima desse trecho, copie e cole o código abaixo

<!-- AddThis Botoes Inicio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
<div class='addthis_toolbox' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
   <div class='custom_images'>   
      <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><img alt='RSS/Feed' height='32' src='http://lh3.ggpht.com/_vEwRtyehKNk/TDgccN2ig7I/AAAAAAAAAtg/V2oXrKkend0/rss.png' title='Assine Nosso Feed Gratuitamente' width='32'/></a> 

      <a class='addthis_button_facebook'><img alt='Envie Para Facebook' height='32' src='http://3.bp.blogspot.com/_Z8F7gBEfQSU/S_3BU3fQE6I/AAAAAAAAA5Q/ar1128qKWCQ/s1600/facebook.png' title='Envie Para o Facebook' width='32'/></a>  

      <a class='addthis_button_twitter'><img alt='Envie Para o Twitter' height='32' src='http://1.bp.blogspot.com/_Z8F7gBEfQSU/S_3BWD614uI/AAAAAAAAA5w/FjkoPIc3rhg/s1600/twitter.png' title='Envie Para o Twitter' width='32'/></a>  

      <a class='addthis_button_orkut'><img alt='Promova no Orkut' height='32' src='http://lh4.ggpht.com/_vEwRtyehKNk/TDgboPuz0HI/AAAAAAAAAtc/L1Vop5ELT-c/orkut.png' title='Promova no Orkut' width='32'/></a>  

      <a class='addthis_button_google'><img alt='Salve Nos Favoritos Do Google' height='32' src='http://lh5.ggpht.com/_vEwRtyehKNk/TDgbnj7ClXI/AAAAAAAAAtY/f2AIPxX5Fz0/Google-%282%29.png' title='Salve Nos Favoritos Do Google' width='32'/></a>  

      <a class='addthis_button_googlebuzz'><img alt='Envie Para o Google Buzz' height='32' src='http://lh5.ggpht.com/_vEwRtyehKNk/TDK9ktKkJ4I/AAAAAAAAArA/5JCryZcul1w/Buzz.png' title='Envie Para o Google Buzz' width='32'/></a>  

      <a class='addthis_button_email'><img alt='Enviar Por Email' height='32' src='http://lh3.ggpht.com/_vEwRtyehKNk/TDgbntj0G-I/AAAAAAAAAtQ/F6c_SaK7Wpc/Email.png' title='Enviar Por Email' width='32'/></a>  

     <a class='addthis_button_print'><img alt='Imprimir Isto' height='32' src='http://lh6.ggpht.com/_IJBajL6CZN8/TAFWiZQ_pDI/AAAAAAAABJk/9XQXAmfXSN8/printer_32.png' title='Imprimir Isto' width='32'/></a>  

      <a class='addthis_button_more'><img alt='Mais Serviços' height='32' src='http://1.bp.blogspot.com/_Z8F7gBEfQSU/S_3BVgKjbzI/AAAAAAAAA5g/KSv7SY9N9QI/s1600/more.png' title='Mais Serviços' width='32'/></a>  

   </div>
</div>
</div>
</b:if>
<!-- AddThis Botoes Final –>

4. Fazendo Tudo Funcionar

Agora localize o a tag </body>
Logo acima dela, copie e cole o código abaixo fazendo as alterações necessárias.

<script type="text/javascript" src=http://s7.addthis.com/js/250/addthis_widget.js#username=NOME DE USUARIO DO ADD THIS></script>

Onde esta escrito “NOME DE USUARIO DO ADD THIS” coloque o nome de usuário no qual você usa para fazer login no Add This .

Agora é só clicar em salvar e conferir o resultado visualizando alguma das suas postagens.