Como Adicionar Barra de Redes Sociais Flutuante em seu Blog

 
Ter botões de redes sociais é ótimo por facilitar para que as pessoas possam compartilhar os conteúdos do seu blog.

Bom, você provavelmente já deve saber que é muito importante não é mesmo?

Para este post vou mostrar de uma maneira bem fácil e rápida como adicionar uma barra de redes sociais com botões de compartilhamento flutuante, podendo escolher o lado esquerdo, central ou direito do seu blog.

É possível instalar tanto no Blogger quanto no WordPress.org (entre outras plataformas).

O modelo é exatamente igual ao que atualmente estou usando no Turbinar Blog.

Ele fica fixo na página inicial e nos posts. 

Leia também: Como Inserir a Caixa de Curtir do Facebook em seu Blog

Primeiros Passos

1. Acesse o site AddThis. É necessário criar uma conta.

Você pode tanto preencher o formulário ou usar sua conta do Gmail/Facebook para ser mais rápido. 

2. Após criar sua conta vai aparecer três opções, escolha a primeira "Share buttons".

3. Na próxima página deixe selecionado a opção "Sidebar" e clique no botão azul "Continue".

Configurando seu Widget

Agora irá aparecer três abas de configuração, explicarei cada uma delas a seguir:

- Aba Sidebar

• Position (Desktop): Escolha a posição do widget entre esquerda, centralizado ou direita nas páginas do seu blog.

• Position (Mobile): A mesma coisa mas para quem acessa por dispositivos mobile. Escolha entre na parte inferior, no topo ou centralizado.

• Share Counters: Deixe marcado se quiser que o widget mostre o número de compartilhamentos.

• Social Networks (Automatic): Deixar as redes sociais selecionadas automaticamente por padrão que está aparecendo. Ou seja, Facebook, Twitter, Imprimir, Email, AddThis.

• Social Networks (Select your own): Selecione essa opção para que você mesmo possa escolher quais redes sociais quer que apareça no widget.

- Aba Design

• Style: Nessa opção você pode escolher um modelo do widget.

• Label: Nesse campo você pode digitar algum texto personalizado como por exemplo "Compartilhe".

• Logo Color: Escolha uma cor para os ícones do seu widget.

• Icon Background Color: Escolha uma cor de fundo dos botões do widget ou deixe o padrão de cada rede social (Brand Colors). 

Obs: Clique no ícone como mostrado na imagem abaixo para voltar.

- Aba Advanced Options

• Hide on Homepage: Marque essa opção se quiser ocultar o widget na página inicial do seu blog.

• Hide on These Pages: Coloque URLs de páginas específicas onde você não quer que o widget apareça (Separe cada URL por uma vírgula).

Em "Extra Appearance Settings" não é necessário mudar. Agora temos ainda as últimas opções...

• Desktop Vertical Offset: Nessas opções você configura a posição do widget, diminuindo ou aumentando e assim definindo se ele fica mais para baixo ou para cima.

• Show Message: Deixe marcado se quiser que apareça mensagens no seu widget onde você deve personalizar nos três campos abaixo:
   
  • Follow on Message: Mensagem para "Seguir".
  • Thank You Message: Mensagem de "Obrigado"
  •  Related Posts Message: Mensagem de "Posts Recomendado"

Bom, terminado todas essas configurações clique no botão "Save & Continue".

Instalando no Blogger

Agora nessa próxima página a ferramenta te mostra um código onde você deve colar antes da tag </body> do seu blog.

Para isso entre no painel de controle do seu blog e vá em "Modelo" e depois em "Editar HTML".

Aparecerá todos os códigos do seu template. Clique dentro da caixa de códigos e aperte junto em seu teclado CTRL+F. 

Irá abrir um pequeno campo de busca. Digite </body> e aperte enter.

Agora copie o código gerado no AddThis e cole antes da tag </body> que encontramos no blog. Vai ficar assim a estrutura:

Pronto, agora é só salvar e o widget irá aparecer em seu blog. :)

Instalando no WordPress.org

Para instalar no WordPress você também pode colar o código antes da tag </body> nos arquivos do CMS. 

Mas para facilitar, o próprio AddThis criou um plugin e um passo a passo bem fácil que pode ser acessado clicando aqui.