Botões de redes sociais (compartilhamento) para o Blogger

Por | Atualizado em 2016-03-13

As redes sociais são essenciais na divulgação do seu conteúdo. Como tal, é importante que você possua os botões das redes socais mais importantes disponíveis para facilitar o compartilhamento do seu conteúdo.

O Blogger, possui botões de compartilhamento, mas verdade seja dita, não são muito apelativos e são muito pequenos, passando facilmente despercebidos. Mas então qual é a solução?

Neste tutorial iremos propor duas soluções simples: usar um serviço com ferramentas de partilha de conteúdo ou usar os nossos botões “responsivos”.

botões das redes sociais compartilhamento

Botões das redes sociais (compartilhamento) para o Blogger

A primeira solução, poderia passar por usar um serviço “específico” de ferramentas de partilha de conteúdo. Os mais conhecidos são o Addthis, ou o AddtoAny.

No entanto, com alguma criatividade, podemos criar botões de compartilhamento personalizados evitando o carregamento de elementos externos (a sobrecarregar a página).

1. Em primeiro lugar, será necessário adicionar a ferramenta “Font Awesome” ao seu Blog. Dessa forma, terá acesso a um enorme número de ícones gratuitos para usar no seu blog (saiba mais).

Para isso, basta aceder ao menu “Modelo” – “Editar HTML”. Cole o seguinte código antes da secção </head> do seu blog e salve as alterações.

editar html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2. Em seguida, será necessário adicionar o código CSS dos botões das redes sociais. Para facilitar, iremos adicionar as cores associadas às respectivas redes sociais localmente, usando a tag “span”. Para isso, cole o seguinte código imediatamente antes da tag “]]></b:skin>”

.partilhar{
width: 25%;
height: 50px;
font-size: 19px;
color: white;
font-family: Roboto;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
line-height: 48px;
border-radius: 3px;
margin: auto 0;

}
.partilhar:hover{
text-decoration: none;

}

3. Para terminar, basta adicionar o código dos botões no rodapé (ou cabeçalho, embora não seja recomendado) do seu Blog. Para isso, basta colar o seguinte código imediatamente a seguir à tag “<div class='post-footer-line post-footer-line-1'>”

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' target='_blank' title='Partilhar no Facebook'><div class='partilhar' style='background-color: #3b569e;'><i class='fa fa-facebook'/></div></a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' target='_blank' title='Partilhar no Google'><div class='partilhar' style='background-color: #dd4b39;'><i class='fa fa-google'/></div></a>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'> 
<div class='partilhar' style='background-color: #45668e;'><i class='fa fa-envelope'/></div></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<div class='partilhar' style='background-color: #55acee;'><i class='fa fa-twitter'/></div></a>

Caso tenha dificuldades ou detecte alguma falha, envie o seu comentário para que a nossa equipa possa atualizar o código.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *