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.

Recomendamos também

5 comentários:

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

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

    ResponderExcluir
    Respostas
    1. 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.

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

    ResponderExcluir