Ajouter des boutons de partage sociaux à Blogger avec AddThis
Important : sauvegardez toujours une copie de votre modèle Blogger avant d’éditer le HTML. Une erreur dans le modèle peut rendre votre blog inaccessible si elle n’est pas corrigée.
Pourquoi remplacer les boutons par défaut
Les boutons par défaut de Blogger sont simples à activer, mais ils ont trois limites fréquentes :
- On ne peut pas choisir précisément quels réseaux afficher.
- Ils n’intègrent pas toujours les boutons Facebook “Like” ou Twitter “Tweet” configurés avec votre compte.
- Le style est souvent rigide et ne correspond pas toujours au design du blog.
Définition rapide : AddThis est un service tiers qui fournit des widgets de partage personnalisables et compatibles avec de nombreux réseaux sociaux.
Aperçu du processus (méthodologie rapide)
- Créer un compte AddThis et choisir un style de bouton.
- Récupérer le code HTML/JS fourni par AddThis.
- Coller le code dans le modèle Blogger au bon emplacement.
- Ajuster les attributs (titre, URL, via pour Twitter).
- Tester sur plusieurs articles et appareils.
Étapes détaillées pour configurer AddThis
- Inscrivez-vous sur AddThis et connectez-vous.
- Sélectionnez “Get AddThis” (ou l’équivalent) et choisissez un style.
Alt : Interface AddThis montrant la sélection de styles de boutons.
- Sous “Customize”, choisissez “Website” comme plateforme pour obtenir le code complet.
Alt : Écran de personnalisation AddThis avec options de plateforme et style.
Copiez le code HTML/JS généré par AddThis.
Dans Blogger, allez dans Mise en page (Design) puis Modifier le HTML pour coller le code. Activez “Expand Widget Templates” si nécessaire.
Alt : Éditeur HTML de Blogger avec l’option pour développer les modèles de widgets.
- Collez le code AddThis à l’emplacement souhaité. Beaucoup d’auteurs placent le widget sous la balise qui contient le corps du billet (par exemple data:post.body ou une balise équivalente) pour que les boutons s’affichent immédiatement après le contenu.
Alt : Extrait du modèle Blogger montrant où insérer le code AddThis.
- Enregistrez le modèle et vérifiez le rendu sur un article.
Alt : Aperçu d’un article avec boutons de partage AddThis intégrés.
Code type AddThis (exemple)
Ci-dessous un exemple générique d’intégration AddThis. Remplacez les identifiants ou attributs par ceux fournis par votre compte AddThis.
Explication courte : le script charge la librairie AddThis. Les balises
Personnalisation importante
- expr:addthis:title=’data:post.title’ : insère automatiquement le titre du billet dans le partage.
- expr:addthis:url=’data:post.url’ : attache l’URL permanente du billet.
- tw:via=’votre_compte’ : pour que les tweets citent votre identifiant Twitter au lieu de @AddThis.
Exemple d’élément Twitter avec attribution :
Contenu partagé (exemple de résultat)
Un partage Twitter pourrait ressembler à :
Titre du billet http://votre.url via @votre_compte
Le titre, l’URL et l’attribution apparaissent automatiquement si vous avez configuré les attributs ci‑dessus.
Cas où AddThis peut échouer ou être inadapté
- Sites complètement hors-ligne ou sans accès à des scripts tiers.
- Politiques de confidentialité strictes qui interdisent les scripts de suivi tiers.
- Si vous avez besoin d’un contrôle total sans dépendance externe (préférez alors des boutons maison).
Alternatives :
- Intégration manuelle via les boutons officiels Facebook et Twitter (sans AddThis).
- Autres services similaires : ShareThis, AddToAny.
Checklist par rôle
Rédacteur / Auteur
- Vérifier l’affichage des boutons après publication.
- Tester le partage sur Facebook et Twitter.
Développeur / Intégrateur
- Sauvegarder le modèle avant modification.
- Coller le code dans la section appropriée et valider le HTML.
- Minifier/optimiser si besoin pour performance.
Responsable vie privée / RGPD
- Vérifier les politiques de suivi d’AddThis et ajouter une mention dans la politique de confidentialité.
- Prévoir un consentement pour les scripts tiers si nécessaire.
Snippets et raccourcis (cheat sheet)
- Ajouter le titre dynamique : expr:addthis:title=’data:post.title’
- Ajouter l’URL dynamique : expr:addthis:url=’data:post.url’
- Forcer attribution Twitter : tw:via=’votre_compte’
- Bouton Like Facebook : class=”addthis_button_facebook_like” fb:like:layout=”button_count”
Arbre de décision pour choisir emplacement et style
flowchart TD
A[Souhaitez-vous des boutons visibles dès l'ouverture ?] -->|Oui| B[Placez-les en haut de l'article]
A -->|Non| C[Placez-les en bas de l'article]
B --> D{Publiez-vous souvent ?}
C --> D
D -->|Oui| E[Mode compact + compteur discret]
D -->|Non| F[Mode large avec icônes sociales]Critères d’acceptation (Критерии приёмки)
- Les boutons s’affichent sur au moins trois navigateurs (Chrome, Firefox, Edge).
- Le partage conserve le titre et l’URL corrects.
- Les tweets partagés contiennent le paramètre via si configuré.
Glossaire (1 ligne par terme)
- AddThis : service tiers fournissant des boutons de partage social.
- Widget : composant réutilisable intégré au site.
- tw:via : attribut qui fournit un identifiant Twitter pour l’attribution.
Résumé et recommandations
- AddThis offre un moyen rapide et flexible d’ajouter des boutons sociaux à Blogger.
- Personnalisez les attributs (titre, url, via) pour améliorer la qualité des partages.
- Pensez à la vie privée : informez vos visiteurs et gérez le consentement si nécessaire.
Notes : testez toujours sur mobile et bureau. Commencez avec un style conservateur, puis ajustez après analyse des partages et retours lecteurs.
Matériaux similaires
Installer et utiliser Podman sur Debian 11
Guide pratique : apt-pinning sur Debian
OptiScaler : activer FSR 4 dans n'importe quel jeu
Dansguardian + Squid NTLM sur Debian Etch
Corriger l'erreur d'installation Android sur SD
