Comment créer son propre blog: choisir un hébergeur, choisir le nom, écrire son premier article...

lundi 19 mai 2014

Twitter Cards sur Blogger

Twitter Cards pour Blogger permet d'attacher des informations supplémentaires à vos tweets de façon automatique.

Ces informations supplémentaires peuvent se présenter sous forme de photo, vidéo, résumé d'un article...

Si cela rehausse certainement l'information disponible sur Twitter, il faut savoir que cela ne change pas le tweet lui-même, cela attache seulement une "carte" sur laquelle le lecteur doit cliquer pour voir le contenu.

C'est déjà un pas en avant pour avoir un contenu plus riche au niveau visuel sur Twitter. Même si, dans un monde idéal, on préférerait bien sûr que le tweet affiche immédiatement photo, vidéo, résumé...

Attention: à ne pas confondre avec les photos qu'on peut envoyer directement sur Twitter et qui s'affichent directement. Mais alors vous ne pouvez pas ajouter le lien vers l'article, résumé etc...

Modèles disponibles:

  • Résumé (summary): c'est la carte par défaut avec titre, description, vignette et compte Twitter
  • Résumé avec grande image (summary_large_image): pareil que le précédent mais avec une grande photo
  • Photo (photo): seulement une photo
  • Galerie (gallery): une collection de 4 photos
  • Produit (product): une carte optimisée pour les détails d'un produit
  • Player (player): une carte pour video/audio/media
  • Application (app): une carte détaillant une app mobile avec téléchargement 

Procédure:

C'est une procédure en 3 étapes:
  1. installer le code Twitter Cards dans votre modèle (template) sur Blogger
  2. tester la carte sur Twitter dev
  3. demander la validation à Twitter

Remarques:

  • les Twitter Cards sont valables pour 1 seul domaine. Comme Blogger adapte le nom de domaine à votre pays ( extensions .com, .fr, .be, .ca...), il faut faire un choix et prendre le même nom de domaine que celui avec lequel vous autopubliez (avec Feedburner par exemple)
  • si vous changez le format de la carte (de summary à summary_large_image par exemple), il faut redemander la validation à Twitter
  • vous ne verrez pas le résultat immédiatement: après la validation, il faut entre 24h et 48h pour voir apparaître les cartes sur vos tweets
  • quand c'est installé et validé, c'est valable pour tous les tweets publiés avant la manipulation, il n'est donc pas nécessaire de renvoyer vos tweets pour voir apparaître la carte
Allons-y...

1. Installer le code Twitter Cards dans Blogger:


<!--TWITTER CARD CODE BEGIN-->
<meta name='twitter:site' content='@TWITTERNAME'/>
<b:if cond='data:post.firstImageUrl'>
   <meta name='twitter:card' content='summary_large_image'/>
   <meta name='twitter:image' expr:content='data:post.firstImageUrl'/>
<b:else/>
   <meta name='twitter:card' content='summary'/>
   <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
   </b:if>
</b:if>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta name='twitter:description' expr:content='data:post.snippet'/>
<b:else/>
   <meta name='twitter:description' content='De mooiste kamerplanten'/>    
</b:if>
<!--TWITTER CARD CODE END-->


Ligne 1: remplacez @TWITTERNAME par votre identifiant Twitter
Ligne 3: remplacez photo par le modèle de carte souhaité (summary, summary_large_image...)

2. Allez dans Modèle et sauvegarder une copie de votre modèle (Sauvegarder/restaurer en haut à droite).


3. Modifier le code HTML
4. Chercher la ligne <b:includable id='post' var='post'> et coller le code Twitter Cards à la ligne suivante
5. Enregistrer le modèle


2. Tester la carte sur Twitter dev:

1. Rendez-vous sur Twitter Cards validator
2. Connectez-vous avec votre compte Twitter
3. Cliquez sur l'onglet Validate & apply
4. Entrez l'URL d'un article de votre blog (pensez à mettre le code .com au lieu du code de votre pays) et cliquez sur Go! Si tout va bien, vous aurez à droite un aperçu de votre Twitter Card.

3. Demander la validation par Twitter:

Si le résultat vous convient, cliquez sur Request approval.


Vous recevrez un e-mail de Twitter quand votre Twitter Card sera validée mais il faudra patienter encore 24-48h avant de la voir apparaître sur vos tweets. Plus s'il s'agit d'une vidéo.