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
| Comportement | Déclencheur | Action |
|---|---|---|
| Apparition du bouton | Sélection > 20 caractères | Bouton positionné près de la sélection |
| Partage mobile | Web Share API disponible | Ouvre le menu natif de partage |
| Partage desktop | Web Share API indisponible | Ouvre Twitter avec la citation pré-remplie |
| Disparition | Clic ailleurs | Bouton 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.
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.










.avif)




