Comment créer des boutons de partage pour votre site étape par étape

Les boutons de partage social sont un élément indispensable de chaque site Web. Qu'il s'agisse d'un blog personnel ou professionnel, d'un portfolio en ligne ou d'un projet de commerce électronique, les boutons sociaux permettent aux clients de faire facilement connaître votre contenu sur Facebook, Twitter, Instagram ou Pinterest. Tout en implémentant des boutons de partage social faciles dans votre ressource Web, vous pouvez considérablement étendre votre portée et accueillir de nouveaux clients sur votre site à la recherche de contenu ou de biens de valeur. La puissance des réseaux sociaux ne doit pas être sous-estimée de nos jours. Si une entreprise est introuvable sur Facebook ou Instagram, elle rate une occasion d'atteindre son public cible et de commercialiser ses biens et services auprès d'un plus grand nombre de personnes. Comme leur nom l'indique, les boutons de partage social rendent votre contenu plus partageable sur le Web. C'est une pratique courante pour les utilisateurs modernes de partager des liens vers leurs produits préférés sur leurs pages Facebook. Chaque message social peut être atteint par des abonnés ayant les mêmes intérêts et préférences que votre client.

De plus, avec les boutons de médias sociaux, vous pouvez facilement diffuser votre contenu dans des groupes de médias sociaux ou aux personnes choisies. Le nombre de partages sur les réseaux sociaux indique le contenu que les gens trouvent le plus précieux et engageant. Ainsi, de nombreuses marques travaillent dur pour multiplier les partages sur les réseaux sociaux et accroître leur notoriété.

Faire connaître les éléments de contenu préférés peut être facile en quelques clics. Les boutons sociaux permettent à vos clients de diffuser des liens pendant qu'ils restent sur votre site Web. Dans la plupart des cas, cela implique simplement d'appuyer sur le bouton de partage et de sélectionner la plate-forme de médias sociaux sur laquelle ils souhaitent que votre lien apparaisse.

Comment créer un bouton de partage étape par étape

Internet regorge de différents boutons de partage, la tâche principale est de choisir les bons. Parfois, vous ne comprenez même pas de quels boutons sociaux vous avez besoin sur votre propre blog. Parfois, vous ne trouvez pas de boutons dont le design correspond à vos besoins. Parfois, vous ne trouvez aucun moyen simple et cool d'implémenter des boutons de partage sur votre blog. Ne pas paniquer! Dans cet article, nous allons vous montrer comment créer des boutons de partage basiques et sociaux.

Cours de conception Web

• Cours de codage en ligne pour l'apprentissage à domicile
• Ensemble complet de maîtrise de Photoshop

Au cas où vous ne voudriez pas vous occuper d'un code énorme et encombré et d'une personnalisation complexe des détails, ce didacticiel est exactement pour vous. Même les débutants en HTML le trouveront facile à suivre. Alors, attachez vos ceintures et c'est parti !

Étape 1

La première chose à faire est d'ouvrir votre fichier HTML et de coller le code ci-dessous

<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>

Étape 2

Créez maintenant un fichier js contenant ces informations :

Voilà :) Une méthode très simple pour suivre les statistiques de clic sur le bouton de partage qui est placé directement sur la page de partage. Ce problème a été résolu à l'aide d'une table dans la base de données et d'un simple ajax :

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

}

Ce script obtient un identifiant à partir de l'URL, ajoute l'étiquette au tableau et/ou augmente le compteur de un pour un réseau social spécifique. C'est une solution simple pour les boutons de partage. Vous pouvez facilement modifier l'apparence de vos boutons via CSS, vous pouvez concevoir vos propres boutons dans Photoshop et les utiliser ici. Vous pouvez presque tout faire !

Bien sûr, cet exemple est un peu primitif, mais c'est un bon point pour commencer à créer vos propres boutons de partage sympas. Essayez!

Les réseaux de médias sociaux populaires vous permettent de générer des morceaux de code personnalisés que nous pouvons intégrer dans des publications ou des pages de sites Web pour permettre aux gens de diffuser leur contenu préféré. Facebook et Twitter sont deux des réseaux sociaux les plus populaires qui prennent en charge les fonctionnalités respectives. Voyons comment intégrer de tels boutons sociaux à votre site.

Comment ajouter un bouton de partage Facebook

Les boutons de partage Facebook permettent à vos clients de partager des liens vers des publications ou des offres sur votre site Web avec un texte écrit sur mesure.

Pour ajouter ce bouton à votre site Web, vous devez d'abord vous rendre sur cette page.

Voyons maintenant ce que signifient certains des champs de la page de configuration.

• URL à aimer - ce champ ajoute la page du site que nous voulons partager sur Facebook.
• Largeur - la largeur du bouton est définie ici.
• Verbe à afficher - ici, nous pouvons sélectionner le texte dans le bouton "J'aime" ou "Je recommande".
• Jeu de couleurs - Ici, vous pouvez choisir la conception du bouton pour les sites clairs ou sombres.
• Police - sélectionnez la police des libellés des boutons.

Après avoir sélectionné les paramètres, recherchez le bouton "Obtenir le code" et cliquez dessus. Ensuite, une fenêtre avec le code s'affichera, il doit également être inséré en deux étapes :

Insérez le code juste après la balise <body>.

Code d'affichage du bouton :

Collez ce code là où le bouton de facebook doit être affiché :

Comment ajouter un bouton de partage Twitter

Lorsque vous ajoutez des boutons de partage Twitter à votre site Web, les développeurs de Twitter vous recommandent de garder à l'esprit plusieurs éléments :

• Si un utilisateur n'est pas connecté à son compte Twitter, il lui sera demandé de se connecter pour modifier votre message.
• Le tweet sera lié à la page Web qu'une personne a visitée. Un utilisateur peut se sentir libre d'ajuster le message du tweet comme il le souhaite.
• Après avoir cliqué sur "Tweet", la fenêtre contextuelle révélera une liste de comptes associés sur Twitter. Un utilisateur peut décider où les suivre ou les ignorer.
• Il n'y a pas de limite au nombre de fois par jour et le même utilisateur peut tweeter quelque chose sur la chronologie.

Pour ajouter un bouton de partage Twitter, procédez comme suit :

• Accédez à publish.twitter.com et appuyez sur les boutons Twitter.
• Choisissez le type de bouton de partage Twitter que vous souhaitez ajouter à votre site.
• Ajustez le Tweet et le message qu'il contiendra en mentionnant le @compte que vous souhaitez qu'il mentionne.
• Une fois cela fait, copiez et collez le code dans votre site.

C'est à peu près tout. Nous espérons que vous trouverez ce guide utile. La meilleure chose à ce sujet est que vous ne devriez pas avoir de compétences approfondies en codage pour ajouter des boutons de partage social à votre site Web. Les générateurs de code automatisés vous offrent des solutions prêtes à l'emploi que vous pouvez ajuster, copier et coller de manière intuitive dans le code HTML de votre site Web.