Twitter Cards, 3, 2, 1, Go!

Pour ceux qui nous suivent sur Twitter (pour les autres c’est par ici sur @rhooocom), vous avez peut être remarqué que nous avions mis en place les Twitter Cards.

Ce petit outil proposé par Twitter offre la possibilité d’attacher des médias à vos tweets pointant vers votre contenu et de permettre à vos followers d’accéder à un aperçu du contenu en cliquant sur le tweet. Si par exemple vous tweetez un lien vers une page de votre site avec une vidéo, la vidéo sera directement visible en dépliant le message. Dans le cas de Rhooo, cela permet pour chaque boutique que l’on tweete d’afficher le nom de la boutique, un extrait de la présentation de la boutique et l’image illlustrant l’article. Cela valorise d’avantage le tweet et permet très certainement une meilleure conversion.

Pour ceux qui souhaiteraient activer les Twitter Cards sur leur site, le réseau propose une page explicative sur la partie développeurs du site. La démarche est on ne peut plus simple, puisque il s’agit d’ajouter quelques balises méta dans l’en-tête de votre site. Il existe 3 types de Twitter Cards : Summary, qui affiche un titre, un extrait et une image (notre choix pour Rhooo), Photo, qui affiche une image et Player, qui affiche une vidéo.
Les balises méta vous permettent de définir le type de Twitter Card choisi, ainsi que de paramétrer le bon affichage de votre contenu en paramétrer les url des articles, l’extrait du contenu etc…

Pour ceux qui se demanderaient comment mettre cela en place, une rapide recherche Google vous renverra sur des tutos ou des plugins à activer pour vos différents CMS. J’ai choisi d’activer le système sans plugin pour ma part. Rhooo fonctionnement sous la plateforme WordPress, voici le petit bout de code à ajouter dans le fichier header.php entre les balises “head” :

<?php if (is_single()) { ?>Pour indiquer que la Twitter Card n’est active que sur les pages des articles
<meta name="twitter:card" value="summary" />Indique le type de Twitter Card, ici Summary
<meta name="twitter:url" value="<?php the_permalink(); ?>" />Indique l’url de l’article, ici le permalink généré par WordPress
<meta name="twitter:title" value="<?php the_title(); ?>" />Indique le titre de notre article

La boucle suivante nous permet, si nous avons du contenu dans notre article, d’aller chercher l’extrait généré par WordPress (en l’occurrence l’extrait qui est utilisé dans le flux RSS) et si nous n’avons pas de contenu d’afficher le message “Découvrir cette boutique sur Rhooo.com”

<meta name="twitter:description" value="<?php if (have_posts() && is_single() OR is_page()):while(have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile;
else: ?>
Découvrir cette boutique sur Rhooo.com
<?php endif; ?>" " />

La boucle suivante nous permet d’aller chercher l’image attachée à notre article pour l’afficher dans la Twitter Card. Sur Rhooo nous utilisons le plugin TimThumb pour générer des miniatures de nos images en extrayant la première image trouvée dans l’article. la valeur de cette méta peut utiliser la fonction “get_attachment” de WordPress (voir sur le Codex).

<meta name="twitter:image" value="<?php bloginfo('stylesheet_directory'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&h=210&w=674&zc=1" />
<meta name="twitter:site" value="@rhooocom" /> // Notre pseudo Twitter
<?php } ?>

Une fois votre fichier header.php modifié et enregistré, vous pouvez visualiser le rendu de votre Twitter Card à cette adresse en indiquant l’url d’une page article. Tout fonctionne? Parfait, la dernière étape et de vous enregister auprès de Twitter pour participer au programme Twitter Cards. Vous devrez indiquer l’url de votre site, ainsi que les url générées par vos balises méta (url de l’image etc…). Twitter valide ou non votre inscription dans les 5 jours.

  1. PierreJD - le 06/03/13

    Bande de barbus !

  2. dZiGue - le 06/03/13

    Excellent, merci !
    J’ai juste modifié un peu le script pour la balise twitter:image (je n’utilise pas le plugin TimThumb) et c’est parfait sur mon blog.

  3. PrestaEdit - le 12/03/13

    Bonsoir,

    Et merci pour cet article !

    J’ai appliqué le tutoriel mais pour un site sous PrestaShop. Je viens de recevoir de Twitter que mon application au programme venait d’être approuvée.

    Cependant, je ne parviens pas à faire un tweet avec une URL ayant une TC. J’ai même essayé de tweeter cette URL, sait-on jamais: sans succès, il tweet juste une URL.

    Une idée ? :)