Populaire ce mois

Ajouter des boutons au menu de partage

Gadget TypeGadget VersionLayouts Version
Blog
FeaturedPost
PopularPosts
2
3
Nous vous rappelons que lorsque vous accédez à ce blog, vous signez automatiquement un accord avec Blogger Code.
Consultez les CGU.


Blogger - Ajouter des boutons dans le menu de partage dans les thèmes Blogger Layouts Version 3
Nous savons déjà qu'il est possible de modifier le menu des boutons de partage dans les thèmes Blogger de la 3e génération, mais une autre question subsiste. Peut-on ajouter d'autres services qui ne sont pas fournis par défaut ?
Encore une fois, la réponse est oui.
Si vous avez réussi avec brio la première épreuve, nul doute que pour vous, ajouter de simples boutons ne sera qu'une formalité qui ne fera que confirmer que vous êtes un vrai gladiateur du XML Blogger.
Évidemment, nous n'allons pas vous proposer une palette de nouveaux boutons (ça serait bien trop facile, hein !), mais uniquement un exemple avec le réseau LinkedIn.


Étape 1 : Ajouter une icône

L'icône SVG est indispensable, non pas pour l'affichage, mais pour faire travailler l'ensemble. Si elle est n'est pas définie, le menu ne travaillera plus. Et comme vous avez été sage, on vous fourni gratuitement le fichier. Sympa non ?

Commencez par ouvrir l'éditeur XML de votre thème.

  • Tableau de bord
  • Thème
  • Modifier le code HTML

Repérez le marquage commun (si nécessaire utilisez la boîte de recherche de l'éditeur).

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>

Juste après, vous ajoutez cette nouvelle inclusion :

<b:includable id='linkedinIcon'>
  <svg expr:class='"svg-icon-24 " + data:iconClass' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
    <path d='M 20 2 L 4 2 C 2.898438 2 2 2.898438 2 4 L 2 20 C 2 21.101563 2.898438 22 4 22 L 20 22 C 21.101563 22 22 21.101563 22 20 L 22 4 C 22 2.898438 21.101563 2 20 2 Z M 8.101563 18 L 5 18 L 5 9.398438 L 8.101563 9.398438 Z M 6.5 8.398438 C 5.601563 8.398438 5 7.800781 5 7 C 5 6.199219 5.601563 5.601563 6.601563 5.601563 C 7.5 5.601563 8.101563 6.199219 8.101563 7 C 8.101563 7.800781 7.5 8.398438 6.5 8.398438 Z M 19 18 L 15.898438 18 L 15.898438 13.300781 C 15.898438 12 15.101563 11.699219 14.800781 11.699219 C 14.5 11.699219 13.5 11.898438 13.5 13.300781 C 13.5 13.5 13.5 18 13.5 18 L 10.398438 18 L 10.398438 9.398438 L 13.5 9.398438 L 13.5 10.601563 C 13.898438 9.898438 14.699219 9.398438 16.199219 9.398438 C 17.699219 9.398438 18.898438 10.601563 18.898438 13.300781 L 18.898438 18 Z '/>
  </svg>
</b:includable>




Étape 2 : Ajouter un bouton onclick

Les boutons fournis par défaut disposent d'une url de partage spécifique et d'une fonction js pour ouvrir la boîte de dialogue. Ce qui n'est pas le cas pour les autres services qu'on va ajouter. Par conséquent, nous devons utiliser la traditionnelle fonction js onclick que l'on intègrera dans le cadre qui accueillera le bouton. Pour arriver à obtenir ce résultat, nous allons réécrire une nouvelle inclusion.

Restez dans l'éditeur XML et repérez le gadget Blog à l'aide du bouton Accéder aux gadgets.
Note : Vous pouvez également choisir les widgets FeaturedPost ou/et PopularPosts pour apporter les modifications dans les menus de partage de ces gadgets.

Juste après la balise <b:widget >, vous ajoutez cette nouvelle inclusion :

<b:includable id='sharingButton'>
  <b:if cond='data:platform.isCustom'>
    <span expr:aria-label='data:platform.shareMessage' expr:class='"sharing-platform-button sharing-element-" + data:platform.key' expr:title='data:platform.shareMessage' role='menuitem' tabindex='-1'>
<b:attr cond='data:platform.key == "linkedin"' expr:value='"window.open(\"https://www.linkedin.com/shareArticle?mini=true&amp;amp;url=" + data:originalUrl + "&amp;amp;title=" + data:post.title.escaped + "&amp;amp;summary=" + data:post.snippets.short.escaped + "\", \"linkedIn\", \"width=600, height=500, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no\"); return false;"' name='onclick'/>
<b:include name='sharingPlatformIcon'/> <span class='platform-sharing-text'><data:platform.name/></span> </span> <b:else/> <b:include name='super.sharingButton'/> </b:if> </b:includable>

La base pour accueillir votre nouveau bouton LinkedIn est désormais prête. Il ne reste plus qu'à raccorder. Passez à l'étape 3.




Étape 3 : Raccorder avec les autres boutons

Rien de plus simple. Retournez sur cette publication : Modifier le menu des boutons de partage, et suivez les 2 étapes.

Lorsque vous arriverez à la 2e étape, vous ajoutez cet objet à l'endroit mentionné.
Objet - LinkedIn
{ name: "LinkedIn", key: "linkedIn", shareMessage: "Partager sur LinkedIn", isCustom: true }

Enregistrez et admirez votre travail.




Combien de boutons puis-je ajouter dans mon menu ?

Le nombre maximum de boutons varie en fonction de votre consommation de jetons dont la limite est fixée à 39 jetons.
  • Comptage :
    • 1 jeton par objet
    • 1 jeton par item dans l'objet
Par exemple: le bouton LinkedIn que nous avons ajouté précédemment consomme 5 jetons : 1 jeton pour l'objet + 4 jetons pour les items.
Comme tous les boutons sont presque similaires, vous pouvez en ajouter au moins 7 (39/5=7.8). Au-delà, le menu ne travaillera plus.

Fiches populaires cette semaine

Facebook : Bouton partager [Share button]