Ajouter des boutons au menu de partage

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.

Autres tutos

• Peut-on trier les tableaux de nombres ?
• Comment contourner le changement automatique du type d'une donnée dans une opération XML Blogger ?
• Modifier le menu des boutons de partage
• Ajouter des boutons au menu de partage
• Une pagination automatique avec le gadget Pages
• Favicons multi-sets : icon, apple-touch-icon et msapplication
• Masquer des éléments des thèmes dynamiques
• Créer des sous-catégories dans le gadget Libellés
• Une pagination automatique avec le gadget Libellés
• Filtrer les libellés dans les articles
• Créer un sélecteur d'articles
• Ajouter son blog au module de recherche Firefox
• inReplyTo : Développer un module de commentaires avec réponses