Twitter et les Grid Template : nouvelle méthode design d’intégration des tweets

Mathieu Chartier Webmarketing 0 commentaire

Twitter a annoncé le 21 octobre 2015 le lancement d'une nouvelle méthode pour intégrer les tweets dans des contenus (embedded tweets), en parallèle de son service Tell great story. Cette dernière permet d'éviter la succession de tweets affichés les uns sous les autres, sans mise en forme particulière. Désormais, les tweets pourront être associés pour raconter une histoire !

Créer des histoires avec des tweets dans Twitter

Cette nouvelle fonctionnalité accompagne le lancement du service Tell great story qui permet aux twittos de créer des histoires complètes avec des tweets, en personnalisant le design final. L'objectif est de créer un storytelling avec des tweets récupérés grâce à leur ID dans Twitter.


Le service permet de créer des "story" ou des collections de tweets, qui pourront ensuite être intégrées avec les oembed tweets. La société a appelle la nouvelle fonctionnalité les Grid Template, donc des thèmes sous forme de grille si nous traduisons littéralement. En réalité, cela va même un peu loin puisque le graphisme des tweets est beaucoup plus "design" avec ce mode d'intégration et permet de raconter une histoire selon le défilement des tweets (voir l'exemple ci-dessus). Cela vient compléter la liste des modes d'intégration qui comportait déjà l'importation classique ou les List Template.

Créer des collections ou des séries de tweets

Tout l'objectif est de créer des collections, mais l'intégration est extrêmement simple par la suite (voir ci-après). Il faut pour cela utiliser la nouvelle API Collections, TweetDeck ou l'outil Curator. Dans mon exemple, j'utilise le service TweetDeck, accessible à cet URL : https://tweetdeck.twitter.com. Voici les étapes à suivre pour créer une collection :

  • Une fois connecté à l'outil, cliquez sur l'icône "+" (dans le menu à gauche) et choisissez "Collection".
  • Créer une collection avec Tweet Deck.Cliquez sur "Create collection" pour ajouter un nouveau "tableau" à TweetDeck, sous forme de collection de tweets.
  • Donnez un nom à la collection, et éventuellement une description.
  • Ajoutez les tweets que vous désirez à la collection soit en cliquant sur "Add to collection" (après avoir cliquer sur le "..."), soit en ajoutant une URL de tweet, soit en faisant un glisser/déposer dans la fenêtre dédiée à la collection.

Collection créée avec TweetDeck

Une fois les collections créées, vous pouvez les alimenter avec TweetDeck. Vous pouvez également partager la collection via l'outil ou directement via les paramètres de Twitter. Les paramètres permettent de récupérer facilement l'URL ou l'ID de la collection. Il suffit pour cela de copier l'URL du lien en faisant un clic droit sur le nom de la collection, ou en recopiant son ID. La capture suivante montre l'URL en bas à gauche lors du survol du titre de la collection.

Récupérer l'ID ou l'URL d'une collection dans Twitter

Intégrer les collections dans un site web ou une application mobile

Pour les non développeurs, il y a un outil qui permet de générer directement les tweets à intégrer : https://publish.twitter.com. Il suffit de recopier l'URL ou d'indiquer l'ID de la collection pour obtenir le code à intégrer dans les pages web ou applications.

Intégrer des tweets avec le Grid Template via Twitter

Pour les autres, créer un Grid Template est assez simple en réalité. Il suffit d'intégrer un code sous la forme suivante :

<a class="twitter-grid" href="https://twitter.com/NOM_UTILISATEUR/timelines/ID_COLLECTION">Titre de la collection de tweets</a>

Voici un exemple que j'ai créé avec la collection d'exemple de cet article :

Il y a également la possibilité d'intégrer des collections via Javascript. Cela permet de limiter le nombre de tweets affichés si la collection est grande notamment.

La fonctionnalité accompagne la volonté de Twitter de créer des histoires avec les tweets, un peu comme avec la fonctionnalité Moments qui devrait voir le jour prochainement en France.