Créer des aperçus de liens riches avec Onebox

:bookmark: Ceci est un guide pour créer des aperçus de liens enrichis avec Onebox dans Discourse. Il explique comment créer des Onebox, utiliser le Oneboxing en ligne, éviter le Oneboxing, utiliser les hyperliens et gérer les iFrames avancés.

:person_raising_hand: Niveau d’utilisateur requis : Tous les utilisateurs

Onebox convertit vos liens web en extraits d’aperçu utiles qui aident à informer les lecteurs sur la cible avant qu’ils ne cliquent.

Résumé

Ce guide explique comment :

  • Créer des Onebox
  • Utiliser le Oneboxing en ligne
  • Éviter le Oneboxing
  • Utiliser des hyperliens au lieu de Onebox
  • Gérer les iFrames avancés

Création d’une Onebox

Pour créer une Onebox, collez simplement n’importe quel lien dans une publication sur sa propre ligne, comme ceci :

https://www.google.com/

Ceci résulte en :

Onebox prend en charge les balises oEmbed et OpenGraph générales, et dispose de règles personnalisées pour les sites populaires tels que Wikipédia, Twitter, Amazon, YouTube et autres.

Essayez de coller des liens dans vos publications et voyez ce qui se passe. N’oubliez pas que pour que le Oneboxing fonctionne, le lien doit être sur sa propre ligne !

Oneboxing en ligne

Avec le paramètre de site enable inline onebox on all domains activé (cette fonctionnalité est activée par défaut), coller le lien en ligne avec le texte remplacera le lien brut par le titre de la page, comme ceci Understanding Discourse Trust Levels

comme ceci https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/

Éviter les Onebox

Si vous souhaitez que le lien apparaisse comme un lien brut simple et non décoré, placez-le entre des crochets \u003c et \u003e :

\u003chttps://blog.discourse.org/2018/06/understanding-discourse-trust-levels/\u003e

Alternativement, vous pouvez placer un espace avant le lien ou tout caractère après le lien.

Utilisation des hyperliens

Vous pouvez ajouter un lien à votre texte en :

  • Utilisant le bouton maillon de chaîne dans la barre d’outils de l’éditeur
  • Sélectionnant du texte dans votre publication et en collant un lien depuis votre presse-papiers
  • Ajoutant des liens Markdown / BBCode / HTML :
[lien ici](https://example.com)
[lien=https://example.com]lien ici[/lien]
\u003ca href=\"https://example.com\"\u003elien ici\u003c/a\u003e

iFrames avancés

Par défaut, \u003ciframe\u003e est bloqué pour des raisons de sécurité. Cependant, si les iframes proviennent de sources hautement fiables, un administrateur Discourse peut ajouter ce domaine au paramètre de site allowed iframes.

Vous devrez peut-être également coller le code d’intégration complet, comme celui de la carte ci-dessous :

\u003ciframe src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24202.451099423397!2d-74.06201522657554!3d40.68924937923285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2suk!4v1533203877892\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen\u003e\u003c/iframe\u003e

Ceci résulte en :

\u003ciframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24202.451099423397!2d-74.06201522657554!3d40.68924937923285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2suk!4v1533203877892\" width="600" height="450" frameborder="0" style="border:0" allowfullscreen\u003e\u003c/iframe\u003e

Ressources supplémentaires

Pour plus d’informations et de dépannage des Onebox, veuillez consulter le sujet connexe ci-dessous :

46 « J'aime »