Como criar botões de compartilhamento personalizados

Prefere desenhar os seus próprios botões de partilha, mas quer aproveitar a nossa plataforma para acompanhar o compromisso social? 

Os editores costumam projetar seus botões de compartilhamento do zero quando querem que os ícones se alinhem melhor com sua marca e paleta de cores ou adaptar as configurações dos botões para páginas diferentes. Então, eles vão aproveitar nossa plataforma de análise gratuita para mergulhar mais profundamente em suas principais páginas, canais sociais e referências sociais.

Algumas coisas que poderia fazer com os nossos Botões de Partilha Personalizada incluem:

• Modificar a sua forma e cor usando CSS da forma que quiser reflectir a sua marca.
• Escreva o texto que quiser nos botões, útil para chamadas personalizadas para acções!
• Mostrar vários conjuntos/instâncias de botões em diferentes secções da mesma página.

Para que as ferramentas ShareThis funcionem em seu site, siga as etapas abaixo para adicionar seu código exclusivo ShareThis à seção de cabeçalho do seu site: 

1. Inicie sessão na sua conta da Plataforma ShareThis Platform. Se não tem uma conta ShareThis, registe-se gratuitamente aqui.
2. No Directório Apps, seleccionar Botões de Partilha Personalizada. 
3. Selecione o botão Ativar código no canto superior direito. Na janela pop-up, clique no botão Copiar código .
4. Acesse o seu site HTML.
5. Cole o código exclusivo ShareThis que você copiou da etapa 3 no campo de cabeçalho e clique em Save (Salvar).
6. Crie o HTML e o CSS para seus botões de compartilhamento personalizados. A configuração dos botões personalizados para Facebook e Twitter deve ser semelhante a esta:  

• HTML: 

• CSS: 

.st-custom-button[data-network] {
background-color: #0ADEFF;
display: inline-block;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
color: #fff;
}
.st-custom-button[data-network]:hover,
.st-custom-button[data-network]:focus {
text-decoration: none;
background-color: #00C7FF;
}

Por exemplo, se quiser alterar especificamente o aspecto do botão do Facebook, a classe CSS no seu ficheiro CSS deve ser .st-custom-button[data-network="facebook"].

6. Adicione atributos de dados ao div específico para cada canal social, a fim de especificar o que você quer que nosso código principal faça quando um usuário clica ou escuta os botões de suas ações. 

Os canais sociais apoiados incluem: 

Os atributos de dados incluem: 

7. Navegue até uma página em seu site (por exemplo, blog, produto, etc.) e cole o código de colocação que você copiou da plataforma ShareThis, onde você quiser que a ferramenta ShareThis apareça.

Nota

• Se precisar de ver um exemplo trabalhado de botões de partilha personalizados, pode verificá-lo aqui: https://codesandbox.io/s/amazing-sun-0rrb2?file=/index.html

• ShareThis will look for the <div> code of the buttons along with its data attributes and ShareThis classes on your website’s code, so if you have a custom icon or image you want to set for the buttons, you will have to wrap it inside the <div> mentioned above, like this:

• One way to display the share count for each social platform is adding a span code with the <em>count</em> class<em><strong> </strong></em><strong><em>inside</em></strong> the <div> code for the buttons: