Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Accueil
Facebook
gadget

Ajouter des boutons de partage fixes (flottants) à votre blog

Afin de mieux faire connaître votre blog, augmenter les visiteurs et capter ceux qui sont intéressés par le thème de votre blog, je vous propose d'ajouter les boutons de partage des différents réseaux sociaux dans une barre flottante, qui augmentera certainement le nombre de partages de vos articles dans les réseaux sociaux.
Cette article a été mis à jour le 23/10/2019 afin d'inclure un nouveau tuto plus simple.alert-success


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 :



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
Juste avant, collez le code copié dans l'étape 1.
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.

10 commentaires

  1. Anonyme
    Ce commentaire a été supprimé par l'auteur.
  2. Très intéressant ce petit bouton de partage :) ... merci
    Blog: http://electriciteonline.blogspot.com/
  3. Merci mais comment on peut en ajouter 2 un a gauche et l'autre a droite

    Ps : je l'ai utiliser pour mettre de la pub au lieu des bouttons
  4. Bonjour. Merci pour ce widget, il est super.
    Par 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.
    1. Merci pour votre remarque !
      En 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!
  5. 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.

    Je vous visite pour la première fois. Bravo et merci pour cette bonne idée de barre flottante... ;)
    1. Bonjour,

      Si 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 ;)
  6. Bonjour,
    merci 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/
    1. Bonjour,

      Pour 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 />
  7. Merci beaucoup pour ce tuto