Wie man ein Live-Makro-Widget in den Trading-Blog einbettet

Bringen Sie Live-Makro-Diagramme in Minuten auf Ihren Blog

Egal, ob Sie einen Handelsblog auf WordPress betreiben, Forschung in Notion veröffentlichen oder Finanzinhalte auf Ghost schreiben, Ihre Leser wollen Live-Daten sehen nicht statische Screenshots, die im Moment, in dem Sie auf veröffentlichen, altern. <iframe> Sie können die Daten in jeder beliebigen Seite einfügen und sofort Echtzeit-Makroökonomische Diagramme anzeigen, die bei jeder neuen Version automatisch aktualisiert werden.

Am Ende dieses Leitfadens haben Sie mindestens ein live Makro-Chart in Ihrem Blog eingebettet, wissen, wie Sie das Währungspaar anpassen, verstehen, welche Chart-Typen verfügbar sind und Widgets für jeden Inhalt ein- und auswechseln können, ohne Ihr Backend zu berühren oder JavaScript zu schreiben.

Voraussetzungen

Bevor du damit beginnst, solltest du dir die folgenden Dinge ansehen:

• Ein Blog oder eine Website jede Plattform, die Roh-HTML im Body der Seite akzeptiert: WordPress (Classic oder Block Editor), Ghost, Webflow, Squarespace, Wix, Notion, Medium, Substack oder eine handcodierte HTML-Website.
• Die Möglichkeit, HTML einzufügen in den meisten CMS-Plattformen wird dies als "HTML-Block", "Custom HTML" oder "Embed"-Blok bezeichnet.
• Ein Browser Sie erzeugen das Snippet von der Seite der FXMacroData-Widgets; keine Konten oder API-Schlüssel sind für die eingebettete Ansicht erforderlich.

Schritt 1: Wählen Sie Ihr Chart und Ihr Währungspaar

Navigieren Sie zur Seite der FXMacroData Widgets Siehe auch die folgenden Informationen zu den wichtigsten Merkmalen der Forex-Markt- und Handelsstrategie:

• Handel mit die Nettorendite aus der Halte einer Longposition in der höher ertraglichen Währung
• 10Y Ertragsdifferenz der Unterschied zwischen den Renditen von 10-jährigen Staatsanleihen für ein Währungspaar
• Ertragskurve (10s2s) die Steigung oder Inversion der inländischen Renditekurve jeder Währung
• Basis- und Quote-Ertragskurvenform individuelle Kurvenbilder für jede Etappe des Paares
• Vergleich der Inflation Kopie des KPI für beide Währungen
• Inflationdifferenz die Inflationsdifferenz zwischen den beiden Volkswirtschaften
• Arbeitslosenquote Vergleiche des Arbeitsmarktes, ein wichtiger Faktor für die Zinsentscheidungen der Zentralbanken
• Handelsbilanz Daten über den Leistungsbilanzfluss, oft ein langsamer Treiber struktureller Wechselkursentwicklungen

Wählen Sie ein Währungspaar mit dem Paarselektor oben auf der Widgets-Seite aus. Fünf Standardpaare werden angeboten EUR/USD, GBP/USD , USD/JPY, AUD/USD und USD/CAD oder Sie können jedes Paar direkt in die Dashboard-Einbettungs-URL eingeben, sobald Sie das URL-Muster verstanden haben (in Schritt 3 behandelt).

Für die meisten Handelsblogs ist der Handel mit Oder ... 10Y Ertragsdifferenz Wenn Ihr Blog ein bestimmtes Paar oder eine bestimmte Region abdeckt, wählen Sie das Chart, das am besten mit der These des Artikels übereinstimmt, den Sie schreiben.

Schritt 2: Kopieren Sie den Einbettungsstück

Wenn Sie das gewünschte Diagramm gefunden haben, klicken Sie auf "Kopieren" Der auf Ihre Zwischenablage kopierte Snippet sieht so aus:

<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>

Das ist das komplette Einbetten nichts anderes ist erforderlich. Das Diagramm lädt Live-Daten aus dem Backend von FXMacroData, rendert im Browser des Lesers und aktualisiert sich automatisch, wenn neue makroökonomische Ankündigungen veröffentlicht werden. Es gibt keinen API-Schlüssel im Snippet, keine JavaScript-Abhängigkeit und keine zusätzliche CDN zum Laden.

Schritt 3: Verständnis für das URL-Pattern für die Einbettung

Die URL der iframe folgt einer einfachen, vorhersehbaren Struktur:

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

Wo ? {PAIR} ist das Währungspaar in BASE_QUOTE Format (z. B. EUR_USD- Ich weiß . GBP_USD- Ich weiß . USD_JPY) und {CHART_ID} ist eine der unterstützten Kartenkennungen:

• carryChart Handel betreiben
• yieldDiffChart 10Y Ertragsdifferenz
• yieldCurveChart Ertragskurve (10s2s)
• baseYieldCurveShape Basis-Ertragskurve
• quoteYieldCurveShape Kurve der Quote-Ertragskurve
• inflationChart Vergleich der Inflation
• inflationDiffChart Inflationsdifferenz
• unemploymentChart Arbeitslosenquote
• tradeBalanceChart Handelsbilanz

Zum Beispiel wäre die URL für die Einbettung des Inflationsdifferenzialdiagramms für GBP/USD:

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

Sie können jede Kombination manuell konstruieren Sie müssen nicht jedes Mal zur Widgets-Seite zurückkehren, wenn Sie das Muster kennen.

Schritt 4: Einfügen in Ihre Blogplattform

Die folgenden Schritte decken die gängigsten Plattformen ab. Das Prinzip ist immer gleich: Finde die Roh-HTML-Eingabe für den Inhaltblock, wo du das Diagramm möchtest, und füge den iframe-Snippet dort ein.

WordPress (Klassiker-Editor)

In der klassischen Editor-Toolbar wechseln Sie von der Sichtbarkeit Tab zur Text Kleben Sie den Snippet ein, wo Sie möchten, dass das Diagramm im Postkörper erscheint, und wechseln Sie dann zurück zu Visual, um ihn zu sehen.

WordPress (Block / Gutenberg Editor)

Klicken Sie auf + Schaltfläche, um einen neuen Block hinzuzufügen. Benutzerdefinierte HTML Die Vorsicht im Editor kann einen Platzhalter zeigen, der das Live-Chart für Besucher korrekt rendert.

<!-- 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>

Geister

In den Ghost-Editor schreibst du /html Ghost stellt die iframes ohne zusätzliche Konfiguration nativ dar.

Begriff

In der Definition /embed um einen Einbettungsblock einzufügen. Fügen Sie die vollständige Einbettesite ein (nicht das vollständigen iframe-Tag nur die src Die Angabe des Widschets wird inline erstellt.

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

Squarespace / Wix / Webflow

Jede dieser Plattformen hat eine eigene Code Oder ... Einbinden block. Fügen Sie einen zu Ihrer Seite hinzu, fügen Sie den vollständigen iframe HTML-Snippet ein und speichern Sie. Für Squarespace ist dies der "Code Block" unter dem Abschnitt "Mehr" im Block-Einfüger. Für Wix verwenden Sie das Widget "Embed a Site" und wählen Sie "What's This?" → "HTML ifrake". Für Webflow ziehen Sie eine "Embabe" -Komponente aus dem Hinzufügen-Panel ein.

Statische HTML- oder benutzerdefinierte Website

Fügen Sie den Snippet direkt in Ihre HTML-Datei an der Stelle des Artikels ein, an der das Diagramm angezeigt werden soll.

<!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>

Schritt 5: Anpassen von Breite und Höhe

Die Standard-Embed-Dimensionen funktionieren gut für die meisten Standard-Blog-Layouts, aber Sie können sie für Ihr Design anpassen. width Und ... height auf dem iframe-Tag.

Verwenden width="100%" um das Diagramm reaktionsschnell zu machen und seinen Behälter zu füllen dies wird für mobilfreundliche Layouts empfohlen.

• 400px kompakt; gut für eine enge Seitenleiste oder zwischen kurzen Absätzen
• 500px Standard; passt zu den meisten Artikellayouts
• 600px großzügig; ideal, wenn das Diagramm das visuelle Mittelpunkt eines datenorientierten Abschnitts bildet

<!-- 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>

Vermeiden Sie es, eine feste Pixelbreite festzulegen es erzeugt horizontale Scrollung auf dem Handy. width="100%" und lassen Sie die Spaltenbreite Ihrer Seite das Diagramm natürlich einschränken.

Schritt 6: Einbettung mehrerer Diagramme in einen Artikel

Ein einzelner Artikel kann so viele eingebettete Diagramme enthalten, wie Sie benötigen. Jeder iframe ist unabhängig, so dass ein mehrstufiges Analyse-Stück die Carry-Trade, den Inflationsdifferenzial und die Rendite-Kurve in Reihenfolge zeigen kann, die jeweils in Echtzeit für jeden Besucher aktualisiert werden, der den Artikel Wochen oder Monate nach der Veröffentlichung liest.

<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>

Hier ein praktisches Multi-Chart-Layout für einen EUR/USD-Wochenanalysenpost:

<!-- 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>

Schritt 7: Verlinkung zum vollständigen Dashboard

Jedes eingebettete Diagramm ist eine Live-Lese-View. Für Leser, die weitere Switch-Paare, Änderungen von Datumsbereichen oder die Geschichte einzelner Indikatoren erforschen möchten sie mit dem vollständigen FXMacroData-Dashboard verknüpfen. Eine kurze Attributionszeile unterhalb jedes Diagramms zeichnet sowohl die Datenquelle als auch Ihren Lesern einen Weg zu einer tieferen Analyse:

<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>

Was passiert, wenn neue Daten veröffentlicht werden?

Jedes eingebettete Diagramm zieht Live-Daten aus der Ankündigungspipeline von FXMacroData. Inflationsauskunft- Ich weiß . Zentralbank-Zinsentscheidung, oder ein Ausdruck der Lohnlisten für nicht landwirtschaftliche Betriebe die Diagrammdaten in Firestore werden innerhalb weniger Minuten nach der offiziellen Veröffentlichung aktualisiert.

Sie müssen Ihren Blogbeitrag nicht neu veröffentlichen, einen Cache löschen oder einen eingebetteten Code aktualisieren. Der iframe holt immer neue Daten bei jeder Last ab. Dies bedeutet, dass ein Beitrag, den Sie heute über den EUR/USD-Carry-Trade schreiben, den Lesern, die ihn in sechs Monaten durch Suche finden, weiterhin genaue, aktuelle Daten zeigt.

Abschluss

Sie haben jetzt alles, was Sie brauchen, um Live-Makro-Diagramme in jeden Blog-Post oder Webseite einbinden:

1. Durchsuchen Sie die Widgets Seite oder benutzen Sie die Einbettungs-Taste direkt im Dashboard, um Ihr Diagramm zu finden
2. Verstanden . <iframe> Auszug
3. Fügen Sie es in den HTML-Block Ihres CMS oder benutzerdefiniertes Einbettungsfeld ein
4. Optional Höhenanpassung und Hinzufügung loading="lazy" für mehrfach-Tabellenartikel
5. Veröffentlichen Ihr Diagramm ist jetzt live und aktualisiert sich selbst

Der nächste natürliche Schritt besteht darin, die gesamte Reihe der durch die FXMacroData-API-Dokumentation. Wenn Sie über das Einbinden hinausgehen und benutzerdefinierte Diagramme erstellen möchten, die auf Rohindikatordaten basieren zum Beispiel, indem Sie die Erwartungen an die Leitzinsen mit Ihrem eigenen Modell-Output die REST API-Endpunkte für Zinssätze- Ich weiß . InflationUnd ... Zinssätze von Staatsanleihen Sie erhalten direkten Zugriff auf die Daten, die diese Widgets betreiben.