Um link de compartilhamento para redes sociais permite ao visitante do seu site compartilhar o conteúdo do mesmo, permitindo uma quantidade maior de acessos ao seu site.

Qual a vantagem em utilizar um link personalizado de compartilhamento em seu site?

Vale lembrar que não é utilizada nenhuma imagem e, sim, ícones Font-Awesome, que é um conjunto de fontes e ícones feitos com o uso de folhas de estilos, CSS e LESS. Com o objetivo de reduzir o uso de recursos externos, melhorando o desempenho e a velocidade do seu site ou blog, ajudando a posicioná-lo melhor nos mecanismos de buscas, alavancando as visitas do seu site de forma natural.

Quando um link de compartilhamento “personalizado” é utilizado em seu site, você permite que os visitantes interajam com as suas publicações. Sendo essencial, principalmente, para sites desenvolvidos em WordPress, evitando o uso de plugins “desnecessários” para tal finalidade, acelerando ainda mais a navegação do seu site.

Os códigos que veremos a seguir são para serem utilizados como um shared button, mas nada impede que você possa personalizá-los e utilizá-lo como links de suas redes sociais.

Você poderá utilizar os códigos do nosso exemplo para todas as redes sociais:

• WhatsApp;
• Facebook;
• Twitter;
• Linkedin;
• Google+;
• Pinterest;
• entre outras redes sociais.

Em nosso exemplo foram criadas classes dentro da tag HTML <a class=”…”, utilizando e chamando os ícones Font-Awesome da seguinte forma:

• fa fa-facebook;
• fa fa-twitter;
• da fa-whatsapp;
• e assim por diante.

WhatsApp Share

<a class="fa fa-whatsapp" title="WhatsApp" href="whatsapp://send?text=Seu site aqui" target="_blank"></i></a>

(WhatsApp Share só terá efeito na versão mobile)

Facebook Share

<a class="fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"></a>

Twitter Share

<a class="fa fa-twitter" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Gostei%20dessa%20publicação ' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a>

(Text here >>> “%20Gostei%20dessa%20publicação ” personalize esse trecho da maneira que desejar “%20”)

Google+ Share

<a class="fa fa-google-plus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"></a>

Pinterest Share

<a class="fa fa-pinterest" title="Pin it" target="_blank" href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;); e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;); e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;); e.setAttribute(&apos;src&apos;,&apos; http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'></a>

Tumblr Share

<a class="fa fa-tumblr" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;"></a>

Email Share

<a class="fa fa-envelope" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;"></a>

Pinboard Share

<a class="fa fa-pinboard" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" onclick="window.open('https://pinboard.in/popup_login/?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>

Linkedin Share

<a class="fa fa-linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>

Reddit Share

<a class="fa fa-reddit" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a>

Adaptando os códigos acima em seu site

Simplesmente, copiando e colando, os códigos acima até funcionarão, mas não da forma adequada, por isso, você precisará criar uma folha de estilos no seu editor CSS para que os links de compartilhamento de redes sociais tenham uma aparência adequada para o seu site. Lembrando que apenas estamos posicionando corretamente os links de compartilhamento, utilizando CSS.

Abra a sua folha de estilos no seu editor CSS, copie e cole o seguinte código abaixo:

.compartilhamento li {
float:left;
list-style: none;
font-size:32px;
margin-right:10px;
}
.compartilhamento a{
color:#f00;
}

.compartilhamento a:hover{
color:#f00;
}

Caso você queira personalizar a sua folha de estilos e não sabe como fazer, acesse o site do Maujor e tenha mais informações de como utilizar CSS.

E, adicione o seguinte código abaixo nas páginas desejas, utilizando o seu editor HTML ou se o seu site for em WordPress, adicione no Widget desejado.

<ul class="compartilhamento">

<li><a class="fa fa-whatsapp" title="WhatsApp" href="whatsapp://send?text=Seu site aqui" target="_blank"></a></li>

<li><a class="fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"></a></li>

<li><a class="w-inline-block social-share-btn tw" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Gostei%20dessa%20publicação ' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"></a></li>

<li><a class="fa fa-google-plus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"></a></li>

<li><a class="fa fa-pinterest" title="Pin it" target="_blank" href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;); e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;); e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;); e.setAttribute(&apos;src&apos;,&apos; http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'></a></li>

<li><a class="fa fa-tumblr" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" onclick="window.open('http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title)); return false;"></a></li>

<li><a class="fa fa-envelope" href="mailto:?subject=&body=:%20" target="_blank" title="Email" onclick="window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.URL)); return false;"></a></li>

<li><a class="fa fa-pinboard" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" onclick="window.open('https://pinboard.in/popup_login/?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></li>

<li><a class="fa fa-linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></li>

<li><a class="fa fa-reddit" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"></a></li>

</ul>

Fazendo os procedimentos acima, seu site permanecerá com os links de compartilhamento para redes sociais, ganhando desempenho, velocidade e melhorando o posicionamento do seu site nos mecanismos de buscas. Para visualizar o modelo final, clique aqui.

Bônus – Fazendo links personalizados para suas redes sociais

Da mesma forma que o exemplo anterior, você poderá utilizar o seguinte código abaixo, para criar links personalizados para as suas redes sociais.

<ul>

<li><a class="fa fa-facebook" href="https://www.facebook.com/sua-pagina" target="_blank"></a></li>

</ul>

Gostou da nossa dica? Comente e compartilhe com os seus amigos em suas redes sociais.