Ajouter

Lorem ipsum

Lorem ipsum

A
A
A
Easter egg

6 vues

3 min

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');

bon à savoir

La Web Share API est disponible sur mobile (iOS Safari, Android Chrome) et sur certains navigateurs desktop récents. Sur les navigateurs qui ne la supportent pas, le fallback Twitter s'active automatiquement. Pour détecter le support : if (navigator.share) { /* API dispo */ } else { /* fallback */ }.

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.

bon à savoir

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Publié le

Ces tutoriels pourraient vous intéresser

tutoriels similaires

SEO / GEO

5 min lecture

5 vues

Comment faire une redirection sur Webflow ? (2026) ?

Mis à jour le 19.12.2025 par Sandro DA SILVA

SEO / GEO

5 min lecture

5 vues

Ajouter des données structurées à votre site Webflow ?

Mis à jour le 21.08.2025 par Sandro DA SILVA

No-code

5 min lecture

5 vues

Comment obfusquer un lien dans Webflow ?

Mis à jour le 23.04.2025 par Sandro DA SILVA

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

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

Alexandre

Max

Enora

Bryan

Cannelle

Tiphaine

Vous allez :heart: notre collaboration...