Como inserir botões de redes sociais em seu site ou blog

Redes Sociais - Site e Blog

As redes sociais é algo que se tornou muito importante na internet. Milhões de pessoas vivem conectadas todos os dias trocando e compartilhando informações umas com as outras. Em um blog como o Site na Teia por exemplo, o uso de botões de compartilhamento são essenciais para que as pessoas possam compartilhar temas de seu interesse com amigos. Da mesma forma vale para um site comum ou até mesmo de imprensa, pois é através das redes sociais que conseguimos boa parte do público proveniente.

Hoje neste post vamos ensinar á você como inserir botões de redes sociais em seu site. Vamos te mostrar o passo á passo de como criar, personalizar e inserir em seu site ou blog. Continue acompanhando para aprender…

Criando uma conta no AddThis

O AddThis é uma ferramenta online gratuita que permite qualquer um criar botões sociais personalizáveis. Pra começar, você precisa criar uma conta no site para que possamos prosseguir com o passo á passo.

Na própria página inicial é possível fazer isso. Basta clicar em “Get started, it’s free” ou logar automaticamente com o Google e Facebook, — que é bem mais prático.

1) Quando fizer isso, a primeira tela que verá é a que está logo na imagem abaixo:

Botões de redes sociais

1.1) Selecione qual o tipo de botão deseja criar: “Share buttons” é botões de compartilhar. “Follow buttons” são botões de seguir. Para ambos o procedimento que vamos ensinar é o mesmo, mas não mecha nas outras opções por agora. Depois você poderá descobrir aos poucos pra que elas servem.

Veja também

Continua depois da publicidade
 

Personalizando os botões

1) Você será levado até a página de personalização. Escolha qual posição ficará o widget e depois clique em ”continue”.

Botões de redes sociais

1.1) Ainda na página de personalização, escolha se deseja manter as redes sociais padrão escolhidas pelo AddThis (1° opção) ou se deseja escolher manualmente cada uma (2° opção). Se escolher a segunda opção, remova no “X” as redes que deseja excluir.

Botões de redes sociais

2) Para adicionar novas redes sociais, clique no botão: “Add more services”.

Botões de redes sociais

3) Agora chegou a hora de alterar a aparência dos botões. Para fazer isso, clique no desenho do “lápis” conforme mostraremos na imagem abaixo:

Botões de redes sociais

3.1) Feito isso, uma janela de opções para alteração será aberta. Você poderá ir ajustando conforme o seu gosto e vendo o resultado em tempo real na tela. Ao ajustar tudo, passe para a próxima etapa clicando em “3K”.

Botões de redes sociais

4) Nesta opção você poderá configurar um numerador de contagens para quem compartilhar sua página — no caso se estiver escolhido botões de compartilhamento. O resultado poderá ser visto ao vivo na tela, conforme já mencionamos.

Botões de redes sociais

4.1) Em seguida personalize de acordo com o seu gosto e clique para ir na próxima opção conforme a imagem abaixo:

Botões de redes sociais

Nesta opção é possível definir a posição dos botões.

Continua depois da publicidade
 

5) Na primeira opção da tela, você poderá escolher se deseja ocultar o widget dos botões em alguns dispositivos. No caso o celular, o computador ou nenhum deles. Em nosso caso, deixamos “Neither”, que é nenhum. Assim os botões aparecerão para todos independente de onde eles estão acessando.

Botões de redes sociais

5.1) Na segunda opção é possível configurar o tamanho dos botões na forma responsiva, ou seja, cada formato de tela para eles se adaptarem diferente em seu site. Isso geralmente não é preciso configurar, a não ser que realmente você queira.

Botões de redes sociais

5.2) Feito isso, pule para a próxima e última etapa da personalização.

Botões de redes sociais

6) Na última etapa você poderá definir em quais páginas os botões serão exibidos ou ocultados.

6.1) Para esconder os botões na página inicial, marque a primeira opção que diz: “Hide on Homepage”. No campo debaixo onde se diz “Show on Only These Pages”, poderá escrever quais são as URLs de seu site que irá mostrar os botões. Se quiser mostrar em todo o site, deixe o campo em branco.

6.2) Em “Hide on these pages” é o contrário do outro campo. Nele, você terá que escrever quais serão as URLs que irão ocultar os botões. Use esse campo se por exemplo não quiser que os botões sejam exibidos em páginas específicas como: contato, sobre, etc. Da mesma forma que o outro campo, poderá deixar em branco se quiser que os mesmos apareçam em toda parte.

Botões de redes sociais

7) Em “Follow Up Message” poderá configurar uma mensagem em português para os usuários que compartilharem ou seguirem seus conteúdos.

  • Thank You Message = Mensagem de agradecimento
  • Follow Message = Mensagem para quem te seguir
  • Related Posts Message = Mensagem para quem clicar em um de seus posts relacionados — não é necessário usar.

Bom, depois de todas as alterações feitas, clique no botão “Activate Toll”.

Botões de redes sociais

Continua depois da publicidade
 

Configurando a instalação do botão

Para instalar os botões de forma correta em seu site, primeiramente é preciso saber em qual serviço ele está hospedado. Se o seu site tiver uma hospedagem como o WordPress ou Magento, selecione os mesmos na opção de configuração. Em seguida é só seguir com os passos que serão indicados pelo AddThis.

Botões de redes sociais

Se você tem um site que não foi listado pelo AddThis ou foi criado através de um construtor como o Wix, Webnode ou Google Sites, siga os passos que iremos indicar a seguir.

1) Clique em “An HTML Website”, a primeira opção. Depois, marque a caixinha indicada na imagem abaixo:

Botões de redes sociais

2) É o seguinte, aparecerão dois códigos: Copie o primeiro que é o da instalação e vá até o FTP do seu site, se for uma hospedagem, claro. Se estiver em um construtor, apenas faça login e entre no editor.

Botões de redes sociais

Em caso de hospedagens

2.1) Localize o arquivo do seu tema que contém o cabeçalho do site. Normalmente se chama header.php e pode ser encontrado acessando a pasta do tema. Feito isso abra-o.

Botões de redes sociais

2.3) Procure pela tag <head> e cole o código da instalação que copiamos antes de fechar </head>.

Botões de redes sociais

2.4) Da mesma forma anterior, volte no AddThis e copie o segundo código. Depois volte e cole por baixo o código dos botões.

Botões de redes sociais

Pronto. Agora é só salvar e esperar alguns minutos para que os botões comecem a aparecer em seu site!

Continua depois da publicidade
 

Em caso de construtores

Se o seu site está em um construtor, vamos mostrar o que pode ser feito para que os botões comecem a funcionar nele. Vamos continuar do passo lá de cima onde copiamos o código da instalação.

2.5) Com o editor do seu site aberto, vá até o rodapé e procure pela opção “inserir HTML”. Esse nome muda de editor para editor. Em alguns casos está escrito assim: “Incorporar código”, “HTML externo”, “Código”, etc. Feito isso, cole o código da instalação, mas não salve ainda!

Botões de redes sociais

2.6) Com o HTML aberto, dê um enter no teclado e volte ao AddThis para copiar o código dos botões. Feito isso, cole e salve.

Botões de redes sociais

Pronto. Agora não esqueça de publicar o seu site para que as alterações sejam exibidas ao público!

Botões de redes sociais

Informação importante: Não cole o código dos botões em qualquer área do seu site. Como dissemos acima, o código deve ser colado no rodapé ou em uma outra área fixa. Se colar em qualquer lugar, quando o visitante acessar, ele só verá os botões na área que colou. Por isso é importante procurar um local fixo para que os códigos sejam implementados com segurança.

Gostou? Então não esqueça de deixar um comentário logo abaixo e continuar acessando nosso site para mais dicas 🙂


Venha para nosso canal e aprenda mais!

Inscreva-se agora mesmo e comece a personalizar o seu site por completo. Trazemos tutoriais com várias dicas além de conteúdos exclusivos.

Adicione o Site na Teia aos seus favoritos!

Pressione CRTL + D em seu teclado e pronto. É fácil e sem complicação!

Posts Relacionados