ThéorieFonctionnalitésAvancé

Créer des boutons de partage sur Blogger - Les codes types


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Créer des boutons de partage sur Blogger
Fabriquer ces propres boutons de partage personnalisés devrait être un simple jeu d'enfant. Pourtant sur Blogger, la tâche s'avère parfois difficile.
Je vous dresse un petit rappel des règles élémentaires de bases du html et des encodages dans les modèles Blogger, ainsi qu'une petite liste des url types de vos réseaux favoris.

Fonctionnement d'un bouton standard

Chaque réseau social présente un code standard pour installer un bouton sur un site web qui permet de partager une url.
La première réaction des utilisateurs est de recopier ce code sans se poser la moindre question, tout en faisant confiance à ceux qui l'on mis en ligne.
Ils n'ont pas tort, mais Blogger n'est pas un site web et ne fonctionne pas comme tel. D'où l'appellation "Blog". (D'ailleurs, le prochain qui appelle son blog un site, je le renvoie vers le forum de Google Site ;) )

Quelque soit le réseau, il faut joindre l'url de la page à partager. Hors, si on ajoute ce code tel quel sur Blogger, par exemple dans un gadget HTML/JS, l'url de la page ne peut pas être mentionnée explicitement, à moins de faire appel à javascript.

Généralement, les codes des boutons se présentent sous forme de lien :

<a href="https://lereseaudetoto.com/share?uri=URL CANONIQUE DE LA PAGE">Partager sur le réseau de Toto</a>

En rouge : L'url de base du réseau social.
En bleu : L'url de la page à partager.
En vert : Un texte ou une image représentant le réseau.


La seule solution consiste dès lors a adapter le code et à l'injecter directement dans le code XML du modèle en utilisant les données appropriées.

Il existe au moins 2 méthodes pour associer la bonne url au bon bouton :

  1. Dans le code du gadget Blog, dans une boucle des articles pour les articles. Par exemple, dans l'inclusion post.
  2. En dehors d'une boucle d'articles, pour tous les types de page.


Avec les données intégrées dans le code XML du bouton, cela donnerait :

<a expr:href='"https://lereseaudetoto.com/share?uri=" + data:XXX.canonical'>Partager sur le réseau de Toto</a>

Les étiquettes peuvent être injectées directement dans un attribut d'une balise XML. L'attribut doit être précédé du préfixe expr: afin d'indiquer à Blogger que la balise contient une expression Blogger.
Lorsqu'un attribut contient une donnée combinée à des valeurs "texte", les valeurs "texte" devront être encadrées de guillemets échappés &quot; et pour faire la liaison avec la donnée, il faut employer l'opérateur de jonction +.


Parfois, certains réseaux comme Twitter, Linkedin, Pinterest, ont besoin de données supplémentaires (facultatives ou non), comme par exemple, un titre, un résumé, une image. Dans pareil cas, on peut intégrer plusieurs données :

<a expr:href='"https://lereseaudetoto.com/share?uri=" + data:XXX.canonical + "&amp;title=" + data:XXX.XXX.escaped + "&amp;content=" + data:XXX.XXX.escaped + "&amp;image=" + data:XXX.XXX'>Partager sur le réseau de Toto</a>


Pour le reste, il suffit d'appliquer quelques règles basiques du langage HTML.
Par exemple, pour ouvrir dans une nouvelle fenêtre, il faut ajouter l'attribut target='_blank' :

<a expr:href='"https://lereseaudetoto.com/share?uri=" + data:XXX.canonical' target='_blank'>Partager sur le réseau de Toto</a>


Pour ouvrir dans une fenêtre pop-up, faire appel à la fonctionnalité javascript onclick, mentionner les dimensions et définir quelques caractéristiques d'affichage a attribuer à la fenêtre :

<a expr:href='"https://lereseaudetoto.com/share?uri=" + data:XXX.canonical' onclick='javascript:window.open(this.href, "popup", "toolbar=no, location=no, statusbar=yes, menubar=no, scrollbars=yes, width=600, height=600"); return false;'>Partager sur le réseau de Toto</a>


Remplacer le texte par une image :

<a expr:href='"https://lereseaudetoto.com/share?uri=" + data:XXX.canonical'><img src='URL_IMAGE' width='20px' height='20px' border='0' alt=''/></a>


Voilà donc en gros les quelques règles élémentaires pour construire des boutons intégrés dans le code HTML du modèle.
Pour ceux qui veulent s'inscrire sur https://lereseaudetoto.com/, n'insistez pas. Ce réseau fictif n'existe pas ;)




Quelles données peut-on injecter ?

La bibliothèque des données est suffisamment bien garnie pour permettre à chacun de développer son modèle avec des spécifications personnelles. Devant cette immense palette, il faut faire un choix. Voici une petite sélection des données pouvant être utilisées pour la création de boutons :


Les données pouvant être utilisées uniquement dans le gadget blog, dans une boucle d'articles :

Étiquettes Description
data:post.titleTitre de l'article.
data:post.authorNom de l'auteur de l'article.
data:post.url.canonicalURL canonique de l'article.
data:post.thumbnailUrlURL de la vignette de l'article.
data:post.firstImageUrlURL de la première image de l'article.
data:post.snippetRésumé de l'article (100 caractères)


Les données pouvant être utilisées dans l'ensemble du code d'un modèle (y compris, boucle d'articles dans le gadget blog) :

Étiquettes Description
data:blog.titleLe titre du blog
data:blog.pageTitleLe titre de la page courante.
Il s'agit souvent du titre du blog, mais ce titre peut contenir des informations complémentaires selon le type de la page.
data:blog.pageNameLe nom attribué à la page courante.
data:blog.url.canonicalURL canonique de la page courante.
data:blog.homepageUrl.canonicalURL canonique de la page d'accueil du blog.
data:blog.metaDescriptionDescription du blog ou de l'article.
En savoir plus.
data:view.descriptionDescription du blog ou résumé de l'article.
data:blog.googleProfileUrlURL du profil Google+ de l'unique administrateur du blog.
data:blog.postImageThumbnailUrlVignette de la page courante.
Dimension : 72 pixels.


Quelques url types

En reprenant quelques données globales du blog, associées aux url des réseaux, vous obtiendrez des résultats proches de ceux-ci :


Google+
<a expr:href='"https://plus.google.com/share?url=" + data:blog.url.canonical' target='_blank' title='Partager sur Google+'>Partager sur Google+</a>

Facebook
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url.canonical' target='_blank' title='Partager sur Facebook'>Partager sur Facebook</a>

Twitter
<a expr:href='"https://twitter.com/share?url=" + data:blog.url.canonical + "&amp;amp;text=" + data:blog.pageTitle.escaped' target='_blank' title='Partager sur Twitter'>Partager sur Twitter</a>

Pinterest
<a expr:href='"http://pinterest.com/pin/create/bookmarklet/?media=" + data:blog.postImageThumbnailUrl + "&amp;amp;url=" + data:blog.url.canonical + "&amp;amp;title=" + data:blog.pageTitle.escaped + "&amp;amp;is_video=false&amp;amp;description=" + data:view.description.escaped' target='_blank' title='Partager sur Pinterest'>Partager sur Pinterest</a>

LinkedIn
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=" + data:blog.url.canonical + "&amp;amp;title=" + data:blog.pageTitle.escaped' target='_blank' title='Partager sur LinkedIn'>Partager sur LinkedIn</a>

StumbleUpon
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url.canonical + "&amp;amp;title=" + data:blog.pageTitle.escaped' target='_blank' title='Partager sur StumbleUpon'>Partager sur StumbleUpon</a>
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire