Como colocar botões de compartilhamento na sua página

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/
Como colocar botões 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.

Deixe seu comentário