How to Embed a Live Macro Widget on Your Trading Blog

Bawa Live Makro Chart ke Blog Anda dalam beberapa menit

Apakah Anda menjalankan blog perdagangan di WordPress, menerbitkan penelitian di Notion, atau menulis konten keuangan di Ghost, pembaca Anda ingin melihat data langsung bukan tangkapan layar statis yang berusia saat Anda menekan publish. <iframe> Snippet ke halaman manapun dan segera menyajikan grafik makroekonomi real-time yang diperbarui secara otomatis dengan setiap rilis baru.

Pada akhir panduan ini, Anda akan memiliki setidaknya satu grafik makro langsung yang tertanam di blog Anda, tahu cara menyesuaikan pasangan mata uang, memahami jenis grafik yang tersedia, dan dapat menukar widget masuk dan keluar untuk setiap bagian konten tanpa menyentuh backend Anda atau menulis JavaScript.

Persyaratan

Sebelum memulai, pastikan Anda memiliki hal-hal berikut:

• Blog atau situs web setiap platform yang menerima HTML mentah dalam halaman tubuh bekerja: WordPress (Classic atau Block editor), Ghost, Webflow, Squarespace, Wix, Notion, Medium, Substack, atau situs HTML yang dikodekan dengan tangan.
• Kemampuan untuk memasukkan HTML di sebagian besar platform CMS ini disebut "blok HTML", "Custom HTML", atau "Embed" blok.
• Sebuah browser Anda akan menghasilkan cuplikan dari halaman widget FXMacroData; tidak ada akun atau kunci API yang diperlukan untuk tampilan tertanam.

Langkah 1: Pilih Chart dan Pasangan Mata Uang

Navigasi ke Halaman FXMacroData Widget untuk menelusuri semua jenis grafik yang tersedia yang dapat disematkan. Sembilan kategori grafik tersedia, yang mencakup sinyal makro yang paling diikuti oleh pedagang FX:

• Membawa Perdagangan laba bersih dari posisi panjang dalam mata uang yang lebih menguntungkan
• 10Y Hasil Diferensial perbedaan antara hasil obligasi pemerintah 10 tahun untuk pasangan mata uang
• Kurva Hasil (10s2s) kependekan atau inversi kurva imbal hasil domestik masing-masing mata uang
• Bentuk kurva hasil basis & kutipan gambar langsung kurva imbal hasil individu untuk setiap bagian dari pasangan
• Perbandingan Inflasi indeks harga konsumen utama di samping untuk kedua mata uang
• Diferensial Inflasi selisih tingkat inflasi antara kedua ekonomi
• Tingkat Pengangguran perbandingan pasar tenaga kerja, input utama untuk keputusan suku bunga bank sentral
• Saldo Perdagangan data arus akun saat ini, seringkali penggerak gerakan lambat dari tren struktural devisa

Pilih pasangan mata uang menggunakan pilihan pasangan di bagian atas halaman widget. Lima pasangan default ditawarkan EUR/USD, GBP/USD , USD/JPY, AUD/USD dan USD/CAD atau Anda dapat mengetik pasangan mana pun langsung ke URL embed dashboard setelah Anda memahami pola URL (dicakup dalam Langkah 3).

Untuk sebagian besar blog perdagangan, Membawa Perdagangan atau 10Y Hasil Diferensial Jika blog Anda mencakup pasangan atau wilayah tertentu, pilih grafik yang paling sesuai dengan tesis artikel yang Anda tulis.

Langkah 2: Salin Kutipan Masang

Setelah Anda menemukan grafik yang Anda inginkan, klik "Kode Salin" Snippet yang disalin ke clipboard akan terlihat seperti ini:

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

Ini adalah embed lengkap tidak perlu lagi. Bagan memuat data langsung dari backend FXMacroData, render di browser pembaca, dan memperbarui secara otomatis saat pengumuman makro baru dipublikasikan. Tidak ada kunci API dalam cuplikan, tidak ada ketergantungan JavaScript, dan tidak ada CDN tambahan untuk dimuat.

Langkah 3: Memahami Pola URL Embed

URL iframe mengikuti struktur yang sederhana dan dapat diprediksi:

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

Di mana? {PAIR} adalah pasangan mata uang di BASE_QUOTE format (misalnya EUR_USDAku akan pergi. GBP_USDAku akan pergi. USD_JPY) dan {CHART_ID} adalah salah satu dari pengidentifikasi grafik yang didukung:

• carryChart Melakukan Perdagangan
• yieldDiffChart 10Y Yield Differential
• yieldCurveChart kurva hasil (10s2s)
• baseYieldCurveShape Bentuk kurva hasil dasar
• quoteYieldCurveShape Bentuk kurva penawaran hasil
• inflationChart Perbandingan Inflasi
• inflationDiffChart Diferensial Inflasi
• unemploymentChart Tingkat Pengangguran
• tradeBalanceChart Saldo Perdagangan

Misalnya, untuk menyematkan grafik diferensial inflasi untuk GBP/USD, URLnya adalah:

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

Anda dapat membangun kombinasi apa pun secara manual tidak perlu kembali ke halaman widget setiap kali Anda tahu pola. Ini sangat berguna jika Anda mempertahankan template untuk posting analisis mingguan yang berulang dan ingin menukar pasangan atau indikator dengan cepat.

Langkah 4: Tempelkan ke Platform Blog Anda

Langkah-langkah di bawah ini mencakup platform yang paling umum. Prinsipnya selalu sama: cari input HTML mentah untuk blok konten di mana Anda ingin grafik, dan tempel cuplikan iframe di sana.

WordPress (Classic Editor)

Di toolbar editor klasik, beralih dari Visual Tab ke Teks Tempelkan cuplikan di mana Anda ingin grafik muncul di tubuh posting, kemudian beralih kembali ke Visual untuk melihat pratinjau.

WordPress (Blok / Gutenberg Editor)

Klik + tombol untuk menambahkan blok baru. HTML khusus dan pilih. tempelkan cuplikan iframe ke dalam blok HTML. pratinjau di editor mungkin menunjukkan placeholder grafik langsung render dengan benar untuk pengunjung.

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

Hantu

Di Ghost editor, ketik /html untuk memasukkan kartu HTML. tempel cuplikan di dalam blok kartu HTML Ghost membuat iframes secara native tanpa konfigurasi tambahan.

Pengertian

Dalam Notion, ketik /embed untuk memasukkan blok Embed. tempelkan URL full embed (bukan full iframe tag hanya src nilai) ke dalam bidang URL embed. Notion akan membuat widget inline.

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

Squarespace / Wix / Webflow

Masing-masing platform ini memiliki dedicated Kode atau Masang block. Tambahkan satu ke halaman Anda, tempelkan potongan HTML iframe penuh, dan simpan. Untuk Squarespace, ini adalah "Blok Kode" di bawah bagian "Lebih" di sisipan blok. Untuk Wix, gunakan widget "Masukkan Situs" dan pilih "Apa Ini?" → "HTML ifrake". Untuk Webflow, seret komponen "Masukan" dari panel Tambahkan.

HTML statis atau situs khusus

Tempelkan cuplikan langsung ke HTML Anda di titik di artikel di mana Anda ingin grafik muncul.

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

Langkah 5: Sesuaikan Lebar dan Tinggi

Dimensi embed default bekerja dengan baik untuk sebagian besar tata letak blog standar, tetapi Anda dapat menyesuaikan mereka untuk desain Anda. width Dan height pada tag iframe.

Gunakan width="100%" Untuk membuat grafik responsif dan mengisi wadahnya ini direkomendasikan untuk tata letak yang ramah seluler.

• 400px kompak; baik untuk bilah sisi yang sempit atau antara paragraf pendek
• 500px standar; cocok dengan sebagian besar tata letak artikel
• 600px murah hati; ideal jika grafik adalah pusat visual dari bagian yang berfokus pada data

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

Hindari pengaturan lebar piksel tetap itu menciptakan geser horizontal di ponsel. width="100%" dan biarkan lebar kolom halaman Anda membatasi grafik secara alami.

Langkah 6: Masukkan beberapa bagan ke dalam satu artikel

Setiap iframe independen, sehingga potongan analisis multi-bagian dapat menunjukkan perdagangan carry, diferensial inflasi, dan kurva imbal hasil secara berurutan masing-masing memperbarui secara real time untuk setiap pengunjung yang membaca artikel minggu atau bulan setelah publikasi.

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

Berikut ini adalah tata letak multi-chart praktis untuk posting analisis mingguan 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>

Langkah 7: Tautan Kembali ke Dashboard Lengkap

Setiap grafik yang disematkan adalah tampilan live read-only. Untuk pembaca yang ingin mengeksplorasi lebih lanjut pasangan switch, perubahan rentang tanggal, atau menggali sejarah indikator individu menghubungkan mereka ke dashboard FXMacroData penuh.

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

Apa yang Terjadi Ketika Data Baru Diumumkan

Setiap grafik tertanam menarik data langsung dari pipa pengumuman FXMacroData. laporan inflasiAku akan pergi. keputusan suku bunga bank sentral, atau cetakan daftar gaji non-pertanian data grafik di Firestore diperbarui dalam beberapa menit setelah rilis resmi.

Anda tidak perlu mempublikasikan ulang posting blog Anda, menghapus cache, atau memperbarui kode embed apa pun. iframe selalu mengambil data baru pada setiap muatan. Ini berarti posting yang Anda tulis hari ini tentang perdagangan carry EUR/USD akan terus menunjukkan data yang akurat dan terkini kepada pembaca yang menemukannya melalui pencarian enam bulan dari sekarang.

Penghujung

Anda sekarang memiliki semua yang Anda butuhkan untuk menyematkan grafik makro langsung di setiap posting blog atau halaman web:

1. Lihat di Halaman Widget atau gunakan tombol Masukkan langsung di dasbor untuk menemukan grafik Anda
2. Aku mengerti. <iframe> potongan
3. Menempelkannya ke dalam blok HTML CMS Anda atau bidang embed kustom
4. Opsional menyesuaikan tinggi dan menambahkan loading="lazy" untuk artikel multi-chart
5. Terbitkan grafik Anda sekarang hidup dan memperbarui diri

Langkah selanjutnya adalah untuk mengeksplorasi seluruh indikator makroekonomi yang tersedia melalui Dokumen FXMacroData APIJika Anda ingin melampaui embedding dan membangun grafik khusus yang didorong oleh data indikator mentah misalnya, tumpang tindih harapan kebijakan suku bunga terhadap output model Anda sendiri titik akhir REST API untuk suku bunga kebijakanAku akan pergi. inflasi, dan hasil obligasi pemerintah memberi Anda akses langsung ke data yang sama yang menyalakan widget ini.