Publi√© par le 2 octobre 2014 ‚ÄĘ 36 Commentaires

Aimez-vous papoter sur internet ?

Si la réponse est oui, cette nouvelle recette va vous intéresser.

Vous avez probablement remarqu√© que les commentaires des blogs sont toujours¬†accompagn√©s d’une petite image.

Cette image, enfin cet¬†avatar, permet de¬†mieux se repr√©senter qui est l’auteur du commentaire (vous, moi, etc.).¬†Vous imaginez bien que vous me verriez diff√©remment si mon avatar √©tait une image totalement loufoque ou repr√©sentait¬†quelqu’un d’autre.

Avatar WP MarmiteDans¬†le cas de WP Marmite, j’ai opt√© pour la mascotte du blog (d’ailleurs elle n’a pas encore de nom, si vous avez une id√©e je suis preneur). Sur d’autres sites, je mets ma t√™te ou le logo du site pour lequel je r√©dige un commentaire.

Nous allons voir comment tout cela fonctionne au cours de cet article.

Mais d’abord…

Qu’est ce que Gravatar ?

Et bien oui, je vous parle d’avatar¬†mais nous n’avons pas encore vu ce qu’√©tait Gravatar.

En fait Gravatar est un service qui sert √† g√©rer ses avatars sur le web. Des sites web¬†(utilisant WordPress ou non) et¬†d’autres services peuvent les r√©cup√©rer pour ¬ę¬†humaniser¬†¬Ľ un peu plus leurs plateformes. Github, Disqus (que vous d√©couvrirez bient√īt ici) et Hootsuite les utilisent notamment.

Voici l’exemple d’une conversation avec¬†Samuel¬†(un lecteur du blog)¬†suite √†¬†l’article sur¬†les th√®mes bling bling. Vous pouvez voir que cela¬†aide √† mieux se repr√©senter qui est¬†qui.

Exemples de gravatars sur WordPress

Par extension, l’avatar (l’image) a pris le nom du service qui le g√®re. C’est pourquoi vous entendrez plus parler de gravatars que d’avatars.

Le principal avantage d’un gravatar est qu’il vous suit partout. Une fois que vous en aurez associ√© un avec votre¬†adresse email, il apparaitra √† chaque fois que vous vous servirez de cette adresse pour commenter.

Il est donc possible d’avoir plusieurs gravatars en¬†commentant avec une adresse diff√©rente.

Si votre adresse email¬†n’a pas de¬†gravatar de d√©fini, vos¬†commentaires seront accompagn√©s de l’homme myst√®re ou d’un gravatar g√©n√©r√© automatiquement par WordPress :

Gravatars par défaut dans WordPress

Avouez que cela représente moins bien qui nous sommes (à moins de vouloir rester anonyme :P).

Créer son compte gravatar en deux temps 3 mouvements

Si vous n’√™tes pas sur le web pour d√©verser des commentaires assassins en d√©sirant masquer votre identit√©, voici comment faire pour associer un gravatar √† votre adresse email.

Rendez-vous simplement sur fr.gravatar.com et cr√©ez vous un compte en cliquant sur ¬ę¬†Create Your Own Gravatar¬†¬Ľ:

Site Gravatar

Petite note au passage : Gravatar est un site √©dit√© par Automattic, la m√™me soci√©t√© qui s’occupe du d√©veloppement de WordPress. Le mec que vous voyez¬†√† l’√©cran est Matt Mullenweg,¬†le ¬ę¬†cr√©ateur¬†¬Ľ de WordPress.

J’ai mis des guillemets car WordPress est en fait bas√© sur un script nomm√© b2. Pour connaitre toute l’histoire, jetez un oeil ici et l√†.

Revenons à nos moutons, après avoir cliqué sur le bouton vous arriverez sur cette page :

Creation compte WordPress.com

Comme le laissait sugg√©rer le bouton de la page d’accueil, la traduction du site en fran√ßais n’est pas top. Malgr√© tout,¬†je ne vous recommande pas de cliquer sur le lien pour¬†acc√©der √† la version fran√ßaise car vous ne serez pas redirig√© sur Gravatar.

N’ayez crainte, je vais vous¬†dire quoi faire ūüėČ

Je vous l’ai dit tout √† l’heure, Gravatar est √©dit√© par la m√™me soci√©t√© qui¬†maintient WordPress. √Ä ce titre, tout ce dont vous avez besoin est d’un compte WordPress.com.

Pour cette recette nous allons supposer que vous n’en avez pas. Si¬†vous en avez un, cliquez sur ¬ę¬†I already have a WordPress.com account!¬†¬Ľ pour vous¬†identifier.

Continuez en inscrivant votre adresse email dans le premier champ, un identifiant dans le second et un mot de passe (compliqué, hein) dans le dernier champ.

D√®s que √ßa sera bon, cliquez sur ¬ę¬†Sign up¬†‚Üí¬†¬Ľ.

Si tout s’est bien pass√©, vous devrez arriver sur cette page (avec l'email que vous avez indiqu√© bien entendu) :

Confirmation Gravatar

Rendez-vous ensuite dans votre boite de r√©ception¬†et cliquez sur l'email d’activation envoy√© par l’√©quipe de WordPress (et Gravatar) :

Email activation Gravatar

Cliquez sur le bouton ¬ę¬†Activate Account¬†¬Ľ. Vous serez redirig√© vers la¬†page de connexion de Gravatar :

Connexion Gravatar

Cliquez sur ¬ę¬†Sign in to Gravatar¬†¬Ľ. Normalement vous devriez √™tre connect√© automatiquement.

Vous voilà désormais sur votre compte Gravatar !

Attribuer un gravatar à son adresse email (et bien le choisir)

Maintenant que vous¬†disposez d’un compte, vous allez pouvoir attribuer un avatar (enfin un gravatar) √† votre adresse email.

√Ä partir de la page principale cliquez sur ¬ę¬†Add one by clicking here!¬†¬Ľ pour ajouter votre premi√®re image :

Ajouter image Gravatar

Sachez qu’il est possible d’ajouter¬†d’autres adresses email sur votre compte Gravatar avec ¬ę¬†add a new email¬†¬Ľ (il n’y a pas besoin de cr√©er un nouveau compte¬†par¬†email).

Vous arriverez sur la page suivante :

Envoi image Gravatar

Pour cette √©tape, 4 choix s’offrent √† vous :

  1. Envoyer une image à partir de votre ordinateur
  2. Donner le lien d’une image pr√©sente sur internet (par exemple le lien d’une de vos image de profil sur les r√©seaux sociaux)
  3. Ajouter une image pr√©c√©demment envoy√©e (ne s’applique pas ici puisque nous venons de cr√©er un compte)
  4. Prendre une photo à partir de votre webcam

Pour cette recette, nous allons partir sur le cas le plus courant (√† mon avis), c’est √† dire charger une photo √† partir de votre ordinateur.

Cliquez sur ¬ę¬†My computer’s hard drive¬†¬Ľ pour arriver sur cette page :

Upload image Gravatar

Ici, c’est assez classique. Envoyez simplement votre image en cliquant sur ¬ę¬†Choisissez un fichier¬†¬Ľ puis sur ¬ę¬†Next¬†¬Ľ.

Avant d’aller plus loin, petite parenth√®se sur l’image que vous choisirez. N’oubliez pas qu’elle va vous repr√©senter publiquement. L’id√©al est de mettre une photo qui vous met √† votre avantage ou le logo de votre entreprise/site/blog.

Une fois votre image envoyée à Gravatar, vous aurez la possibilité de la redimensionner. Utilisez les coins pour choisir la zone à recadrer (le cas échéant) :

Redimensionnement Gravatar

Lorsque vous serez satisfait, cliquez sur ¬ę¬†Crop and Finish!¬†¬Ľ.

La derni√®re √©tape¬†√† accomplir est d’attribuer un classement √† votre image.

Un peu comme les films sont interdits aux moins de 12 ans, 16 ans et 18 ans, il en est de même sur les sites WordPress (cela se règle dans Réglages > Discussions).

Enfin, il y a de grandes chances que votre site soit grand public donc cliquez sur ¬ę¬†G rated¬†¬Ľ :

Classement categorie Gravatar

Et voil√†, votre adresse email est d√©sormais associ√©e avec un gravatar. Vous pouvez maintenant¬†l’afficher un peu partout¬†en laissant des commentaires sur internet.

La page d’accueil¬†de Gravatar affiche d’ailleurs¬†l’image associ√©e √† l’adresse email¬†:

Image Gravatar WordPress

D√©sormais vous pouvez ajouter d’autres adresses email et images pour¬†afficher diff√©rents gravatars. Vous pouvez aussi jouer avec les classements des publics cibles (G rated, PG rated, etc.).

Cette recette pourrait s’arr√™ter l√† mais je vais¬†vous donner 2¬†astuces qui¬†devraient vous int√©resser. La premi√®re est de…

Définir un gravatar par défaut sur votre site

En lisant ce tutoriel, vous avez¬†associ√© un gravatar √† votre adresse email. Cependant, tous les lecteurs de votre site ne l’ont forc√©ment pas fait. Du coup, ils vont avoir un gravatar par d√©faut (l’homme myst√®re ou autre chose suivant ce que vous avez d√©fini sur votre site (dans R√©glages > Discussions)).

Pour cela nous allons ajouter¬†quelques lignes de codes.¬†M√™me si cela peut vous impressionner si vous √™tes d√©butant, vous verrez que ce n’est pas si compliqu√© ūüėČ

L’id√©al est de passer par un th√®me enfant ou par un plugin de fonctionnalit√©s (j’aborderai cette seconde m√©thode¬†dans un prochain article) pour ins√©rer¬†ces lignes de code.

Dans le cas d’un th√®me enfant, ins√©rez les lignes suivantes dans le fichier functions.php :

Avec cette configuration, ce code cherchera une image nomm√©e ¬ę¬†gravatardefaut.jpg¬†¬Ľ dans le dossier ¬ę¬†images¬†¬Ľ du th√®me courant (th√®me activ√©, qu’il soit enfant ou non).¬†Veillez bien √† ce que l’image envoy√©e sur votre serveur corresponde √† l’adresse indiqu√©e (modifiez l’adresse de destination suivant vos besoins).

Remplacez √©galement ¬ę¬†WP Marmite¬†¬Ľ par le nom de votre site.

Sauvegardez votre fichier et rendez-vous dans Réglages > Discussions pour activer le nouveau gravatar par défaut :

Gravatar défaut WordPress

Vos lecteurs¬†sans gravatar en auront d√©sormais un d’attribu√© d’office ūüėČ

Passons √† la seconde astuce de l’article qui vous aidera √† :

Mettre les gravatars en cache

Comme nous l’avons vu, les gravatars sont affich√©s sur votre site par le service Gravatar.

Lorsqu’un article¬†contenant des commentaires est affich√© sur votre site, des requ√™tes sont faites vers le site Gravatar pour r√©cup√©rer les gravatars associ√©s aux adresses emails de commentateurs, vous me suivez ?

Sur les petits articles, cela ne pose pas vraiment de problème mais sur des articles avec des dizaines voire des centaines de commentaires, la vitesse de chargement peut durer quelques secondes.

Pour corriger cela, je vous recommande le plugin¬†FV Gravatar Cache qui va, comme son nom l’indique, mettre en cache les gravatars de vos¬†commentateurs directement sur votre site.

Quelques paramètres sont disponibles dans Réglages > FV Gravatar Cache mais les paramètres par défaut sont amplement suffisants.

Et voil√†,¬†un probl√®me de plus de r√©gl√© ūüėČ

Conclusion

Vous savez désormais attribuer un gravatar à une adresse email, ce qui vous permettra de mieux vous représenter (ou votre organisation, site, etc.) sur internet.

N’oubliez pas que tous vos √©changes seront public et contribueront √† construire votre r√©putation. √Ä vous de voir ce qui est appropri√© ou non de dire ūüėČ