Botões de Compartilhamento para Redes Sociais
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.
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:
Em nosso exemplo foram criadas classes dentro da tag HTML <a class=”…”, utilizando e chamando os ícones Font-Awesome da seguinte forma:
<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)
<a class="fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank" >
<a class="fa fa-twitter" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" >
(Text here >>> “%20Gostei%20dessa%20publicação ” personalize esse trecho da maneira que desejar “%20”)
<a class="fa fa-google-plus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" >
<a class="fa fa-pinterest" title="Pin it" target="_blank" href='javascript:void((function()%7Bvar%20e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src',' http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'></a>
<a class="fa fa-tumblr" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" >
<a class="fa fa-envelope" href="mailto:?subject=&body=:%20" target="_blank" title="Email" >
<a class="fa fa-pinboard" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" >
<a class="fa fa-linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" >
<a class="fa fa-reddit" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" >
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" >
<li><a class="w-inline-block social-share-btn tw" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet" >
<li><a class="fa fa-google-plus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" >
<li><a class="fa fa-pinterest" title="Pin it" target="_blank" href='javascript:void((function()%7Bvar%20e=document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src',' http://assets.pinterest.com/js/pinmarklet.js?r='+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" >
<li><a class="fa fa-envelope" href="mailto:?subject=&body=:%20" target="_blank" title="Email" >
<li><a class="fa fa-pinboard" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" >
<li><a class="fa fa-linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" target="_blank" title="Share on LinkedIn" >
<li><a class="fa fa-reddit" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" >
</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.
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.
Uma das maravilhas do marketing digital para o profissional que atua nele é não precisar…
O WhatsApp anunciou que à partir desta terça-feira, dia 07 de abril, haverá um novo…
Cada vez mais a concorrência no mundo dos negócios está aumentando e, para os restaurantes,…
Com a alta do mercado digital atual, o YouTube permite aos seus criadores a possibilidade…
O marketing imobiliário é o futuro, "no presente", para a publicidade online e o marketing digital…