Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

Ajouter une boîte de partage flottante dans WordPress avec le plugin Smart Sharing

Nous recevions un nombre énorme d'e-mails de personnes nous demandant comment créer une boîte de partage flottante sur leur site WordPress. S'agissait-il d'un plugin ? Après avoir collaboré avec notre équipe, nous avons décidé qu'il serait plus efficace de créer un plugin gratuit plutôt que de répondre à chaque e-mail individuellement.

Que fait ce plugin Smart Sharing ?

Smart sharing ajoute une boîte flottante avec des boutons de médias sociaux uniquement dans les articles individuels. Par défaut, vous pouvez choisir entre retweet, facebook, digg et stumbleupon. Mais vous n'êtes pas limité à ces choix car il existe une option pour ajouter vos propres codes personnalisés.

Quel est l'avantage de ce plugin ?

Ce plugin applique la théorie du renforcement positif de B.F Skinner au marketing des médias sociaux. Normalement, les boutons sont placés soit en haut de l'article, soit en bas de l'article. Bien que ces deux positions soient acceptables, elles ne sont pas les meilleures. Si vous les placez en bas de l'article, vous vous attendez à ce que l'utilisateur lise jusqu'au bout. Parfois, les utilisateurs aiment l'article et ne lisent pas les articles complets. Mais ils partageraient toujours vos articles s'il y avait un renforcement positif. Ce plugin ajoute une petite boîte flottante qui défile avec l'utilisateur, afin qu'il puisse voter dès qu'il a terminé.

En savoir plus sur ce plugin et le télécharger

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

100 Comments

  1. j'ai résolu le problème en supprimant ceci :

    <script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2′></script>

    Il était appelé deux fois.

    Thanks for your quick answer anyway. :)

  2. @BijanGhorbani Il existe différents scripts lightbox. L'un doit être au-dessus ou en dessous de l'autre. Si les scripts SmartSharing sont au-dessus, ils causeront le problème.

  3. @wpbeginner Alors, comment suggérez-vous de placer au mieux les codes JS ?

  4. @BijanGhorbani Le problème vient probablement du placement des codes JS.

  5. J'ai installé ce plugin et il fonctionne bien, mais il a désactivé tous les effets lightbox dans mes articles, ce qui est vraiment dommage. Qu'est-ce qui entre en conflit avec l'effet lightbox dans ce plugin s'il vous plaît ?

  6. Bonjour, je viens d'installer ce super plugin et tout s'est bien passé, mon problème est que le plugin ne flotte pas comme celui de cette page, il reste juste à une certaine distance du haut de la page et quand vous faites défiler vers le bas, il ne vous suit pas.

  7. @wpbeginner je le ferai. J'ai installé Sharebar comme solution temporaire, donc je les permuterai plus tard et j'enverrai une capture d'écran.

    Merci !

  8. @rdempsey Rob, envoie un e-mail, pour que je puisse voir ce qui ne va pas. Merci d'inclure un lien vers ton site.

  9. @wpbeginner c'est la première fois que j'installe le plugin. Je viens de m'inscrire, de télécharger et d'installer aujourd'hui.

  10. Téléchargé, installé et activé le plugin. Le seul problème est que deux barres s'affichent – une statique et l'autre suivant dynamiquement le contenu. Je suis sur WP 3.1.3 utilisant Genesis 1.6 avec un thème enfant. Des idées ? Merci !

  11. le plugin ne fonctionne pas avec le thème twentyten, version wordpress 3.1.2. Comment ça se fait ?

      • !! Ça marche ! Je n'avais juste pas réalisé qu'il y avait un bouton de paramètres séparé dans le panneau latéral. Néanmoins, les boutons Retweet et Facebook devraient être cochés par défaut selon moi. Quoi qu'il en soit, vous êtes géniaux ! Merci pour votre réponse.

  12. Comme la barre de partage de wpbeginner.com, elle n'est pas attachée au bord du navigateur en tant que telle, donc pour l'améliorer un peu pour diverses résolutions d'écran, fixez-la au contenu et ainsi la boîte de partage sera simplement coupée lorsque la fenêtre du navigateur sera redimensionnée !

    J'ai remplacé le code php pour le css de la boîte de partage (dans le fichier .php du plugin) par du css statique :

    .sharepost{float:left; border:1px solid #E8E8E8; margin-right:10px; position:fixed; background:#FFF; margin-left:-100px; width:60px; z-index:0}

    .sharer{padding:5px; border-bottom:1px solid #e8e8e8}

    Cela vous permettra de commencer, mais vous devrez effectuer tous les ajustements futurs depuis votre éditeur de plugin WordPress dans le fichier .php !

  13. Quelles modifications avez-vous apportées au plugin pour qu'il soit invisible sur votre site dans les navigateurs mobiles ?

    Lorsque je charge mon site sur mon mobile, le plugin chevauche le contenu.

    Si vous pouviez partager ici, ce serait très utile. Merci !

    • Nous ne savons pas pourquoi WP Tap affiche le contenu du thème par défaut. Notre plugin ne devrait s'afficher que sur le thème car nous ajoutons le code dans le hook wp_footer.

  14. J'ai installé le plugin sur une installation WordPress 3.01 et bien que l'installation se soit déroulée correctement et que j'aie configuré les options, rien n'apparaît sur mes articles de blog.

    Pourriez-vous y jeter un œil ? Le site est lié à mon nom

    merci.

    • Le plugin n'arrive pas à s'enregistrer dans le pied de page. Vous devrez peut-être vérifier cette fonction. De nombreux utilisateurs ont eu ce problème en utilisant Thesis. Nous travaillons sur une nouvelle version de ce plugin, qui sera géniale.

    • Vous pouvez l'ajouter à un site statique, mais vous n'aurez aucune fonctionnalité backend, donc tout doit être statique. Ajoutez simplement le CSS de ce plugin...

  15. Ce plugin fonctionnait bien jusqu'à ce que je passe à WordPress 3.0, maintenant il me dit que le plugin provoque une erreur fatale.

    Que puis-je faire à ce sujet ?

    • Je viens de vérifier le plugin avec la version 3.0 (il fonctionne bien). Cela devait être un problème avec un autre plugin. Pouvez-vous s'il vous plaît nous envoyer par e-mail les détails de votre site (nom du site), les plugins que vous utilisez, etc., afin que nous puissions vous aider davantage.

  16. Je l'ai installé sur mon site web mais malheureusement l'icône StumbleUpon ne fonctionne pas correctement. Si vous cliquez sur Stumble, il essaie de partager une certaine page, pour de nombreux articles.

    Comment puis-je corriger cela ?

  17. Really light weight and nice plugin. (will advice you to make it more lighter :) – and never use jquery with it)

    however, like many people here, i was not able to make the plugin work with my theme too (using thesis 1.7) however i’ve solved the issue by making change in the code by replacing your get_footer to wp_footer. hopefully it will make some changes in your next release :)

    pour ceux qui ont besoin de résoudre le problème de la non-affichage du slider après l'activation du plugin, j'ai expliqué les étapes ici : http://nabtron.com/smart-sharing-plugin-now-showing-on-thesis-1-7-theme-solved/2653/

  18. Le code ne fonctionne pas. Je viens de l'ajouter à mon modèle de page et il n'apparaît pas du tout.

    Y a-t-il un endroit particulier dans le modèle de page où il doit être ajouté ?

    Hope to hear from you soon. Cheers ;-)

  19. Sur cette page même, je constate que le bouton retweet et Fshare disparaît pour les résolutions inférieures (pour 1024×768 et 800×600). Comment puis-je y parvenir ? C'est un plugin très sympa, mais il n'est pas beau quand il flotte sur le texte de la page dans les résolutions susmentionnées.

    • Vous devrez désactiver l'ajout automatique, puis ajouter la fonction manuellement là où vous souhaitez l'appeler. Nous travaillons à l'élargissement des options de ce plugin.

      • Merci pour votre réponse ! Avez-vous une idée de quand vous pourriez publier une version mise à jour de ce plugin ?

  20. Merci pour ce plugin. J'ai un problème. Mon bouton de partage Facebook, quand je publie, ne peut plus afficher le nom de l'article ? Et pas l'image non plus ? Puis-je résoudre cela ?

  21. J'ai activé ce plugin et il ne s'affiche pas sur ma page ? Je ne suis pas sûr de ce qui se passe ici, mais je suis à peu près sûr d'avoir tout fait correctement.

  22. Je viens de télécharger le plugin et je l'adore, mais j'obtiens une erreur 404 avec tweet meme. Tweet meme fonctionnait très bien quand j'avais le bouton individuel installé. Je dois juste entrer mon nom Twitter, n'est-ce pas ? J'ai désactivé le meme original que j'avais installé et vidé mon cache, mais il s'affiche toujours avec un point d'interrogation. Aide ?

  23. Il ne s'affiche pas sur mon site, je ne sais pas pourquoi ni comment commencer le dépannage

    • Il ne fonctionne pas automatiquement avec tous les thèmes. Vous devrez ajouter la fonction suivante dans votre fichier single.php add_smartsharing(); << n'oubliez pas de l'encadrer avec PHP et cela fonctionnera.

  24. Beau plugin. Je cherchais quelque chose de similaire à mashables et je pense que vous avez le meilleur jusqu'à présent, à part si je créais le mien.

    Merci pour l'info sur le code personnalisé.

  25. Merci beaucoup pour ça ! Je l'ai vu sur mashable.com et je le voulais pour mon nouveau blog sur les médias sociaux. Je ne connaissais pas le nom du plugin, merci beaucoup. Super site au passage ! Combien de sites sociaux peuvent être sur ce plugin à la fois ?

  26. Salut

    Je viens de télécharger et d'installer votre plugin, et il fonctionne à merveille… sauf pour un petit détail.

    La boîte de dialogue captcha est un vrai frein, d'autant plus que les mots ne sont pas toujours très lisibles. Comment puis-je m'en débarrasser ? J'ai déjà regardé le code du plugin, mais je n'ai rien trouvé qui y ressemble.

    Pourriez-vous s'il vous plaît m'indiquer la bonne direction ?

    Merci beaucoup et félicitations pour votre travail.

  27. This is like the hottest social media network plugin in the world! :) I really love it but I hope you could make it as awesome as the one in Mashable :)

  28. I’m wondering why the box is attached to my browser edge instead of my content just like you have here…in this way works fine, but in mine it overlap the content for resolutions smaller than 1024px….please help me! :)

    • La raison pour laquelle il est attaché à l'écran du navigateur est que c'est le moyen le plus simple et le plus simple de l'ajouter. En procédant ainsi, nous pouvons rendre ce plugin utilisable pour la plupart des thèmes. Vous pouvez voir le CSS de ce plugin, puis l'appliquer manuellement sur votre site si vous le souhaitez. C'est une simple balise position:fixed. La seule chose est que vous n'aurez aucune des fonctions du panneau d'administration en procédant ainsi.

      Vous pouvez modifier un peu le fichier du plugin. Changez les propriétés CSS selon vos besoins, puis changez le filtre d'ajout automatique. Ajoutez ensuite manuellement la fonction du plugin add_smartsharing() dans votre fichier single.php à côté de votre div de contenu. Mais cela représente beaucoup de travail et seuls les utilisateurs expérimentés en PHP et HTML/CSS pourront le faire.

      • Can you please create a blog post with instructions for how to make this modification (or even how to add that additional functionality Mashable has where the share buttons snap to above the content when the browser is reduced to a certain width)? Or email me. I’ll donate! ;-)

        • Non, nous ne fournirons pas publiquement de tutoriels sur la façon de personnaliser le CSS. Ce plugin est distribué tel quel et nous ne fournirons aucun support gratuit.

  29. Allez-vous implémenter le nouveau « Bouton J'aime » de Facebook dans ce plugin à la place ?

    Il semble que ce sera beaucoup plus « accrocheur »

  30. Merci pour le plugin ! Je cherchais partout ce widget de partage style Mashable.

    Je pensais à la barre Meebo... mais c'est PARFAIT !

  31. Tout d'abord ! Plugin génial !

    I have installed it and it works fine ;)

    I just have a small problem if i click on retweet i always been redirect to tweetmeme :( How cna i get it workin that the useer who clicks on retweet gets redirect direct to our tweeter account ?

    Merci beaucoup

    Sascha

    • C'est un problème de tweetmeme. Tout le monde n'est pas redirigé là-bas, seulement certaines personnes. Je ne sais pas pourquoi, mais c'est le cas. Le moyen le plus simple est de s'en débarrasser et d'utiliser un script alternatif en l'ajoutant dans les codes personnalisés.

  32. Bonjour,

    Comment aligner la barre de partage flottante sur le contenu et non sur le bord du navigateur ? Je vois que la vôtre s'aligne sur le contenu mais le plugin ne le fait pas. Toute aide serait la bienvenue.

    Merci !

    • C'est possible uniquement si vous ajoutez la fonction manuellement et modifiez le CSS pour l'adapter à vos besoins. Vous devez comprendre la propriété CSS 'fixed' et l'ajouter dans votre fichier single.php.

      Voici comment vous pouvez le faire. Activez d'abord le plugin, puis ouvrez le fichier functions.php de votre thème. Ajoutez la ligne suivante :

      remove_action( 'get_footer', 'add_smartsharing' );

      En faisant cela, vous venez de supprimer la fonction automatique. Ensuite, vous pouvez placer ce code dans votre fichier single.php pour appeler la fonction manuellement où vous le souhaitez.

      function add_smartsharing()..

      Vous devrez également modifier le fichier CSS pour qu'il corresponde à vos besoins. Le plugin par défaut ne l'ajoutera pas à côté du contenu.

      N'oubliez pas de vous assurer de modifier le CSS pour qu'il corresponde à vos besoins. Le défaut

      • Bonjour ! Pouvez-vous s'il vous plaît détailler comment modifier le CSS ? Il semble que votre réponse ici ait été coupée.

        Merci ! Diana

  33. J'essaie d'implémenter une barre d'outils de partage flottante comme celle que Mashable utilise sur un blog Tumblr, y a-t-il une version CSS, HTML ou jQuery qui pourrait être dérivée de ce plugin ? Et si oui, serait-ce difficile/facile ?

    • Ce plugin est uniquement pour WordPress. Vous pouvez utiliser les codes de ce plugin si vous souhaitez les implémenter sur votre site tant que vous nous créditez.

  34. J'ai téléchargé le plugin sharesmart sur mon site WordPress et tout s'est bien passé. Mon site n'est cependant pas en anglais (oui, devinez quoi, il existe tout un monde qui ne lit ni ne parle anglais). Y a-t-il un moyen de changer par exemple "Share", "shares" en une autre langue ?

  35. Bonjour Syed !
    J'adore votre plugin. Je l'ai installé et il fonctionnait parfaitement. Mais maintenant que j'ai changé de thème, il a disparu. J'ai aussi essayé de le désinstaller et de le réinstaller, mais rien n'apparaît toujours.
    Merci beaucoup pour votre aide !

    • Je ne sais pas quel pourrait être le problème. Nous devrions y jeter un œil. Veuillez donc nous envoyer un e-mail avec plus de détails en utilisant notre formulaire de contact.

  36. Vous êtes géniaux. Je cherchais quelque chose comme ça depuis un moment, et ça fonctionne parfaitement sur mon blog.

    J'ai essayé d'installer le code pour le bouton original de partage Facebook (http://www.facebook.com/facebook-widgets/share.php), mais cela ne semble pas fonctionner avec ce plugin (chaque actualisation de page réinitialiserait le compteur). C'est donc dommage que je doive perdre mon nombre de partages, mais cela vaut la peine d'intégrer cette fonctionnalité géniale.

    De plus, pouvez-vous m'indiquer où je peux trouver le code pour un bouton Google Buzz avec le compteur ?

    Merci beaucoup pour ce plugin génial !

    • Vous n'avez pas à perdre vos décomptes de partage ? fshare affichera le même décompte que le bouton de partage Facebook. Pour le bouton Google, veuillez lire cet article sur Balkhis à propos du décompte Google Buzz.

      Après avoir lu cette page, vous comprendrez pourquoi il n'est pas juste d'afficher le décompte Buzz pour le moment. Mais si vous pensez toujours vouloir tromper votre audience avec un décompte manipulable, utilisez ce tutoriel (Lien).

      • Bonjour ! Je n'ai pas perdu mes décomptes de partage pour la plupart de mes articles, mais je les ai définitivement perdus pour mon article de blog le plus récent au moment de l'installation ; j'avais 27 partages Facebook, mais il est revenu à 0. Cependant, il semble que le décompte de partage ait été reporté sur le reste de mes articles de blog.

        De plus, y a-t-il un moyen d'afficher ce plugin sur la page d'accueil ainsi que sur les articles individuels ?

        Much thanks! :-)

        • Non, ce plugin ne s'affichera pas sur la page d'accueil à moins que vous n'ajoutiez la fonction dans votre thème. Bien que nous ne recommandions pas d'ajouter cela à la page d'accueil. Votre page d'accueil contient de nombreux articles, quel article ce plugin partagera-t-il ?

          Voici la fonction si vous souhaitez l'appeler ailleurs add_smartsharing()

        • Eh bien, vous voyez comment Mashable a les boutons Tweetmeme, Facebook Share, etc. sur chaque article de la page d'accueil, puis a la boîte de partage flottante dans chaque article ? Je voudrais finalement faire de même. Bien que si je ne peux pas, ce n'est pas la fin du monde ; mon temps de chargement de la page d'accueil est beaucoup plus rapide maintenant.

          Thanks again! :-)

    • Veuillez nous contacter via le formulaire de contact, afin que nous puissions examiner le problème. Il n'apparaîtra que sur les pages de publication unique.

  37. J'ai entré mon e-mail et cliqué sur Télécharger, mais je n'ai jamais reçu de lien de téléchargement.

    • Avez-vous reçu un e-mail de confirmation vous demandant de confirmer votre adresse e-mail ? Si oui, juste après cet e-mail, vous auriez dû recevoir un e-mail de bienvenue. Veuillez vérifier votre SPAM. Sinon, contactez-nous via le formulaire de contact.

  38. Tu sais… pas aussi cool que la version de Mashable mais c'est un bon début. Je pense que quelques ajustements simples en jquery et un peu de positionnement css le feraient agir davantage comme je le souhaite.
    Bon travail cependant, joli plugin.

    • Chuck,

      C'est la première version de ce plugin. La raison pour laquelle nous ne pouvons pas utiliser la version jQuery dans une publication de plugin générique est que vous devez avoir un endroit spécifique pour insérer le plugin. Mashable l'a bien fait, juste à côté de l'article. Chaque thème a des classes d'article différentes. Cela rendrait très difficile la publication de la version jQuery pour le grand public. Si vous avez des suggestions, nous sommes ouverts. (Note : coder une boîte jQuery flottante n'est pas difficile. L'ajouter à WordPress en utilisant un plugin est la partie difficile). La seule chose qui pourrait fonctionner est de l'ajouter dans le contenu de l'article. Nous devrions essayer cela. Si vous avez d'autres suggestions, faites-le nous savoir.

      • oh understood. I appreciate the work and you guys releasing it, and your time in responding to me. So my initial issue with this one is on smaller screen resolutions this one will cover the content, mashable’s hides itself from the left and turns into a horizontal section right above the post content. THAT is amazing lol.
        I know your intent wasn’t to create what they did but that’s got some polish you’ve gotta admit! :)

        Avez-vous une feuille de route ou des idées pour améliorer ce plugin actuel ?

        • Chuck,

          Vous avez raison, Mashable procède ainsi. Mais comme nous l'avons mentionné, c'est quelque chose que nous envisageons d'ajouter à ce plugin. Aucune date de sortie future n'a encore été finalisée. Nous essayons toujours de voir si cela fonctionnerait avec tous les thèmes.

          Chaque thème fonctionne différemment et c'est quelque chose de personnalisé. Ils ont spécifié la largeur horizontale. Mais nous ne connaissons pas la largeur horizontale sur les autres thèmes. Donc, pour les thèmes avec une zone de contenu plus petite, cela casserait le thème.

          Si vous êtes un développeur, vous devriez comprendre exactement de quoi nous parlons.

          Sans aucun doute, le plugin de Mashable est une version plus aboutie, et nous ajouterons bientôt quelque chose de similaire sur WPBeginner, mais nous pensons qu'il s'agit plus d'une solution personnalisée que d'une solution générique.

        • C'est génial, mais je trouve que cela interfère avec mon texte à 1024. Même sans qu'il se transforme en option horizontale, comment puis-je le faire disparaître dans la marge gauche comme il le fait ici, lorsque la fenêtre est trop petite ? Merci.

        • J'ai trouvé la réponse plus bas dans les commentaires. N'hésitez pas à supprimer. Merci.

  39. Bonjour… j'étais curieux à propos de ce plugin… je l'ai téléchargé et j'ai essayé de l'installer localement… (j'utilise xampp – je ne pense pas que cela ait quelque chose à voir)… et j'obtiens cette erreur :

    Parse error: syntax error, unexpected $end in C:\xampp\htdocs\blog\wp-content\plugins\smartsharing\smart-sharing.php on line 507

    Avez-vous une idée ?

    Quoi qu'il en soit, merci pour le partage

  40. J'ai téléchargé le plugin Floating Share Box et je l'ai activé sur mon blog WordPress, mais il n'apparaît pas sur les pages des articles. Y a-t-il un conflit avec d'autres plugins ?

    • Pas à notre connaissance. Nous venons de le télécharger sur un site qui a plus de 30 plugins en cours d'exécution, et cela fonctionne. Alex, voulez-vous que nous jetions un œil pour voir ce qui se passe ? Veuillez nous envoyer un e-mail avec vos informations.

      • J'ai réussi à faire fonctionner le plugin, mais ce que je me demandais, c'est à quel point il serait difficile pour moi d'ajouter un bouton « Google Buzz » à la boîte de partage flottante ?

        • Regardez dans l'onglet de personnalisation de la page du plugin. Vous pouvez ajouter n'importe quoi dans la section des codes personnalisés. Utilisez simplement les paramètres div que nous avons mentionnés dans cet article.