Live release feed
Release-timestamped macro data for FX backtests
Point-in-time history
USD 50/month
無料トライアル開始
Back to Library How-To Guides

Implementation

How-To Guides

How to Embed a Live Macro Widget on Your Trading Blog

WordPress,Notion,Ghost,または他のブログプラットフォームに単一のiframeスニペットを貼り付け,すべての新しいリリースで自動的に更新されるリアルタイムFXMacroData指標チャートを提供します.

By

• Published • Updated
他言語版 English
Share article X LinkedIn Email
How to Embed a Live Macro Widget on Your Trading Blog image

ブログにマクロチャートを数分で生かしてください

オンライン取引のブログを WordPress で運営する,Notion で研究を公開する,または Ghost で財務コンテンツを書いていると,読者はライブデータを見るがよい. 公開を押す瞬間に古い静的スクリーンショットではなく. FXMacroData の埋め込み可能なチャートウィジェットは,単一の <iframe> リアルタイムマクロ経済チャートを即座に提供し,新しいリリースごとに自動的に更新します.

通貨ペアをカスタマイズする方法,利用可能なチャートタイプを理解し,バックエンドに触らず JavaScriptを書かずにあらゆるコンテンツのウィジェットを入れ替えることができます.

あなた が 築く もの

ブログ記事に埋め込まれた 自動更新可能な マクロチャートで 携帯取引,利回り差,インフレ比較,または G10通貨ペアの失業率を表示します APIキー,バックエンドコード,継続的なメンテナンスなしで

条件

始める 前 に,次の こと を 確認 し て ください.

  • ブログやウェブサイト ページのボディで使用できる原始HTMLを サポートするプラットフォームは誰でもできます. WordPress (Classic or Block editor),Ghost,Webflow,Squarespace,Wix,Notion,Medium,Substack,手書きのHTMLサイトなどです.
  • HTML を挿入する能力 ほとんどのCMSプラットフォームでは,これを"HTMLブロック","カスタムHTML",または"エンベッド"ブロックと呼びます.サーバーへのアクセスは必要ありません.
  • ブラウザ FXMacroData ウィジェットページからスニペットを生成します. 埋め込みビューにはアカウントや API キーが必要です.

ステップ 1: グラフ と 通貨 ペア を 選べ

移動する FXMacroData ウィジェットページ to browse all available embeddable chart types. Nine chart categories are available, covering the macro signals that FX traders track most closely:

  • 貿易を進め 利回りが高い通貨のロングポジションの純金利収益
  • 10Y 利回り差 通貨ペアの10年期国債の利回りの差
  • 収益率曲線 (10s2s) 各通貨の国内利回り曲線の急さまたは逆転
  • ベース&コート イーデンスの曲線形 双方の各段落の各 yield 曲線のスナップショット
  • インフレ比較 両国通貨のCPIの表記
  • インフレ差分 両国のインフレ率の差
  • 失業率 労働市場比較,中央銀行の利率決定における重要な要素
  • 貿易バランス 経常口座の流量データ,しばしば構造的外為動向の遅い動向要因

Select a currency pair using the pair selector at the top of the widgets page. Five default pairs are offered — EUR/USD, GBP/USD, USD/JPY, AUD/USD, and USD/CAD — or you can type any pair directly into the dashboard embed URL once you understand the URL pattern (covered in Step 3).

取引のブログでは 貿易を進め ほら 10Y 利回り差 EUR/USDのチャートは,最も普遍的に関連のある出発点です.あなたのブログが特定のペアまたは地域をカバーしている場合は,あなたが書いている記事の論文に最も合致するチャートを選択してください.

ステップ2: 埋め込みスニペットをコピー

必要なチャートを見つけたら, "コピーコード" 切り口はこんな感じになります.

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

グラフはFXMacroDataのバックエンドからライブデータをロードし,リーダーブラウザでレンダリングし,新しいマクロ経済発表が公開されるにつれて自動的にリフレッシュします.スニペットにはAPIキー,JavaScript依存性,追加的なロードCDNはありません.

代替: ダッシュボードからコピー

メインの内部の全ての図 FXMacroData ダッシュボード も持ってる 埋め込む 画面のヘッダにボタンをクリックすると,当時に選択したペアとチャートビューでプリフィールされたiframeスニペットが生成されます.

ステップ3: 埋め込み URL パターンを理解する

iframe URL はシンプルで予測可能な構造をたどります

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

どこに {PAIR} 通貨ペアが BASE_QUOTE 形式 (例えば EUR_USDほら GBP_USDほら USD_JPY) と {CHART_ID} サポートされているチャート識別子の一つである.

  • carryChart 貿易 を 行なう
  • yieldDiffChart 10Y の 収益差
  • yieldCurveChart 収益率曲線 (10s2s)
  • baseYieldCurveShape ベース・リデンド・カーブ形
  • quoteYieldCurveShape 引換率率曲線形
  • inflationChart インフレ比較
  • inflationDiffChart インフレ差分
  • unemploymentChart 失業率
  • tradeBalanceChart 貿易バランス

例えば,GBP/USDのインフレ差グラフを埋め込むには,URLは以下になります.

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

パターンを知っているたびにウィジェットページに戻る必要がない.これは,週に繰り返し分析投稿のためのテンプレートを維持し,ペアまたはインジケーターを迅速に交換したい場合特に役立ちます.

ステップ4:ブログプラットフォームに貼り付け

グラフの設定の基本原理は,グラフが表示されるコンテンツブロックの原始HTML入力を見つけ,iframeスニペットをそこに貼る.

WordPress (クラシックエディター)

クラシックエディタツールバーで, 切り替える 視覚 ターブに テキスト 画面の画面の部分に表示されるようにします.

WordPress (ブロック / グーテンバーグ編集)

押す + 新しいブロックを追加するボタンをクリックします. パーソナル HTML 編集者のプレビューは,プレースホルダーを表示する可能性があります. 訪問者にとってライブチャートは正しく表現されます.

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

ゴースト

幽霊編集に タイプします /html HTMLカードを挿入する. HTMLカードブロックの中にスニペットを貼る. Ghostは,追加の構成なしで iframes をネイティブにレンダリングします.

概念

概念でタイプする /embed 埋め込みブロックを挿入する.埋め込みURLを完全に貼る (iframeタグを全部貼るのではなく,ただ src widget をインラインにする.

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

スクウェアスペース / ウィックス / Webflow

プラットフォームにはそれぞれ専用 コード ほら 埋め込む block. Add one to your page, paste the full iframe HTML snippet, and save. For Squarespace, this is the "Code Block" under the "More" section in the block inserter. For Wix, use the "Embed a Site" widget and select "What's This?" → "HTML iframe". For Webflow, drag in an "Embed" component from the Add panel.

静的 HTML またはカスタム サイト

記事の画面が表示される場所に HTML に直接スニペットを貼り付けます.追加のスクリプトや依存関係は必要ありません.

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

ステップ 5: 幅と高さを調整する

標準的なブログレイアウトではうまく動作しますが,デザインに合わせて調整できます. キーパラメータは width ほら height 画像のタグに

使用する width="100%" 図表を応答性のあるものとし,その容器を埋めます.これはモバイルに適したレイアウトに推奨されます.図表型に適する固定ピクセル高さを設定します:

  • 400px 狭いサイドバーや短段落の間には適しています
  • 500px 標準;ほとんどの記事のレイアウトに適しています
  • 600px 図面がデータ中心のセクションの視覚的な中心部である場合,理想的です
<!-- 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>

固定したピクセル幅を設定しないでください. 移動で水平スクロールを作成します. width="100%" ページの列幅が自然にチャートを制限します

ステップ 6: 一つの記事に複数のチャートを埋め込む

単一の記事には必要な限り多くの埋め込みチャートが含まれます.各iframeは独立しています.したがって,複数のセクションの分析パーツは,記事の発行後数週間または数ヶ月間記事を読む訪問者にとってリアルタイムで更新される順番で,キャリアトレード,インフレ差率,収益率曲線を表示できます.

性能に関する注意事項

Each iframe loads a separate chart page. If you are embedding more than three charts in a single article, consider placing the less critical ones lower in the page so they load lazily. You can add loading="lazy" 現代のブラウザでネイティブで怠け者読み込みの iframe タグに:

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

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>

ステップ 7: 完全なダッシュボードへリンク

組み込みチャートごとに,生放送で読み取り可能なビューです. 詳細を探求したい読者向けに,スイッチペア,変更日付範囲,または個々の指標履歴を掘り下げたい読者向けの, FXMacroDataのダッシュボードにリンクします. 各チャートの下の短い属性線は,データソースをクレジットし,読者により深い分析への道を示します:

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

入手 できる 表 の 種類 を 一見 に 見る

図表のID レーベル 適当に使用する
carryチャート 貿易を進め 利回り差,収益を求める取引
yieldDiffチャート 10Y 利回り差 債券市場差異,金利予想
yieldCurveグラフ 収益率曲線 (10s2s) 景気後退の兆候,急上昇/平坦化
インフレ グラフ インフレ比較 CPIの分析,中央銀行の差異
インフレ 差異図 インフレ差分 購買力平価差
失業率 グラフ 失業率 労働市場差異,Fed/ECBの権限
貿易 バランスグラフ 貿易バランス 構造的経理流量

新しい データ が 公開 さ れる 時 に 何 が 起こる か

組み込みチャートごとに FXMacroDataの発表パイプラインからライブデータを抽出します. インフレ報告ほら 中央銀行のレート決定ほら ほろ 農地以外の賃金の印刷 Firestore のチャートデータは,公式リリースから数分以内に更新されます. 組み込みチャートのあるページを読み込むまたは再読み込む訪問者は,自動的に更新されたデータを表示されます.

You do not need to republish your blog post, clear a cache, or update any embed code. The iframe always fetches fresh data on each load. This means a post you write today about the EUR/USD carry trade will continue to show accurate, current data to readers who find it through search six months from now.

API キー不要

組み込みウィジェットビューは無料でAPIキーを必要としません. 公共ウェブ上のどのページでもこれらのチャートをロードできます. REST APIを通じてプログラム的に生 Macroeconomic データに問い合わせたい場合 (例えば,独自のカスタムチャートを作成したり,分析を自動化したりするには) しか APIキーが必要です.

終わり

ブログ記事やウェブページに生きたマクロチャートを埋め込むには必要なものがあります

  1. 検索する ウィジェットページ ダイッシュボードに直接埋め込むボタンをクリックしてチャートを検索してください
  2. わかった <iframe> 断片
  3. 設定した埋め込みフィールドに貼る
  4. 選択的に高度を調整して追加します loading="lazy" 複数のチャートを持つ物品
  5. 公開 あなたのチャートは現在ライブで自己更新されています

グローバル経済における経済指標の総集計を調査する FXMacroData API のドキュメント標準指標データによって動かすカスタムチャートを作成します. 例えば,政策利率の期待を,自分のモデル出力量に対して上層化します. 政策金利ほら インフレほら 政府の債券の収益率 直接アクセスできます デバイスのデータも

View All Articles

More Articles

See all →

Blogroll

Quantocracy

AI Answer-Ready

Key Facts

Page
How To Embed Macro Widget Trading Blog
Section
Articles
Canonical URL
https://fxmacrodata.com/ja/articles/how-to-embed-macro-widget-trading-blog
Source
FXMacroData editorial and official publisher references
Last Updated
2026-06-15 11:01 UTC

Provenance And Trust

Cite the canonical URL and source field above. Where available, this page maps to official publisher releases and timestamped updates.

Quick Q&A

What is this page about? This page explains How To Embed Macro Widget Trading Blog with directly usable context for trading, research, and API workflows.

What source should be cited? Use the canonical URL and the listed source field; cite official publisher references when available.

How fresh is this content? The last updated value above reflects the page metadata or latest available data timestamp.

Can this be used in AI assistants? Yes. This section is intentionally structured for retrieval and citation in chat assistants.

Prompt Packs

Use these in ChatGPT, Claude, Gemini, Mistral, Perplexity, or Grok for consistent source-aware outputs.

Summarize article with AI:

ChatGPT Perplexity Claude Grok Gemini Mistral