Partage d'article : mail, réseaux sociaux, copie de lien #47

New Issue

2026-05-13T22:10:07Z

cedricAbonnel commented

2026-05-13 22:10:07 +00:00

Contexte

Aucun mécanisme de partage n'est proposé sur la page d'article. L'URL canonique et les métadonnées Open Graph sont déjà en place (/post/{slug}, og:title, og:image, og:description), ce qui rend l'implémentation directe.

Comportement souhaité

Ajouter un bloc « Partager » discret sur la page d'article, proposant :

Cible	Implémentation
Mail	`mailto:?subject={titre}&body={url}`
X / Twitter	`https://x.com/intent/tweet?text={titre}&url={url}`
LinkedIn	`https://www.linkedin.com/sharing/share-offsite/?url={url}`
Mastodon	`https://mastodon.social/share?text={titre}+{url}` (instance généraliste en fallback)
Copier le lien	Bouton JS qui copie l'URL dans le presse-papier (feedback visuel « Copié ! »)
Web Share API	Si `navigator.share` est disponible (mobile), afficher un bouton « Partager » natif qui remplace ou complète les boutons ci-dessus

Contraintes

Zéro script tiers : toutes les cibles sont des liens <a href="..." target="_blank" rel="noopener noreferrer"> — pas de SDK Facebook, Twitter Widget, etc. Aucun cookie ou pixel de tracking.
CSP : le blog applique script-src 'self'. Le JS pour la Web Share API et le clipboard doit être dans un fichier dédié public/assets/js/share.js, chargé avec defer (pas de script inline).
L'URL partagée est toujours l'URL canonique absolue (APP_URL + /post/{slug}).

Placement

En bas du corps de l'article, après le contenu, avant la section commentaires — dans templates/post_view.php.

Exemple de structure HTML :

<div class="share-bar">
  <span class="share-bar-label">Partager</span>
  <a class="share-btn" href="mailto:?...">✉ Mail</a>
  <a class="share-btn" href="https://x.com/intent/tweet?...">𝕏</a>
  <a class="share-btn" href="https://linkedin.com/...">in</a>
  <a class="share-btn" href="https://mastodon.social/share?...">🐘</a>
  <button class="share-btn" id="share-copy">🔗 Copier</button>
  <button class="share-btn" id="share-native" hidden>↗ Partager</button>
</div>

Fichiers concernés

templates/post_view.php — insérer le bloc share après card-body
public/assets/js/share.js — Web Share API + clipboard (nouveau fichier)
public/assets/css/ ou styles inline dans le layout — styles .share-bar / .share-btn

Non concerné

Articles masqués ou brouillons : le bloc share n'est affiché que si l'article est publié et visible.
Aucune route côté serveur nécessaire (tout est client-side ou liens directs).

Migré depuis varlog#62

## Contexte Aucun mécanisme de partage n'est proposé sur la page d'article. L'URL canonique et les métadonnées Open Graph sont déjà en place (`/post/{slug}`, `og:title`, `og:image`, `og:description`), ce qui rend l'implémentation directe. ## Comportement souhaité Ajouter un bloc « Partager » discret sur la page d'article, proposant : | Cible | Implémentation | |-------|----------------| | **Mail** | `mailto:?subject={titre}&body={url}` | | **X / Twitter** | `https://x.com/intent/tweet?text={titre}&url={url}` | | **LinkedIn** | `https://www.linkedin.com/sharing/share-offsite/?url={url}` | | **Mastodon** | `https://mastodon.social/share?text={titre}+{url}` (instance généraliste en fallback) | | **Copier le lien** | Bouton JS qui copie l'URL dans le presse-papier (feedback visuel « Copié ! ») | | **Web Share API** | Si `navigator.share` est disponible (mobile), afficher un bouton « Partager » natif qui remplace ou complète les boutons ci-dessus | ## Contraintes - **Zéro script tiers** : toutes les cibles sont des liens `<a href="..." target="_blank" rel="noopener noreferrer">` — pas de SDK Facebook, Twitter Widget, etc. Aucun cookie ou pixel de tracking. - **CSP** : le blog applique `script-src 'self'`. Le JS pour la Web Share API et le clipboard doit être dans un fichier dédié `public/assets/js/share.js`, chargé avec `defer` (pas de script inline). - L'URL partagée est toujours l'URL canonique absolue (`APP_URL + /post/{slug}`). ## Placement En bas du corps de l'article, après le contenu, avant la section commentaires — dans `templates/post_view.php`. Exemple de structure HTML : ```html <div class="share-bar"> <span class="share-bar-label">Partager</span> <a class="share-btn" href="mailto:?...">✉ Mail</a> <a class="share-btn" href="https://x.com/intent/tweet?...">𝕏</a> <a class="share-btn" href="https://linkedin.com/...">in</a> <a class="share-btn" href="https://mastodon.social/share?...">🐘</a> <button class="share-btn" id="share-copy">🔗 Copier</button> <button class="share-btn" id="share-native" hidden>↗ Partager</button> </div> ``` ## Fichiers concernés - `templates/post_view.php` — insérer le bloc share après `card-body` - `public/assets/js/share.js` — Web Share API + clipboard (nouveau fichier) - `public/assets/css/` ou styles inline dans le layout — styles `.share-bar` / `.share-btn` ## Non concerné - Articles masqués ou brouillons : le bloc share n'est affiché que si l'article est publié et visible. - Aucune route côté serveur nécessaire (tout est client-side ou liens directs). --- *Migré depuis [varlog#62](https://git.abonnel.fr/cedricAbonnel/varlog/issues/62)*

cedricAbonnel referenced this issue from cedricAbonnel/varlog

2026-05-13 22:10:08 +00:00

Partage d'article : mail, réseaux sociaux, copie de lien #62

cedricAbonnel closed this issue

2026-05-16 08:57:19 +00:00

cedricAbonnel referenced this issue from a commit

2026-05-16 12:06:32 +00:00

feat : barre de partage articles + déduplication images uploadées (v1.6.20)

Sign in to join this conversation.