Tutoriel : comment afficher un badge Google Plus tiers au survol d'un lien de profil auteur dans vos articles ?

En parcourant de nombreux articles rédigés par des utilisateurs assidus et chevronnés de Google Plus, j'ai constaté que lorsqu'il était fait mention d'un profil Google Plus (autre que celui du rédacteur) au sein d'une page html, quasiment systématiquement, le lien vers le profil n'affichait pas de badge volant lors du survol de l'url.
Particulièrement pratique, cette fonctionnalité permet de s'abonner à un profil ou une page Google Plus sans pour autant avoir à quitter l'article en cours de lecture.
Nous, utilisateurs du réseau social Google Plus, feu ville fantôme, sommes dorénavant rodés à la mention de profil via la plate-forme sociale de Google... Rien de plus simple vous me direz ! Il suffit pour ce d'ajouter un + suivi du nom du profil Google Pus et comme par magie, un menu contextuel dynamique va alors s'afficher et permettre une sélection confortable et ergonomique du profil recherché...

En effet, à moins que vous ne bloguiez en utilisant la plateforme Blogger (ce qui est le cas de mon blog webmarketing), auquel cas le système d'appel à un profil Google Plus est en tout point identique à celui de la Google Plus ou de Gmail d'ailleurs (voir capture d'écran ci- contre), la mise en place de cet appel à un badge externe suit quelques principes à connaître et qui semble d'ailleurs paradoxalement méconnus de l'univers des blogueurs !

Car bizarrement on ne retrouve pas cette information en ligne sur la page dédiée à la mise en place des badges Google Plus !

Vous allez me dire que je ne vous présente pas une nouveauté majeure du système, je vous l'accorde !

Toutefois, sa mise en place me semble intéressante à plusieurs titres :

• Primo, car le système de badge nous est désormais familier (ha ces habitudes...) 
• Deuzio, car en permettant l'abonnement direct via le badge à un profil Auteur G+ que vous avez cité dans votre article, vous allez éviter que votre lecteur ne le quitte en pleine lecture ! 
• Tertio, car vous allez permettre aux profils que vous mentionnez de gagner des abonnés... Et on est bien là dans l'essence du web, du LinkG+baiting !

Je vous propose donc de parcourir cet article qui détaille notamment les deux point clés à connaître, pour bénéficier de l'apparition d'un badge de profil Auteur ou Publisher tiers au survol d'une url G+

Etape N°1 : implémentation de l'appel au fichier javascript Plusone

Etant donné que vous avez intégré le bouton Plusone sur votre blog ou votre site, vous avez nécessairement implémenté cet appel au script javascript qui ressemble à s'y méandre à ce petit bout de code : http://apis.google.com/js/plusone.js

Etape N°2 : insérez l'ID numérique du profil Google Plus

Et oui, c'est à mon sens une bizarrerie du système proposé par Google car en effet, les vanity urls s'étant très largement répandues depuis la mise en place de la fonctionnalité de personnalisation de profils Google Plus, il apparaît tout de même surprenant qu'elles ne permettent pas l'appel dynamique au badge !!

Testez cette requête et vous allez paradoxalement constaté que Google a pourtant bien indexé mon url friendly dans son index primaire (fort heureusement).

Alors si vous voulez pouvoir afficher au survol le badge d'un profil vers lequel vous avez fait un lien sur votre site web, et bien il va falloir utiliser l'ID numérique sans quoi cela ne fonctionnera pas !!
Si ce n'est toutefois que le lien sera tout à fait opérationnel comme tout autre lien http par ailleurs...

Je vous vois déjà venir... Vous avez évidemment réalisé cette manipulation des dizaines de fois et pour autant force est de constater que le badge en tant qu'élément volant ne s'affiche toujours pas.. Alors que manque t-il à notre bout de code minimaliste pour que la magie opère !

Et bien l'étape numéro 3 que voici...

Etape N°3 : ajoutez la classe "g-profile" au lien de profil Google Plus 

Et oui, c'est aussi simple que cela !!

En ajoutant la classe "g=profile" au lien qui pointe vers le profil Google Plus tiers que vous avez intégré à votre blog, vous allez bénéficier de l'affichage du widget au survol du lien (qu'il s'agisse d'un profil auteur ou publisher d'ailleurs).

Etape N°4 : on vérifie que le badge s'affiche au survol du lien Google Plus 

Il est l'heure de vérifier que l'implémentation simpliste que je porte à votre connaissance est bien fonctionnelle.

Mais oui, cela fonctionne (vous en doutiez !)... Voici donc un petit tutoriel simple et efficace pour gagner en efficacité lors de la mise en place de liens de profil G+ tiers dans vos articles de blog (ou sites web).

Comme je le faisais remarquer en début d'article, cela devrait également vous permettre de garder vos lecteurs un peu plus longtemps sur votre blog en leur évitant de devoir le quitter pour s'abonner au profil Google Plus auquel vous faites référence...

Je vous propose en guise de conclusion de faire un test en réel en mettant à l'honneur deux blogueuses aux billets forts sympathiques. Pour Sandrine, j'ai utilisé l'url Friendly en ajoutant la classe "g-profile" +Khou Sandrine et pour Céline, j'ai réalisé la même manipulation mais en implémentant l'ID numérique de son profil  +Céline Albarracin

Survolez chaque url... Alors, convaincu(e) du résultat !

J'espère que ce petit tuto vous aura été utile :)

Bonne implémentation, +Christophe

A partager sans modération sur Google Plus notamment mais pas que :)