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