Como criar botões de compartilhamento para seu site passo a passo

Os botões de compartilhamento social são um elemento indispensável de todos os sites. Seja um blog pessoal ou comercial, um portfólio online ou um projeto de comércio eletrônico, os botões sociais permitem que os clientes divulguem facilmente seu conteúdo no Facebook, Twitter, Instagram ou Pinterest. Ao implementar botões fáceis de compartilhamento social em seu recurso da Web, você pode expandir significativamente seu alcance e receber novos clientes para acessar seu site em busca de conteúdo ou bens valiosos. O poder das redes de mídia social não deve ser subestimado nos dias de hoje. Se uma empresa não pode ser encontrada no Facebook ou Instagram, ela perde a oportunidade de alcançar seu público-alvo e comercializar seus produtos e serviços para mais pessoas. Como o nome sugere, os botões de compartilhamento social tornam seu conteúdo mais compartilhável na web. É uma prática comum para usuários modernos compartilhar links para seus produtos preferidos em suas páginas do Facebook. Cada postagem social pode ser acessada por seguidores com os mesmos interesses e preferências do seu cliente.

Além disso, com botões de mídia social, você pode transmitir facilmente seu conteúdo em grupos de mídia social ou para os indivíduos escolhidos. O número de compartilhamentos nas redes sociais aponta o conteúdo que as pessoas consideram mais valioso e envolvente. Assim, muitas marcas estão trabalhando duro para multiplicar os compartilhamentos de mídia social e aumentar o reconhecimento da marca.

Divulgar os conteúdos preferidos pode ser fácil com apenas alguns cliques. Os botões sociais permitem que seus clientes transmitam links enquanto permanecem em seu site. Na maioria dos casos, envolve simplesmente tocar no botão de compartilhamento e selecionar a plataforma de mídia social onde eles gostariam que seu link aparecesse.

Como criar um botão de compartilhamento passo a passo

A internet está cheia de botões de compartilhamento diferentes, a principal tarefa é escolher os corretos. Às vezes você nem entende quais botões sociais você precisa em seu próprio blog. Às vezes, você não consegue encontrar botões com um design que atenda às suas necessidades. Às vezes você não consegue encontrar uma maneira simples e legal de implementar botões de compartilhamento em seu blog. Não entrar em pânico! Neste artigo, mostraremos como criar alguns botões de compartilhamento básicos e sociais.

Cursos de webdesign

• Aulas de codificação online para aprendizado em casa
• Pacote completo de domínio do Photoshop

Caso você não queira lidar com códigos enormes e lotados e customização de detalhes complexos, este tutorial é exatamente para você. Mesmo os novatos em HTML acharão fácil de seguir. Então, apertem os cintos e vamos começar!

Passo 1

A primeira coisa que você deve fazer é abrir seu arquivo HTML e colar o código abaixo

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
ou
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

Passo 2

Agora crie um arquivo js que contenha essas informações:

É isso :) Um método muito simples para acompanhar as estatísticas de cliques no botão de compartilhamento que é colocado diretamente na página de compartilhamento. Este problema foi resolvido com a ajuda de uma tabela no banco de dados e ajax simples:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

Este script obtém um id da URL, adiciona o rótulo à tabela e/ou aumenta o contador em um para uma rede social específica. É uma solução simples para botões de compartilhamento. Você pode alterar facilmente a aparência de seus botões via CSS, você pode criar seus próprios botões no Photoshop e usá-los aqui. Você pode fazer quase tudo!

Claro, este exemplo é um pouco primitivo, mas é um ponto legal para começar a criar seus próprios botões de compartilhamento legais. Dê uma chance!

Redes de mídia social populares permitem que você gere pedaços de código personalizados que podemos incorporar em postagens ou páginas de sites para permitir que as pessoas transmitam seu conteúdo preferido. Facebook e Twitter são duas das redes sociais mais populares que suportam a respectiva funcionalidade. Vamos ver como integrar esses botões sociais ao seu site.

Como adicionar o botão de compartilhamento do Facebook

Os botões de compartilhamento do Facebook permitem que seus clientes compartilhem links direcionados a postagens ou ofertas em seu site com um texto personalizado.

Para adicionar este botão ao seu site, primeiro você precisa ir para esta página.

Agora vamos ver o que significam alguns dos campos na página de configuração.

• URL para Curtir - este campo adiciona a página do site que queremos compartilhar no Facebook.
• Largura - a largura do botão é definida aqui.
• Verbo para exibir - aqui podemos selecionar o texto no botão "Curtir" ou "Recomendo".
• Esquema de cores - Aqui você pode escolher o design do botão para sites claros ou escuros.
• Fonte - selecione a fonte para os rótulos dos botões.

Depois de selecionar as configurações, encontre o botão "Obter código" e clique nele. Em seguida, será exibida uma janela com o código, que também precisa ser inserido em duas etapas:

Insira o código logo após a tag <body>.

Código para exibir o botão:

Cole este código onde o botão do facebook deve ser exibido:

Como adicionar o botão de compartilhamento do Twitter

Ao adicionar botões de compartilhamento do Twitter ao seu site, há várias coisas que os desenvolvedores do Twitter recomendam que você tenha em mente:

• Se um usuário não estiver logado em sua conta do Twitter, ele será solicitado a fazer login para ajustar sua mensagem.
• O tweet será vinculado à página da Web que uma pessoa visitou. Um usuário pode se sentir à vontade para ajustar a mensagem do tweet da maneira que quiser.
• Depois de clicar em “Tweet”, a caixa pop-up revelará uma lista de contas relacionadas no Twitter. Um usuário pode decidir onde segui-los ou ignorá-los.
• Não há limite no número de vezes por dia e o mesmo usuário pode twittar algo para a linha do tempo.

Para adicionar o botão de compartilhamento do Twitter, faça o seguinte:

• Vá para publish.twitter.com e toque nos botões do Twitter.
• Escolha o tipo de botão de compartilhamento do Twitter que você gostaria de adicionar ao seu site.
• Ajuste o Tweet e a mensagem que ele conterá ao mencionar qual @account você gostaria que ele mencionasse.
• Feito isso, copie e cole o código em seu site.

É quase isso. Esperamos que você ache este guia útil. A melhor coisa é que você não deve ter nenhuma habilidade de codificação profunda para adicionar botões de compartilhamento social ao seu site. Os geradores de código automatizados fornecem soluções prontas para uso que você pode ajustar, copiar e colar intuitivamente no HTML do seu site.