Como criar "botões compartilhar" personalizados para as redes sociais?
Bom, aqui neste exemplo vamos utilizar a font-awesome para implementarmos os icons das redes-sociais, mas depois se quiseres podes trocar e utilizar imagens em vez disso para evitar estar a carregar uma fonte completa para o teu site ou plataforma caso não a vás utilizar em mais lado nenhum, por questões de performance.
Eis um exemplo online no jsFiddle dos botões personalizados que iremos estar a criar:
► https://jsfiddle.net/vhchcnaw/
Bom, então para podermos fazer uso da fonte-awesome primeiro precisamos de a implementar dentro da tag `<head>` do nosso site, usando a seguinte linha de código:
`<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">`
Depois iremos criar o nosso código HTML que irá conter os hyperlinks de partilha para as diversas redes-sociais e o código de marcação para incluir os derivados icons:
```
<!-- Twitter -->
<a href="http://twitter.com/share?url=http://truquesedicascss.blogspot.pt/&text=<TEXT>&via=<VIA>" target="_blank" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=http://truquesedicascss.blogspot.pt/" target="_blank" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://truquesedicascss.blogspot.pt/" target="_blank" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://truquesedicascss.blogspot.pt/&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://truquesedicascss.blogspot.pt/&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=<URL>&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Email -->
<a href="mailto:?subject=<SUBJECT&body=<BODY>" target="_blank" class="share-btn email">
<i class="fa fa-envelope"></i>
</a>
<br><br>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://truquesedicascss.blogspot.pt/" target="_blank" class="long-share-btn facebook">
<i class="fa fa-facebook-square"></i> Facebook
</a>
```
E por fim iremos então criar o código CSS que deverá ser adicionado à sua folha de estilos:
```
/* Social Button CSS */
.share-btn {
display: inline-block;
color: #ffffff;
border: none;
padding: 0.5em;
width: 4em;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
}
.share-btn:hover {
color: #eeeeee;
}
.share-btn:active {
position: relative;
top: 2px;
box-shadow: none;
color: #e2e2e2;
outline: none;
}
.twitter { background-color: #55acee; }
.google-plus { background-color: #dd4b39; }
.facebook { background-color: #3B5998; }
.stumbleupon { background-color: #444444; }
.reddit { background-color: #FFA500; }
.linkedin { background-color: #4875B4; }
.email { background-color: #444444; }
/* Código para botão com texto */
.long-share-btn {
display: inline-block;
color: #ffffff;
border: none;
padding: 0.5em 1.5em;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
}
.long-share-btn:hover {
color: #eeeeee;
}
.long-share-btn:active {
position: relative;
top: 2px;
box-shadow: none;
color: #e2e2e2;
outline: none;
}
a.long-share-btn {
text-decoration: none;
}
```