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.
A Knewin, ecossistema completo para gestão de reputação, realiza no dia 3 de outubro, às…
News title for sprint delivery 34 News title for sprint delivery 34News title for sprint…
JuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliao Cariani 3 é um cara muito legal foi Teste para o corpo 2 Teste…
Quando pensamos em grandes marcas de diferentes segmentos, como Coca-Cola, Disney, Apple e McDonald’s, associamos…
As pautas, metaforicamente falando, são as sementes do texto jornalístico. Delas brotam as notícias que,…
Apesar de, durante muitos anos, ter sido considerada um recurso natural infinito, há algumas décadas,…