Intégration Ghost

Apprenez à insérer vos graphiques Embases dans Ghost via la carte HTML, dans des articles ou des pages, et à gérer la compatibilité avec les thèmes.

Carte HTML

L'éditeur Ghost (Koenig) utilise un système de « cartes » pour structurer le contenu. La carte HTML vous permet d'insérer du code HTML brut, incluant des iFrames, directement dans vos articles et pages. Cette méthode est la principale façon d'intégrer un graphique Embases dans Ghost.

Pour insérer la carte HTML, ouvrez l'article ou la page Ghost en mode édition. Placez votre curseur à l'endroit où vous souhaitez que le graphique apparaisse. Cliquez sur le bouton « + » qui apparaît à gauche de la ligne courante, ou tapez / pour ouvrir le menu de blocs. Dans ce menu, cherchez et cliquez sur « HTML » pour insérer une carte HTML vide.

La carte HTML apparaît dans l'éditeur avec un espace vide gris et un message indiquant d'entrer du HTML. Cliquez sur cet espace pour activer l'éditeur de code de la carte. Un éditeur de texte brut s'ouvre, vous permettant de saisir ou coller du code HTML. Collez le code iFrame Embases dans cet éditeur.

Important : dans l'éditeur Ghost, la carte HTML n'affiche pas un aperçu visuel du graphique — elle montre uniquement le code source. Pour voir le rendu réel du graphique, cliquez sur le bouton « Preview » en haut à droite de l'éditeur Ghost. Cette prévisualisation ouvre un onglet ou une fenêtre montrant l'article tel qu'il sera vu par les lecteurs, avec le graphique rendu correctement.

<iframe
  src="https://embases.com/e/VOTRE_TOKEN"
  width="100%"
  height="420"
  frameborder="0"
  loading="lazy"
  title="Graphique Embases"
></iframe>

Astuce : La carte HTML Ghost s'affiche uniquement en mode Aperçu ou en publication. Dans l'éditeur, elle peut montrer un placeholder. Cliquez sur « Preview » en haut pour voir le rendu réel.

Articles vs Pages

Dans Ghost, vous pouvez insérer des embeds aussi bien dans les articles de blog (Posts) que dans les pages statiques (Pages). La procédure est identique dans les deux cas — la carte HTML fonctionne de la même façon dans l'éditeur Koenig, qu'il s'agisse d'un Post ou d'une Page.

Pour les articles de blog, l'embed s'affiche dans le flux du contenu de l'article, entre les paragraphes de texte, les images et les autres éléments. C'est idéal pour illustrer un point précis avec un graphique de données en temps réel. Pour les pages statiques, vous pouvez créer une page entièrement dédiée à un tableau de bord analytique, en empilant plusieurs cartes HTML contenant chacune un graphique Embases différent.

Une limitation importante à connaître : les embeds iFrame ne fonctionnent pas dans les emails envoyés via la fonctionnalité newsletter de Ghost. Les clients email (Gmail, Outlook, Apple Mail, etc.) bloquent systématiquement les iFrames pour des raisons de sécurité. Si vous envoyez des newsletters Ghost et souhaitez partager un graphique, utilisez plutôt le lien direct Embases — les lecteurs cliquent sur le lien pour voir le graphique dans leur navigateur.

Astuce : Pour un graphique pleine largeur sur Ghost, ajoutez la classe kg-width-wide à votre iFrame ou enveloppez-le dans un div avec cette classe. Les thèmes Ghost compatibles rendront l'embed en dehors de la colonne de contenu.

Compatibilité avec les thèmes

La grande majorité des thèmes Ghost (qu'ils soient officiels ou tiers) supportent les cartes HTML sans configuration supplémentaire. Le thème Ghost applique son style au contenu, mais la carte HTML est généralement rendue en HTML brut sans modification.

Cependant, certains thèmes appliquent un max-width strict à la colonne de contenu (souvent 680px ou 720px) qui peut empêcher le graphique de s'afficher en pleine largeur de la page. Si vous souhaitez que votre graphique occupe toute la largeur disponible au-delà de la colonne de texte, vous pouvez injecter du CSS personnalisé via les paramètres Ghost. Accédez à Ghost Admin → Settings (icône engrenage) → Code injection. Dans le champ « Site Header », collez le CSS approprié.

Ce CSS peut cibler spécifiquement les iFrames dans les cartes HTML de Ghost (sélecteur .kg-html-card iframe) pour ajouter des styles globaux comme un border-radius arrondi, supprimer les bordures, ou ajuster le display. Les changements s'appliquent à tous les articles et pages de votre site Ghost.

/* CSS à injecter dans Ghost Settings → Code injection → Site header */
.kg-html-card iframe {
  border-radius: 8px;
  display: block;
}

Domain Whitelisting

Si le Domain Whitelisting est activé sur votre embed Embases, vous devez ajouter le domaine de votre site Ghost dans la liste blanche. Le domaine exact à ajouter dépend de la configuration de votre site Ghost.

Si vous utilisez Ghost Pro (l'hébergement officiel de Ghost), votre site est accessible par défaut sur un domaine au format monblog.ghost.io — c'est ce domaine qu'il faut ajouter dans Embases. Si vous avez connecté un domaine personnalisé à votre site Ghost Pro, ajoutez votre domaine personnalisé (par exemple www.monblog.com) dans la liste blanche.

Si vous hébergez Ghost vous-même (self-hosted), le domaine est celui de votre serveur, configuré dans le fichier config.production.json de Ghost. Vérifiez ce fichier ou regardez l'URL dans votre navigateur quand vous consultez votre site pour identifier le bon domaine à ajouter. Pour les installations en développement local (http://localhost:2368 par défaut), ajoutez localhost dans votre liste blanche Embases pour pouvoir tester les embeds localement.

Étapes suivantes