Plus besoin de prendre une capture d’un tweet pour l’intégrer sur votre site

Avec l’arrivée récente de la nouvelle interface Web de Twitter, plusieurs options pour les développeurs sont apparues. Ainsi, avez-vous déjà remarqué comment les blogueurs font désormais pour intégrer directement un tweet au sein de leur contenu ? Si ce n’est pas le cas, ils ont abandonné une capture d’écran du tweet pour un code Web directement intégrable dans un article.

Cette nouveauté permet donc de rendre beaucoup plus facile que jamais le partage de tweets avec leurs lecteurs. Mais quel est le problème alors ? Et bien le seul inconvénient de cette nouvelle fonctionnalité proposée par Twitter, c’est que vous devez être un des utilisateurs qui a déjà accès à la nouvelle interface… Or, le déploiement de celle-ci est lente et comme tout le monde n’y a pas accès, je voulais partager avec vous différentes astuces pour le faire dès aujourd’hui.

Disons que vous êtes un développeur Web et que vous souhaitez intégrer un tweet sur votre site Web, voici les étapes à suivre. Pour vous expliquez le principe, je vais m’appuyez sur ce tweet :

Le code généré ressemble à ceci :

[sourcecode language="HTML"]
<blockquote class="twitter-tweet tw-align-center" lang="fr">
<p>Cette semaine : L’abandon d’IE 6 par Microsoft ! Ou comment s’excuser auprès de tous… | <a href="http://t.co/4j10AVQT" title="http://www.blog-nouvelles-technologies.fr/8624/labandon-die-6-par-microsoft-ou-comment-sexcuser-aupres-de-tous/">blog-nouvelles-technologies.fr/archives/8624/…</a> via @<a href="https://twitter.com/lryo17">lryo17</a> <a href="https://twitter.com/search/%2523IE6">#IE6</a></p>
&mdash; Yohann Poiron (@Lryo17) <a href="https://twitter.com/Lryo17/status/148409726722514944" data-datetime="2011-12-18T14:30:10+00:00">Décembre 18, 2011</a>
</blockquote>
[/sourcecode]

Tout ce que vous avez à faire est de copier-coller le code HTML ci-dessus et changer manuellement les informations suivantes :

  • Dans un premier temps, remplacer le contenu du tweet. Dans notre cas, il s’agit de Cette semaine : L’abandon d’IE 6... à #IE6</a></p>. Remplacez ce contenu par le contenu de votre tweet.
  • Où on lit — Yohann Poiron (@Lryo17), remplacez-le par votre nom et votre identifiant Twitter
  • Ensuite il est nécessaire de changer le nom du lien. Pour cela, remplacez le https://twitter.com/Lryo17/status/148409726722514944 par le lien de votre tweet
  • Le dernier élément que vous avez à changer c’est la date et l’heure du tweet. Pour ce faire ouvrer le tweet depuis l’interface Web de Twitter, et survolez-le pour obtenir le timestamp

Plus besoin de prendre une capture d'un tweet pour l'intégrer sur votre site - Date et heure à récupérer

Une fois que vous avez fait tous ces changements, il suffit de coller le code embed en mode HTML.

Plus besoin de prendre une capture d'un tweet pour l'intégrer sur votre site - Tweet inclut dans un site

Une autre possibilité beaucoup plus simple cette fois, concerne tous les utilisateurs de WordPress. Tout ce que vous avez besoin de faire, c’est de récupérer le lien vers votre tweet. Ensuite, avec le plugin Twitter Blackbird Pie vous allez pouvoir intégrer n’importe quel tweet sur votre blog.

Pour cela, vous devez installer le plugin, puis allez dans l’éditeur visuel de WordPress et cliquez sur l’icône du plugin (petit oiseau). Ensuite, copiez l’URL de votre tweet et cliquez sur le bouton « Insérer ». Et voilà !

Plus besoin de prendre une capture d'un tweet pour l'intégrer sur votre site - Plugin Twitter Blackbird Pie

Note : En fait, avec WordPress, vous pouvez même modifier son apparence

Il s’agit de deux petites astuces qui vous rendront bien des services. Ainsi, il sera inutile désormais de téléverser une image sur votre blog, où votre site pour afficher un tweet.

Si vous avez le moindre problème n’hésitez pas, la partie commentaires ci-dessous est ouverte !

  • http://twitter.com/tom_rousselin Thomas ROUSSELIN

    cool ^^, merci

  • Pingback: Plus besoin de prendre une capture d’un tweet pour l’intégrer sur votre site | Le blog des nouvelles technologies : Web, Technologies, Développement, Interopérabilité | Gouvernance web - Quelles stratégies we

  • http://www.waebo.com TiChou

    Ou simplement cliquer sur le lien permettant de générer le code depuis un tweet au lieu de copier/coller puis remplacer ;)

    • http://www.blog-nouvelles-technologies.fr Yohann Poiron

      C’est-à-dire ?

  • http://thibaultmilan.com Thibault Milan

    prendre une photo et l’uploader : 3s
    Ta méthode: 3 mins.

    Meme s’il est bon de voir des gens partager ce genre d’astuce, je ne suis pas sur que le gain en terme de performance soit top. De plus cela ne garantie en rien l’authenticité du twitt, pas plus que la photo qu’on peut photoshopper tu vas me dire … Ceci dis comme le fait remarquer Tichou, il suffit de faire partager – code html et zou

    • http://www.blog-nouvelles-technologies.fr Yohann Poiron

      Il ne s’agit que d’une méthode « temporaire » comme je l’indique dans l’article. En effet, une fois que tout le monde aura accès à la nouvelle interface Web de Twitter le problème ne se posera plus !

      Concernant le gain de temps ça évite de mettre en bouton pour retweeter si nécessaire, follow la personne, etc… ce gain de temps est énorme…

      Pour ce qui est de l’authenticité certes ! Mais pas plus qu’un screen qui peut-être modifié par Photoshop comme tu l’indiques, mais également tout simplement en modifiant le code source avant de prendre la capture…

      Concernant le « partager le code HTML » c’est disponible où ?

      • http://thibaultmilan.com Thibault Milan

        Apparement c’est roll out progressivement sur des comptes (serveur ?). j’y aia ccès avec un de mes compte et pas l’autre perso :)

        • http://www.blog-nouvelles-technologies.fr Yohann Poiron

          Oui bien pour ça qu’en début d’article j’ai mis : « Et bien le seul inconvénient de cette nouvelle fonctionnalité proposée par Twitter, c’est que vous devez être un des utilisateurs qui a déjà accès à la nouvelle interface…
          Or, le déploiement de celle-ci est lente et comme tout le monde n’y a
          pas accès, je voulais partager avec vous différentes astuces pour le
          faire dès aujourd’hui. »

  • Pingback: Twitter améliore l’intégration de ces tweets | BlogNT : Le Blog des Nouvelles Technologies dédié au Web, aux nouvelles technologies et au développement Web