Comment créer des boutons de partage personnalisés

Vous préférez concevoir vos propres boutons d'action mais vous voulez tirer parti de notre plateforme pour suivre l'engagement social ? 

Les éditeurs conçoivent souvent leurs boutons de partage à partir de zéro lorsqu'ils souhaitent que les icônes s'alignent mieux sur leur marque et leur palette de couleurs ou qu'ils adaptent la configuration des boutons aux différentes pages. Ils s'appuient alors sur notre plateforme d'analyse gratuite pour approfondir leurs pages d'accueil, réseaux sociaux, et leurs références sociales.

Voici quelques exemples de ce que vous pouvez faire avec nos boutons de partage personnalisés :

• Modifiez leur forme et leur couleur à l'aide de CSS comme vous le souhaitez pour refléter votre marque.
• Écrivez le texte que vous voulez sur les boutons, utile pour les appels à l'action personnalisés !
• Affichez plusieurs ensembles/instances de boutons sur différentes sections d'une même page.

Pour que les outils ShareThis fonctionnent sur votre site web, suivez les étapes ci-dessous pour ajouter votre code ShareThis unique à la section d'en-tête de votre site web : 

1. Connectez-vous à votre compte de la plate-forme ShareThis . Si vous n'avez pas de compte ShareThis , inscrivez-vous gratuitement. Ici.
2. Dans le répertoire des applications, sélectionnez Boutons de partage personnalisés. 
3. Sélectionnez le bouton Activer le code dans le coin supérieur droit. Dans le pop-up, cliquez sur le bouton Copier le code.
4. Connectez-vous à votre site web HTML.
5. Collez le code unique de ShareThis que vous avez copié à l'étape 3 dans le champ de l'en-tête et cliquez sur Enregistrer.
6. Créez le HTML et le CSS pour vos boutons de partage personnalisés. La configuration des boutons personnalisés pour Facebook et Twitter devrait ressembler à cela :  

• 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;
}

Par exemple, si vous souhaitez modifier spécifiquement l'aspect du bouton Facebook, la classe CSS de votre fichier CSS doit être .st-custom-button[data-network="facebook"].

6. Ajoutez des attributs de données à la div spécifique à chaque réseaux sociaux afin de spécifier ce que vous voulez que notre code de base fasse lorsqu'un utilisateur clique ou tape sur vos boutons de partage. 

Le site réseaux sociaux est pris en charge : 

Les attributs de données comprennent : 

7. Rendez-vous sur une page de votre site web (par exemple, un blog, un produit, etc.) et collez le code de placement que vous avez copié de la plateforme ShareThis , à l'endroit où vous souhaitez que l'outil ShareThis apparaisse.

Note

• Si vous souhaitez voir un exemple travaillé de boutons de partage personnalisés, vous pouvez le consulter ici : 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: