Aller au contenu

Easter egg3 min lecture

Comment ajouter un bouton de partage de citation dans Webflow ?

Apprenez à afficher un bouton de partage quand un visiteur sélectionne du texte sur votre site Webflow.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher un bouton de partage de citation quand un visiteur sélectionne du texte sur votre site Webflow.

Exemple

Sélectionnez du texte dans ce paragraphe

"Le meilleur site web est celui que vos clients comprennent immédiatement. La clarté convertit mieux que la créativité. Un design épuré avec un message fort surpasse toujours un design complexe avec un message flou."

Sélectionnez au moins 20 caractères pour voir le bouton apparaître

ComportementDéclencheurAction
Apparition du boutonSélection > 20 caractèresBouton positionné près de la sélection
Partage mobileWeb Share API disponibleOuvre le menu natif de partage
Partage desktopWeb Share API indisponibleOuvre Twitter avec la citation pré-remplie
DisparitionClic ailleursBouton masqué

Le script

Autonome, aucun élément Webflow nécessaire. Ajoutez-le dans le Footer code.

(function() {
  var style = document.createElement('style');
  style.textContent =
    '.share-quote-btn { position: fixed; background: #111; color: #fff; padding: 8px 14px;' +
    'border-radius: 100px; font-size: 13px; cursor: pointer; z-index: 9999; display: none;' +
    'align-items: center; gap: 6px; border: none; font-family: inherit; white-space: nowrap;' +
    'box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: opacity 0.2s; }' +
    '.share-quote-btn:hover { opacity: 0.85; }';
  document.head.appendChild(style);

  var btn = document.createElement('button');
  btn.className = 'share-quote-btn';
  btn.innerHTML = '🔗 Partager cette citation';
  document.body.appendChild(btn);

  var selectedText = '';

  document.addEventListener('mouseup', function(e) {
    var sel = window.getSelection();
    var text = sel ? sel.toString().trim() : '';
    if (text.length < 20) { btn.style.display = 'none'; return; }

    selectedText = text;
    btn.style.display = 'flex';
    btn.style.top = (e.pageY - 50) + 'px';
    btn.style.left = Math.min(e.pageX - 60, window.innerWidth - 220) + 'px';
  });

  document.addEventListener('mousedown', function(e) {
    if (e.target !== btn) btn.style.display = 'none';
  });

  btn.addEventListener('click', function() {
    var url = window.location.href;
    var twitterUrl = 'https://twitter.com/intent/tweet?text=' +
      encodeURIComponent('"' + selectedText.substring(0, 200) + '"') +
      '&url=' + encodeURIComponent(url);

    if (navigator.share) {
      navigator.share({ title: document.title, text: '"' + selectedText + '"', url: url });
    } else {
      window.open(twitterUrl, '_blank');
    }
    btn.style.display = 'none';
  });
})();

Personnaliser le partage

Pour partager sur LinkedIn à la place de Twitter, remplacez l'URL :

var linkedinUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' +
  encodeURIComponent(url) + '&summary=' + encodeURIComponent('"' + selectedText + '"');
window.open(linkedinUrl, '_blank');

Conclusion

Le partage de citation transforme vos lecteurs en amplificateurs de contenu. Cas d'usage :

  • Articles de fond avec des formulations percutantes
  • Interviews et citations d'experts
  • Pages de témoignages clients

Sélectionnez du texte dans ce paragraphe

"Le meilleur site web est celui que vos clients comprennent immédiatement. La clarté convertit mieux que la créativité." Sélectionnez cette citation pour voir apparaître le bouton de partage juste au-dessus.

Publié le 20 mai 2026

Sandro DA SILVA

Growth Marketer, expert Webflow et touche à tout. Sandro s'occupe des opérations commerciale, veille au bon déroulement des projets et s’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!