Existem na web diversos sites que oferecem o serviço de botões de compartilhamento. O que eu mais gosto, particularmente, é do SIMPLE SHARE BUTTONS que oferece um código livre para adaptações. No site do desenvolvedor, podemos ver um breve exemplo de utilizar o SIMPLE SHARE BUTTONS.
Embora o site da SIMPLE SHARE BUTTONS apresenta um bom exemplo de uso, podemos melhorá-lo ainda mais com um pouco de JavaScript e jQuery. Devemos entender que um site normalmente possui várias páginas e programá-las uma a uma apenas copiando e colando pedaços de código pode não ser uma boa ideia.
Exemplo de uso – botões de compartilhamento
Vamos criar uma página com os botões de compartilhamento para o Facebook, Twitter, Pinterest, e Google + . Além disso vamos também acrescentar o botão de Impressão e Enviar por e-mail.
A melhoria que fiz serve justamente para facilitar a inserção dos botões de compartilhamento em várias páginas.
Download de exemplo
Disponibilizei os arquivos neste endereço:
aulas-profanderson.azurewebsites.net/tpi/como-colocar-botoes-de-compartilhamento-em-seu-site/botoes-de-compartilhamento.zip
Descompacte o arquivo e verá a seguinte estrutura.
Como usar os botões de compartilhamento
Para qualquer página do seu site, basta apenas carregar o jQuery e o arquivo shared.js ficando;
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="js/btnShared/shared.js"></script>
Agora precisamos criar uma <div> com o id=”shared” no local aonde você deseja colocar os botões.
<div id="shared"></div>
Exemplo completo
O código a seguir representa uma página qualquer com os botões de compartilhamento;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="js/btnShared/shared.js"></script> </head> <body> <h1>Lorem Ipsum</h1> <hr/> <h2>O que é Lorem Ipsum?</h2> <p> Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker. </p> <!-- Div que irá carregar os botões de compartilhamento --> <div id="shared"></div> </body> </html>
O resultado será esse; aulas-profanderson.azurewebsites.net/tpi/como-colocar-botoes-de-compartilhamento-em-seu-site/
Entendendo o código
A melhoria que fiz consiste em passar para o JavaScript a criação dos links, além disso, o shared.js captura automaticamente o nome da página através do tag <TITLE>, portanto, não o importa o título da página que o JS irá fazer o serviço dele.
