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" >
Twitter Share
<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”)
Google+ Share
<a class="fa fa-google-plus" href="https://plus.google.com/share?url=" target="_blank" title="Share on Google+" >
Pinterest Share
<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>
Tumblr Share
<a class="fa fa-tumblr" href="http://www.tumblr.com/share?v=3&u=&t=&s=" target="_blank" title="Post to Tumblr" >
Email Share
<a class="fa fa-envelope" href="mailto:?subject=&body=:%20" target="_blank" title="Email" >
Pinboard Share
<a class="fa fa-pinboard" href="https://pinboard.in/popup_login/?url=&title=&description=" target="_blank" title="Save to Pinboard" >
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" >
Reddit Share
<a class="fa fa-reddit" href="http://www.reddit.com/submit?url=&title=" target="_blank" title="Submit to Reddit" >
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" >
<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.
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.
Recent Posts
Reputation Talks: evento aborda gestão de reputação
A Knewin, ecossistema completo para gestão de reputação, realiza no dia 3 de outubro, às…
11 meses atrás Titulo da noticia para entrega de sprint 34
News title for sprint delivery 34 News title for sprint delivery 34News title for sprint…
2 anos atrás Ssojioafgjojafjkasbngfoashuasgioasgfklj
JuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliaoJuliao Cariani 3 é um cara muito legal foi Teste para o corpo 2 Teste…
2 anos atrás Outro título Outro título Outro título
Quando pensamos em grandes marcas de diferentes segmentos, como Coca-Cola, Disney, Apple e McDonald’s, associamos…
2 anos atrás Como usar o Google Trends para criar pauta?
As pautas, metaforicamente falando, são as sementes do texto jornalístico. Delas brotam as notícias que,…
2 anos atrás Gestão eficiente da água é requisito básico para evitar a escassez
Apesar de, durante muitos anos, ter sido considerada um recurso natural infinito, há algumas décadas,…
2 anos atrás