13 de maio de 2016

Adicionando um box flutuante para compartilhamento nas redes sociais com AddThis


As redes sociais tem um peso muito grande para um blog ou site. Sabendo disso é de extrema importância seu blog ter botões elegantes para  incentivar o leitor a compartilhar o seu artigo, dessa forma seu blog terá mais relevância e mais tráfego.

Saiba que ter contas para seu blog nas redes sociais podem ajudar a indexar seu blog no topo do google, é claro que temos outros fatores, mas as redes sociais tem grande valia para o google, principalmente quando se trata do Google Plus.

Bom mas esse não é o assunto do artigo, ensinaremos outras formas de aparecer melhor nos mecanismo de buscas futuramente.

O AddThis fornece elegantes botões de compartilhamento para seu site, e hoje vou ensinar a colocar um box com os botões flutuante na lateral do seu blog, veja a demonstração abaixo.



O primeiro passo é criar uma conta no AddThis.

O cadastro é simples e rápido. Com a conta criada, siga os passos:

1- Acesse sua conta e clique na aba Tools

2- Clique em Sharing Sidebar


3- Em Sharing Sidebar, vamos as configurações do box.


Choose a side: defina qual lado quer o box.
Theme: escolha o tema dos botões.
Title: deixe o campo vazio.
Show Share Counts: escolha se quer exibir o número de compartilhamento.
Services: marque a opção Select Your Own se quiser escolher quais redes sociais deseja mostrar, se não deixe em Auto Personalization que o AddThis se encarrega de mostrar as redes sociais mais usadas.

Feito isso clique no botão Create.

4- Adicionando no blog

Após clicar em Create, o AddThis vai fornecer um código para ser implementado no blog, no meu caso o código é:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5735e365d2749e6d"></script>
É claro que o seu será diferente, então copie o código e acesse o painel do seu blog e vá em Modelo > Editar HTML tecle CTRL + F e procure por:
</body>
E antes dela cole o seu código.

Pronto feito isso o seu blog começará a exibir o box em todas as páginas e postagens.


Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

5 comentários

Muito boa mesmo essa dica! era oque eu estava procurando. obrigado pessoal

Segui todos os passos mas não deu certo, pode me ajudar?

Yes Futurex,

Você pode enviar o link do seu site, ou mostrar como fez?

É só seguir a risca os passos que não terás problema.

Deu certo, estava colocando o código no lugar errado. Valeu Ebrahim!


Abrir lista de emoticonFechar lista de emoticon