Intégrer un tweet#

Pas à pas#

Prenons ce tweet pour exemple : https://twitter.com/geojulien/status/1169878346693369856

1. Cliquer sur le menu déroulant et sélectionner Intégrer le tweet :

   

2. On est alors dirigé vers le site dédié à l'intégration Twitter Publish :

   Info

   Le scénario peut varier dans certains cas. Par exemple, il est possible que le mini-formulaire d'intégration apparaisse directement au-dessus du tweet. Pas de panique, ça revient au même à partir du point 4.

   

3. Pour bien faire les choses, notamment pour respecter les utilisateurs de Geotribu qui ne souhaitent pas être traqués par le marketing de Twitter, il est de bon ton de prendre le temps de changer les options de personnalisation. Cliquer sur set customization options, faire les réglages et cliquer sur Update :

   

4. Cliquer sur Copy code pour récupérer le bout de HTML à coller dans le markdown :

   Mis en forme

   1 2 3 4 5 6 7

   <blockquote class="twitter-tweet" data-lang="fr" data-dnt="true"> <p lang="fr" dir="ltr">Tjs une excellente base pour découvrir et expérimenter. Ce projet est juste fabuleux alors j&#39;imagine même pas les gens derrière ! <a href="https://t.co/27GwU4l54J">https://t.co/27GwU4l54J</a></p> &mdash; Julien Moura (@geojulien) <a href="https://twitter.com/geojulien/status/1169878346693369856?ref_src=twsrc%5Etfw">6 septembre 2019</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

   Brut

   1

   <blockquote class="twitter-tweet" data-lang="fr" data-dnt="true"><p lang="fr" dir="ltr">Tjs une excellente base pour découvrir et expérimenter. Ce projet est juste fabuleux alors j&#39;imagine même pas les gens derrière ! <a href="https://t.co/27GwU4l54J">https://t.co/27GwU4l54J</a></p>&mdash; Julien Moura (@geojulien) <a href="https://twitter.com/geojulien/status/1169878346693369856?ref_src=twsrc%5Etfw">6 septembre 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

5. Le site intègre déjà le Javascript de Twitter. Pour des raisons de performances et que le tweet soit rendu dans les meilleures conditions, il faut supprimer la balise script qui est ajoutée à la suite du blockquote :

   1 2 3 4 5 6 7

   <blockquote class="twitter-tweet" data-lang="fr" data-dnt="true"> <p lang="fr" dir="ltr">Tjs une excellente base pour découvrir et expérimenter. Ce projet est juste fabuleux alors j&#39;imagine même pas les gens derrière ! <a href="https://t.co/27GwU4l54J">https://t.co/27GwU4l54J</a></p> &mdash; Julien Moura (@geojulien) <a href="https://twitter.com/geojulien/status/1169878346693369856?ref_src=twsrc%5Etfw">6 septembre 2019</a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Voilà, c'est prêt !

Coller le HTML dans le markdown et il s'affichera ainsi :

Tjs une excellente base pour découvrir et expérimenter. Ce projet est juste fabuleux alors j'imagine même pas les gens derrière ! https://t.co/27GwU4l54J

— Julien Moura (@geojulien) 6 septembre 2019

Précisions et options#

Centrer le tweet#

Bizarrement, l'option n'est pas proposée dans le formulaire de Twitter alors qu'il existe bien une classe CSS. Il faut donc ajouter manuellement tw-align-center aux côtés de twitter-tweet :

1
2
3
4
5
6

<blockquote class="twitter-tweet tw-align-center" data-lang="fr" data-dnt="true">
<p lang="fr" dir="ltr">Tjs une excellente base pour découvrir et expérimenter. Ce projet est juste fabuleux alors
    j&#39;imagine même pas les gens derrière ! <a href="https://t.co/27GwU4l54J">https://t.co/27GwU4l54J</a></p>
&mdash; Julien Moura (@geojulien) <a
    href="https://twitter.com/geojulien/status/1169878346693369856?ref_src=twsrc%5Etfw">6 septembre 2019</a>
</blockquote>

Pistage, blocage et fallback#

Si un utilisateur utilise une protection renforcée contre le pistage et toute forme de tracking publicitaire, Twitter renvoie les tweets dans une forme dégradée (notamment sans les médias). Les tweets intégrés apparaissent alors dans une forme simplifiée avec uniquement le texte :

Consulter :

• l'article de Mozilla sur la protection contre le pistage
• Firefox : comment activer/désactiver la protection pour un site

Aspects techniques#

Techniquement, l'intégration des tweets repose sur l'intégration d'une balise HTML blockquote en dur directement au sein du texte en markdown. La balise ainsi intégrée est transformée à la volée au chargement de la page via un script Javascript hébergé sur les serveurs de Twitter qui modifie directement le DOM pour en faire une balise twitter-widget complète dont le rendu est contrôlé par Twitter.

Conformément aux recommandations de Twitter, le code Javascript est intégré au chargement du site et n'est donc chargé qu'une seule fois par les visiteurs de Geotribu.

Pour plus d'infos, consulter la Pull Request qui a permis l'intégration propre des tweets.