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:
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
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”.
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.
2) Para adicionar novas redes sociais, clique no botão: “Add more services”.
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:
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”.
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.
4.1) Em seguida personalize de acordo com o seu gosto e clique para ir na próxima opção conforme a imagem abaixo:
Nesta opção é possível definir a posição dos botões.
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.
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.
5.2) Feito isso, pule para a próxima e última etapa da personalização.
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.
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”.
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.
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:
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.
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.
2.3) Procure pela tag <head> e cole o código da instalação que copiamos antes de fechar </head>.
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.
Pronto. Agora é só salvar e esperar alguns minutos para que os botões comecem a aparecer em seu site!
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!
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.
Pronto. Agora não esqueça de publicar o seu site para que as alterações sejam exibidas ao público!
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. Temos tutoriais diversos para ajudar a desenvolver o seu site 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
