Les réseaux sociaux se sont imposés comme un moyen incontournable de partage et de diffusion de l'information avec quasiment 2,7 Mds d'utilisateurs à fin 2019. Ils sont considérés, avec les moteurs de recherche, de principaux outils pour générer le trafic et d'atteindre de nouveaux utilisateurs de votre site web en ligne.
Ce tuto a pour but de vous aider à implanter des boutons de partages fixes (c-à-d flottants) et présentant plusieurs avantages :
- Simplicité : un seul code est à incorporer à votre site web ;
- Personnalisable : depuis un tableau de bord vous pouvez infiniment modifier et personnaliser vos boutons ;
- Responsive : s'adapte à la taille de l'écran et n'obstrue pas le contenu de votre blog.
Tuto d'intégration de barre flottante de boutons de partage
Etape 1 : Configurer le code Addthis :
Connectez vous au site web Addthis et créez un compte (en cliquant sur le bouton "Get started") : https://www.addthis.com/
Juste après créez un nouvel outil en suivant les instructions sur la photo en dessous :
Juste après créez un nouvel outil en suivant les instructions sur la photo en dessous :
Choisissez "Share buttons" sur le menu proposé juste après, puis sur "Continue" en bas à gauche. Vous pouvez à cet étape personnaliser les boutons qui vont s'afficher en choisissant tel ou tel réseau social, couleur de la barre, etc.
Cliquez sur le bouton "Activate tool", vous serez dirigés vers une nouvelle page qui incluera le code Addthis à copier (voir photo ci-dessous) :
Etape 2 : Incorporer le code sur votre blog :
Dirigez-vous vers l'éditeur HTML de votre blog (si vous ne savez pas comment procéder, je vous invite à lire ce tuto simple : X)
Maintenez les touches "Ctrl" et "F" appuyées pour chercher dans le code, et cherchez le code suivant :
</body>code
Enregistrez en cliquant sur le bouton en bas à droite.
Voilà, les boutons seront visibles juste après l'enregistrement de votre thème.
Pour rappel, les boutons peuvent être modifiés à votre guise à tout moment depusi le dashboard d'Addthis sans avoir à ajouter de nouveau code HTML.
Si vous avez besoin d'aide sur une étape ou d'une aide pour personnaliser la barre, n'hésitez pas à laisser un commentaire, je n'hésiterai pas à vous apporter mon aide.
Dirigez-vous vers l'éditeur HTML de votre blog (si vous ne savez pas comment procéder, je vous invite à lire ce tuto simple : X)
Maintenez les touches "Ctrl" et "F" appuyées pour chercher dans le code, et cherchez le code suivant :
Enregistrez en cliquant sur le bouton en bas à droite.
Voilà, les boutons seront visibles juste après l'enregistrement de votre thème.
Pour rappel, les boutons peuvent être modifiés à votre guise à tout moment depusi le dashboard d'Addthis sans avoir à ajouter de nouveau code HTML.
Si vous avez besoin d'aide sur une étape ou d'une aide pour personnaliser la barre, n'hésitez pas à laisser un commentaire, je n'hésiterai pas à vous apporter mon aide.
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimerTrès intéressant ce petit bouton de partage :) ... merci
RépondreSupprimerBlog: http://electriciteonline.blogspot.com/
Merci mais comment on peut en ajouter 2 un a gauche et l'autre a droite
RépondreSupprimerPs : je l'ai utiliser pour mettre de la pub au lieu des bouttons
Bonjour. Merci pour ce widget, il est super.
RépondreSupprimerPar contre j'ai un petit souci, sur Safari sur iPad il empiète sur les posts (il se met devant). Et je remarque qu'ici sur ton blog il ne s'affiche pas sur iPad... Comment as-tu fait ?
Merci d'avance de ton aide.
Merci pour votre remarque !
SupprimerEn effet, sur les petits écrans comme les tablettes, la barre flottante entre dans le cadre de l'article, et gêne la lecture.
Il existe bien une solution, mais elle dépend de ta template.
Si tu peux m'envoyer ta template sur mon e-mail, je mettrai la barre de façon à être identique à celle de mon blog.
Merci!
J'aurais aimé que le bouton "like" soit en français "J'aime". Le 2e bouton FB (Partager) n'apparaît pas. Seul le mot Partager apparaît mais pas l'image.
RépondreSupprimerJe vous visite pour la première fois. Bravo et merci pour cette bonne idée de barre flottante... ;)
Bonjour,
SupprimerSi tu regardes le code de Faceboook, il est bien en français ( /fr_FR/ ).
S'il est en anglais, c'est à cause d'un autre bouton ou widget facebook qui est en anglais ( /en_US/ ) ou bien ( /en_EN/ ).
Donc tu cherche avec CTRL+F ' en_US ' ou bien ' en_EN 'et tu le changes avec ' fr_FR ' .
Concernant le bouton partager, je chercherai d'ou vient le problème, et le resoudrai très prochainement ;)
Merci pour votre visite ;)
Bonjour,
RépondreSupprimermerci pour ce tuto, et de manière générale, bravo pour ton blog très bien fait et très agréable à consulter.
J'ai installé la barre sans problème (avec un condition d'affichage pour qu'elle n'apparaisse que sur les pages d'articles), et j'ai réussi à la repositionner comme je le souhaitais, ainsi qu'à supprimer les boutons qui ne m'intéressaient pas. Par contre, je voudrais ajouter en bas un bouton Pinterest avec compteur. Quelles modifications doivent être apportés au code ?
Merci d'avance.
Pierre.
http://tendance-talons.blogspot.fr/
Bonjour,
SupprimerPour ajouter le bouton pinterest, il vous suffit de suivre le tuto suivant: http://blogger-pourlesnuls.blogspot.com/2012/06/integrer-le-bouton-pinterest-pour.html
Dans ce cas, vous ajoutez le code dans le widget et pas avant < data: post . body />
Merci beaucoup pour ce tuto
RépondreSupprimerEnregistrer un commentaire