Apportez des macro-graphiques en direct à votre blog en quelques minutes

Que vous dirigiez un blog de trading sur WordPress, publiiez des recherches dans Notion ou écriviez du contenu financier sur Ghost, vos lecteurs veulent voir des données en direct pas des captures d'écran statiques qui vieillissent au moment où vous appuyez sur publier. <iframe> Les statistiques sont mises à jour automatiquement à chaque nouvelle version.

À la fin de ce guide, vous aurez au moins un macro graphique en direct intégré dans votre blog, sachant comment personnaliser la paire de devises, comprendre quels types de graphiques sont disponibles, et être en mesure d'échanger des widgets pour n'importe quel contenu sans toucher votre backend ou écrire JavaScript.

Ce que vous allez construire

Un graphique macro en direct et automatiquement mis à jour intégré dans votre article de blog montrant le carry trade, les différentiels de rendement, les comparaisons d'inflation ou les taux de chômage pour n'importe quelle paire de devises du G10 sans clé API, sans code backend et sans maintenance continue.

Pré-requis

Avant de commencer, vérifiez que vous avez les éléments suivants:

Un blog ou un site web toute plateforme qui accepte HTML brut dans le corps de la page fonctionne: WordPress (éditeur classique ou de bloc), Ghost, Webflow, Squarespace, Wix, Notion, Medium, Substack, ou un site HTML codé à la main.
La possibilité d'insérer du HTML dans la plupart des plateformes CMS, cela s'appelle un "block HTML", "Custom HTML" ou "Embed".
Un navigateur vous générerez l'extrait à partir de la page des widgets FXMacroData; aucun compte ou clé API n'est nécessaire pour la vue intégrée.

Étape 1: Choisissez votre graphique et votre paire de devises

Naviguez vers le Page des widgets FXMacroData Neuf catégories de graphiques sont disponibles, couvrant les signaux macro que les traders FX suivent le plus de près:

Commercialisation le rendement net des taux d'intérêt résultant de la détention d'une position longue dans la devise à rendement plus élevé
Différentiel de rendement 10Y l' écart entre les rendements des obligations d'État à 10 ans pour une paire de devises
La courbe de rendement (10s2s) la forte ou inversion de la courbe des rendements intérieurs de chaque monnaie
Forme de courbe de rendement de base et de cotation instantanés de courbe de rendement individuels pour chaque étape de la paire
Comparaison de l'inflation l'IPC de référence parallèlement pour les deux monnaies
Différentiel d'inflation l'écart entre les taux d'inflation des deux économies
Taux de chômage comparaison du marché du travail, un élément clé des décisions des banques centrales en matière de taux
Balance commerciale données sur les flux de la balance courante, souvent un facteur de tendance des changes structurels

Choisissez une paire de devises en utilisant le sélecteur de paire en haut de la page des widgets. Cinq paires par défaut sont proposées EUR/USD, GBP/USD , USD/JPY, AUD/USD et USD/CAD ou vous pouvez taper n'importe quelle paire directement dans l'URL d'intégration du tableau de bord une fois que vous avez compris le modèle d'URL (couvert à l'étape 3).

Pour la plupart des blogs commerciaux, le Commercialisation ou ... Différentiel de rendement 10Y Si votre blog couvre une paire ou une région spécifique, choisissez le graphique qui correspond le mieux à la thèse de l'article que vous écrivez.

Étape 2: Copiez le extrait d'intégration

Une fois que vous avez trouvé le tableau que vous voulez, cliquez sur le "Copier le code" l'extrait copié sur votre presse-papiers ressemblera à ceci:

<iframe
  src="https://fxmacrodata.com/dashboard/embed/EUR_USD/carryChart"
  width="100%"
  height="400"
  frameborder="0"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="Carry Trade | FXMacroData">
</iframe>

Le graphique charge les données en direct depuis le backend de FXMacroData, les rend en mode lecteur et se rafraîchit automatiquement à mesure que de nouvelles annonces macroéconomiques sont publiées.

Alternative: Copie du tableau de bord

Chaque carte à l' intérieur de la principale . Le tableau de bord FXMacroData Il a aussi un Intégrer cliquez sur le bouton dans son en-tête. cliquez dessus génère un extrait iframe pré-rempli avec votre paire actuellement sélectionnée et vue graphique utile si vous naviguez déjà dans le tableau de bord et que vous voulez intégrer exactement le graphique que vous regardez.

Étape 3: Comprendre le modèle d'URL d'intégration

L'URL de l'iframe suit une structure simple et prévisible:

https://fxmacrodata.com/dashboard/embed/{PAIR}/{CHART_ID}

Où ? {PAIR} est la paire de devises en BASE_QUOTE format (par exemple EUR_USDJe suis désolé . GBP_USDJe suis désolé . USD_JPY) et {CHART_ID} est l'un des identifiants de graphique pris en charge:

carryChart Commercialiser
yieldDiffChart Différentiel de rendement 10Y
yieldCurveChart courbe de rendement (10s2s)
baseYieldCurveShape Forme de la courbe de rendement de base
quoteYieldCurveShape Forme de la courbe de rendement des devis
inflationChart Comparaison de l'inflation
inflationDiffChart Différentiel d'inflation
unemploymentChart Taux de chômage
tradeBalanceChart Balance commerciale

Par exemple, pour intégrer le graphique des différentiels d'inflation pour GBP/USD, l'URL serait:

https://fxmacrodata.com/dashboard/embed/GBP_USD/inflationDiffChart

Vous pouvez construire n'importe quelle combinaison manuellement pas besoin de revenir à la page widgets à chaque fois que vous connaissez le modèle.

Étape 4: Collez dans votre plateforme de blog

Les étapes ci-dessous couvrent les plateformes les plus courantes. Le principe est toujours le même: trouver l'entrée HTML brute pour le bloc de contenu où vous voulez le graphique, et coller l'extrait iframe là.

WordPress (éditeur classique)

Dans la barre d'outils de l'éditeur classique, passez de la Vue - Je vais vous le dire . Le texte Collez l'extrait où vous voulez que le graphique apparaisse dans le corps de la publication, puis retournez à Visual pour l'afficher.

WordPress (Block / éditeur Gutenberg)

Cliquez sur le + Pour ajouter un nouveau bloc, cliquez sur le bouton HTML personnalisé et sélectionnez-le. Collez l'extrait iframe dans le bloc HTML. L'aperçu dans l'éditeur peut afficher un espace réservé le graphique en direct se présente correctement pour les visiteurs.

<!-- Example: WordPress Custom HTML block content -->
<iframe
  src="https://fxmacrodata.com/dashboard/embed/EUR_USD/yieldDiffChart"
  width="100%"
  height="400"
  frameborder="0"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="10Y Yield Differential EUR/USD | FXMacroData">
</iframe>

Le fantôme

Dans l'éditeur Ghost, tapez /html Pour insérer une carte HTML, collez l'extrait dans le bloc de carte HTML.

Le concept

Dans la notion, tapez /embed Pour insérer un bloc d'intégration, collez l'URL intégrale de l'intégrer (pas la balise iframe complète juste le src Le widget est alors intégré dans le champ de l'URL d'intégration.

https://fxmacrodata.com/dashboard/embed/AUD_USD/carryChart

Quadruple espace / Wix / Webflow

Chacune de ces plateformes a un Code de désignation ou ... Intégrer Bloc. Ajoutez-en un à votre page, collez l'extrait HTML complet de l'iframe, et enregistrez. Pour Squarespace, c'est le "Bloc de code" sous la section "Plus" dans l'inserteur de bloc. Pour Wix, utilisez le widget "Incruster un site" et sélectionnez "Qu'est-ce que c'était?" → "ifrake HTML". Pour Webflow, faites glisser un composant "Incoder" du panneau Ajouter.

HTML statique ou site personnalisé

Collez l'extrait directement dans votre HTML au point de l'article où vous voulez que le graphique apparaisse. Aucun script ou dépendance supplémentaire n'est nécessaire.

<!DOCTYPE html>
<html>
<body>
  <article>
    <h2>EUR/USD Carry Trade — Current Spread</h2>
    <p>The carry differential between EUR and USD remains a key driver of the pair...</p>

    <iframe
      src="https://fxmacrodata.com/dashboard/embed/EUR_USD/carryChart"
      width="100%"
      height="400"
      frameborder="0"
      style="border:1px solid #e5e7eb; border-radius:8px;"
      title="Carry Trade EUR/USD | FXMacroData">
    </iframe>

    <p>As the Fed holds rates at 5.25% while the ECB has cut to 3.25%, the carry spread...</p>
  </article>
</body>
</html>

Étape 5: Personnalisez la largeur et la hauteur

Les dimensions d'intégration par défaut fonctionnent bien pour la plupart des mises en page de blog standard, mais vous pouvez les ajuster pour votre conception. width Je suis désolé . height sur le tag iframe.

Utiliser width="100%" pour rendre le graphique réactif et remplir son contenant ceci est recommandé pour les mises en page conviviales pour les mobiles.

400px compact; bon pour une barre latérale étroite ou entre les paragraphes courts
500px standard; convient à la plupart des mises en page des articles
600px généreux; idéal si le graphique est la pièce maîtresse visuelle d'une section axée sur les données

<!-- Compact sidebar widget -->
<iframe
  src="https://fxmacrodata.com/dashboard/embed/USD_JPY/carryChart"
  width="100%"
  height="400"
  frameborder="0"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="USD/JPY Carry Trade | FXMacroData">
</iframe>

<!-- Full-width data section feature chart -->
<iframe
  src="https://fxmacrodata.com/dashboard/embed/EUR_USD/inflationChart"
  width="100%"
  height="600"
  frameborder="0"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="Inflation Comparison EUR/USD | FXMacroData">
</iframe>

Évitez de définir une largeur de pixel fixe cela crée un défilement horizontal sur mobile. width="100%" et laissez la largeur de colonne de votre page restreindre le graphique naturellement.

Étape 6: intégrer plusieurs graphiques dans un article

Un article peut contenir autant de graphiques intégrés que vous en avez besoin. Chaque iframe est indépendant, donc un article d'analyse en plusieurs sections peut montrer le carry trade, le différentiel d'inflation et la courbe de rendement en séquence chacun mis à jour en temps réel pour tout visiteur qui lit l'article des semaines ou des mois après la publication.

Note sur les performances

Chaque iframe charge une page de graphique séparée. Si vous intégrez plus de trois graphiques dans un seul article, pensez à placer les moins critiques plus bas dans la page pour qu'ils se chargent lentement. loading="lazy" à la balise iframe pour le chargement paresseux natif dans les navigateurs modernes:

<iframe
  src="https://fxmacrodata.com/dashboard/embed/EUR_USD/tradeBalanceChart"
  width="100%"
  height="400"
  frameborder="0"
  loading="lazy"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="Trade Balance EUR/USD | FXMacroData">
</iframe>

Voici une mise en page pratique de plusieurs graphiques pour un article d'analyse hebdomadaire de l'EUR/USD:

<!-- Section 1: Rate differential -->
<h3>Rate Differential</h3>
<iframe src="https://fxmacrodata.com/dashboard/embed/EUR_USD/carryChart"
  width="100%" height="400" frameborder="0" loading="lazy"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="EUR/USD Carry Trade"></iframe>

<!-- Section 2: Yield spread -->
<h3>10-Year Yield Differential</h3>
<iframe src="https://fxmacrodata.com/dashboard/embed/EUR_USD/yieldDiffChart"
  width="100%" height="400" frameborder="0" loading="lazy"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="EUR/USD 10Y Yield Differential"></iframe>

<!-- Section 3: Inflation comparison -->
<h3>Inflation Regimes</h3>
<iframe src="https://fxmacrodata.com/dashboard/embed/EUR_USD/inflationChart"
  width="100%" height="400" frameborder="0" loading="lazy"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="EUR/USD Inflation Comparison"></iframe>

Étape 7: Retour au tableau de bord complet

Chaque graphique intégré est une vue en direct en lecture seule. Pour les lecteurs qui souhaitent explorer davantage les paires de commutateurs, les plages de dates de changement ou creuser dans l'historique des indicateurs individuels lier à l'ensemble du tableau de bord FXMacroData. Une courte ligne d'attribution sous chaque graphique crédite à la fois la source de données et donne à vos lecteurs un chemin vers une analyse plus approfondie:

<iframe
  src="https://fxmacrodata.com/dashboard/embed/EUR_USD/carryChart"
  width="100%" height="400" frameborder="0"
  style="border:1px solid #e5e7eb; border-radius:8px;"
  title="EUR/USD Carry Trade | FXMacroData">
</iframe>
<p style="font-size:0.8rem; color:#64748b; margin-top:4px;">
  Data: <a href="https://fxmacrodata.com/dashboard/EUR_USD"
    target="_blank" rel="noopener">FXMacroData — EUR/USD Dashboard</a>
</p>

Types de graphiques disponibles en un coup d'œil

Identifiant du graphique	Étiquette	Utilisé pour
CarryChart	Commercialisation	Différentiel de taux, opérations à but lucratif
Résultat différentiel	Différentiel de rendement 10Y	Divergence du marché obligataire, attentes en matière de taux
Le taux de rendement	La courbe de rendement (10s2s)	Signal de récession, tendance à la hausse ou à l'aplatissement
inflation graphique	Comparaison de l'inflation	Analyse du régime des IPC, divergence des banques centrales
inflationDiff Graphique	Différentiel d'inflation	Divergence de la parité du pouvoir d'achat
Chart du chômage	Taux de chômage	Différence sur le marché du travail, mandat de la Fed/BCE
CommerceBilan graphique	Balance commerciale	Flux structurels des comptes courants

Que se passe-t-il lorsque de nouvelles données sont publiées ?

Chaque graphique intégré extrait des données en direct du pipeline d'annonces de FXMacroData. rapport sur l'inflationJe suis désolé . décision de la banque centrale relative aux taux, ou un Impression des listes de paie non agricoles les données de graphique dans Firestore sont mises à jour en quelques minutes de la sortie officielle.

Vous n'avez pas besoin de republier votre article de blog, de vider un cache ou de mettre à jour un code intégré. L'iframe récupère toujours des données fraîches à chaque chargement. Cela signifie qu'un article que vous écrivez aujourd'hui sur le trading de portage EUR/USD continuera à afficher des données précises et actuelles aux lecteurs qui le trouvent par la recherche dans six mois.

Aucune clé API requise

La vue de widget intégrée est gratuite et ne nécessite aucune clé API. Toute page sur le Web public peut charger ces graphiques. Une clé API n'est nécessaire que si vous souhaitez interroger les données macroéconomiques brutes de manière programmatique via l'API REST (par exemple, pour créer vos propres graphiques personnalisés ou automatiser l'analyse).

Fin de la série

Vous avez maintenant tout ce dont vous avez besoin pour intégrer des macro graphiques en direct dans n'importe quel article de blog ou page web:

Regardez le Page de widgets ou utilisez le bouton Intégrer directement dans le tableau de bord pour trouver votre graphique
- Je vous reçois . <iframe> épisode
Collez-le dans le bloc HTML de votre CMS ou dans le champ d'intégration personnalisé
Optionnellement ajuster la hauteur et ajouter loading="lazy" pour les articles à plusieurs graphiques
Publier votre graphique est maintenant en ligne et auto-actualisé

La prochaine étape naturelle consiste à explorer l'ensemble complet des indicateurs macroéconomiques disponibles par l'intermédiaire de la La documentation de l'API FXMacroData est fournieSi vous voulez aller au-delà de l'intégration et de créer des graphiques personnalisés basés sur des données d'indicateur brutes par exemple, superposer les attentes de taux de politique contre votre propre sortie de modèle les endpoints de l"API REST pour taux de réglementationJe suis désolé . inflation, et rendements des obligations d'État vous donner un accès direct aux mêmes données qui alimentent ces widgets.

Securely Redirecting...

Comment intégrer un widget de macro en direct sur votre blog de trading