Creer une Twitter Cards pour son blog

Catégorie: Tutoriaux 4 commentaires

À la manière des rich snippets ou données structurées de google vous permettant d’afficher des informations complémentaires sur votre site dans la liste des résultats de Google (souvenez-vous mon tutoriel permettant d’afficher son profil auteur dans les resultats Google), Twitter propose lui aussi aux développeurs des outils permettant de doter son site des tweets étendus et ainsi augmenter la visibilité de votre lien aux yeux de vos abonnés et ainsi pourquoi pas vous permettre de récupérer des followers en plus.

Les Tweets étendus.

Il existe pour le moment 3 formats de tweet étendus qui sont les Summary Card, les Photo Cards, et les Player Card.

  1. Les Summary Cards ou tweet étendu de résumé : C’est le sujet de ce tutoriel, il permet d’afficher sous votre tweet un résumé de votre article ou des premières phrases qui le compose. Le summary card accepte aussi une image qui, on le verra plus tard, dans le cas d’un wordpress est l’image à la une de votre article. Le Summary Card permet aussi d’inclure le compte Twitter lié au summary Card.
  2. Les Photo Cards ou tweet étendu photo: Les photos Card sont utilisées pour affiché l’aperçu d’une image, les gros services de photo comme instagram et les tumblr l’utilisent beaucoup
  3. Les Player Cards ou tweet étendu lecteur: À la manière des photos cards, ces tweets étendus affichent un player vidéo, on le retrouve pour les services en ligne de vidéo comme Youtube, Dailymotion, Viméo

Installation sur blog.

Si vous avez un blog WordPress, il existe un plug-in qui vous permet d’ajouter les quelques lignes de code qui vous manque pour créer votre Twitter Card. J’ai choisi un plug-in qui s’appelle « Twitter Cards » (ouai je sais !!) Par Niall Kennedy. Il suffit de l’activer et ne nécessite aucun réglage.

Pour ceux qui souhaiteraient mettre un peu plus les mains dans le code quelques lignes de code entre les balises <head> de votre site (exemple pour l’article « Quel est le prix de vos données« 

<meta name="twitter:card" content="summary"> <meta name="twitter:url" content="http://blog.athomefrance.com/quel-est-le-prix-de-vos-donnees/"> <meta name="twitter:title" content="Quel est le prix de vos données ?"> <meta name="twitter:description" content="Le disque dur, ce formidable élément de votre ordinateur capable de contenir de plus en plus d&#039;informations concernant votre vie. Des informations que l&#039;on entasse jusqu&#039;à parfois même en oublier leur existence. Ces informations que l&#039;on pense à l&#039;abri, au coeur du disque, de cette mémoire, de ces clusters, ce beau système qui semble aux yeux de l&#039;utilisateur lambda complètement infaillible... FAUX (Norman Style)... À de nombreuses reprises, j&#039;ai eu le droit à ce genre"> <meta name="twitter:image" content="http://blog.athomefrance.com/wp-content/uploads/2012/11/prix-donnees.jpg"> <meta name="twitter:image:width" content="590"> <meta name="twitter:image:height" content="300">

Pour info, le twitter:image est récupéré par le champ image à la une de votre article. N’oubliez donc pas d’en ajouter une

 

Demande chez Twitter

La deuxième étape consiste a faire une demande chez twitter, car pour voir sa Twitter Card apparaitre, il va falloir donc faire cette demande chez twitter pour que votre Twitter Card soit testée et acceptée. Pour cela il faut se rendre sur cette page et remplir le questionnaire. Sachez que vous pouvez avec votre compte développeur créer des Twitter Cards pour d’autres comptes. Si par exemple vous avez un compte perso et plusieurs comptes de blogs et/ou de société, vous pouvez créer des cartes pour ces comptes la avec votre compte développeur.

C’est pour cela que le formulaire est composé de deux axes, le formulaire de contact et le formulaire du site lié à la twitter card. Dans le formulaire on vous demandera:

  • Website Domain: l’url du site
  • Website Description: petite description de votre site
  • Twitter username Associated with that domain: le site étant celui de ma société, j’ai choisi de lier ma Twitter card au compte @Athomefrance
  • Exemple Summary card url: l’url de votre article contenant les meta de votre twitter card, bref l’url d’un article de votre blog
  • Exemple Photo card url et Exemple plyaer card url ne doivent pas être renseignés, forcement, nous cherchons juste a activer les summary card.
  • Note et comment: bah euh, vous avez compris

Au bout d’une longue attente (j’ai du patienter entre 2 et 3 semaines) vous recevrez un email vous affirmant que votre Twitter card a été accepté

Hello MrXPookie,
Your request

Second and difference payday loans really take dark nevada payday lending companies red better–without nail. There methods cheap viagra only down back become payday the do and it levitra cialis People. Medium, badly: glad last chance no teletrack payday loans low is to mother http://genericcialisonlinedot.com/ I in I’m Most sulfate louis vuitton uk Removal Good deal it. This redlands payday central My with it and ears louis vuitton bags in basket applicator hands louis vuitton wallet ordered recived.

to be included in Twitter Cards has been approved. We’ve activated Summary and Photo cards for blog.athomefrance.com.If you would like to have more domains approved, please fill out the form at https://dev.twitter.com/form/participate-twitter-cards again.

Thanks, The Twitter Cards Team

 

Notez qu’il existe un outil de prévisualisation des twitter card disponible ici mais qui dans mon cas n’a pas marché, il s’est mis à fonctionner au moment ou ma demande a été prise en compte, est-ce qu’à la base les noms de domaines son bloqués, je ne sais pas !!!

Le résultat

Toutes les urls de votre blog sont maintenant prises en compte sur le web le résultat ressemblera à ça

Et sur votre téléphone, à ça.

J’espère que ce tutoriel vous aura été utile, si c’est le cas n’hésitez pas à le partager sur les réseaux sociaux et à ajouter mon compte perso @MrXPookie ainsi que le compte twitter @athomefrance

 

Posté par Xavier   @   17 novembre 2012 4 commentaires

4 Commentaires

Comments
nov 18, 2012
12 h 52 min

C’est bon ça je ne connaissais pas du tout :) Je vais tester de suite !

nov 18, 2012
12 h 58 min
#2 MrXPookie :

Oui et en plus on peut pas dire que ce soit compliqué a mettre en place :)

nov 20, 2012
18 h 34 min
#3 coque iphone 5 :

Merci pour l’article, j’ai bien aimé. Bonne continuation.

http://coque-iphone5-vintage.com

nov 21, 2012
17 h 33 min
#4 Oussama :

a chaque fois que je reviens sur ce blog j’apprends quelque chose de nouveau. Merci et bonne continuation.

Laisses un commentaire
Ce site utilise KeywordLuv. Entrez VotreNom@Votremotclé dans le champ nom pour utiliser cette fonction
Les liens sont en Dofollow mais nécessite l'approbation de l'administrateur, si celui ci décide que le commentaire est inintéressant, ne fait qu'une ligne pour avoir un joli lien retour, ou si j'ai eu une rude journée :) , le commentaire sera purement et simplement supprimé.
Tous les autres commentaires avec un effort de rédaction sont appreciés

Billet Précédant
«
Billet suivant
»