在几分钟内将实时宏图带到您的博客

无论您是在WordPress上运行交易博客,在Notion上发布研究,还是在Ghost上写财务内容,您的读者都希望看到实时数据,而不是按发布时老化的静态截图.FXMacroData的嵌入式图表小工具允许您粘贴单个 <iframe> 立即提供实时宏观经济图表, 每次发布都会自动更新.

了解哪些图表类型可用,并且能够在不需要触摸后端或写任何JavaScript的情况下, 交换任何内容的小程序.

你将要建造什么

显示任何G10货币对的持有交易,收益率差异,通货膨胀比较或失业率, 没有API密钥,没有后端代码,也没有持续维护.

预先要求

在开始之前,请确保你有以下内容:

一个博客或网站 任何在页面主体中接受原始HTML的平台:WordPress (经典或区块编辑器),Ghost,Webflow,Squarespace,Wix,Notion,Medium,Substack或手写编码的HTML网站.
插入HTML的能力 在大多数CMS平台中,这被称为"HTML块","自定义HTML"或"嵌入"块.您不需要访问服务器.
一个浏览器 您将从FXMacroData小程序页面生成片段; 嵌入式视图不需要帐户或API键.

步骤1:选择图表和货币对

导航到汇率数据工具页查看所有可嵌入的图表类型.有九个图表分类,涵盖外汇交易者最密切关注的宏观信号:

进行贸易 持有较高收益率货币的长期仓位的净利率回报
收益率差异 货币对10年期政府债券收益率之间的差距
收益率曲线 (10s2s) 每个货币国内收益率曲线的度或反转
基数和报价收益率曲线形状 对对的每一阶段的单个收益率曲线快照
通货膨胀比较 两种货币的CPI总值
通货膨胀差异 两国经济之间的通胀率差距
失业率 劳动力市场比较,是中央银行决定利率的关键因素
贸易平衡 经常账户流量数据,通常是结构性外汇趋势的缓慢驱动因素

使用小工具页面顶部的对选择器选择货币对. 提供5个默认对: EUR/USD,GBP/USD ,USD/JPY,AUD/USD和USD/CAD,或者您可以在理解URL模式后直接输入任何对.

对于大多数交易博客来说, 进行贸易 没有 收益率差异 欧元/美元的图表是最普遍的起点. 如果你的博客涵盖一个特定的货币对或地区,请选择与你正在写文章的论文最符合的图.

步骤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进行加载.

另一个选择:从仪表板复制

每个图表都在主线上汇率数据仪表板并且有嵌入按它生成一个预先填充的iframesnippet,其中包含您当前选择的对和图表视图.

步骤3:理解嵌入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 贸易平衡

例如,如果要嵌入英/美元的通胀差距图,URL是:

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

您可以手动构建任何组合,不需要每次都回到小程序页面,一旦您知道模式. 如果您保持反复的每周分析帖子模板并希望快速交换对或指标,这特别有用.

步骤4:将其粘贴到您的博客平台中

下面的步骤涵盖了最常见的平台.原则总是相同:找到您想要的图表的内容块的原始HTML输入,并将iframe片段粘贴在那里.

华为 (经典编辑器)

在经典编辑器工具中,切换从视觉按下一个文本贴上你想要图表出现在帖子体内的片段,然后切换回视觉来预览.

华为 (块/古堡编辑器)

按下没有按添加一个新块. 搜索 定制HTML 选择它.将iframe片段粘贴到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卡块内的片段. 幽灵在没有任何额外配置的情况下本地染iframes.

概念

在概念中,打字 /embed 插入一个嵌入区块. 粘贴完整的嵌入URL (不是完整iframe标签只是 src 值) 进入嵌入URL字段.

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

广场空间 / 维克斯 / 网页流

每个平台都有一个专门的代码没有嵌入区块. 在页面上添加一个,粘贴完整的iframe HTML片段,然后保存.对于Squarespace,这是区块插入器中的"更多"部分下的"代码区块".对于Wix,使用"嵌入网站"小程序,选择"What's This?" →"HTML iframe".对于Webflow,从添加面板拖入"嵌进"组件.

静态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 在iframe标签上.

使用 width="100%" 设置一个适合图类型的固定像素高度:

图片来源: 紧;适合狭窄的侧或短段之间的段落
图片来源: 标准;适合大多数文章布局
图片来源: 宽泛;如果图表是数据中心部分的视觉中心,则非常适合

<!-- 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都是独立的,因此多部分分析可以显示随序的带交易,通胀差异和收益率曲线,每个更新的实时为任何读者阅读文章后几周或几个月.

性能说明

每个iframe都会加载一个单独的图表页面. 如果您在单个文章中嵌入了三个以上的图形,请考虑将较不重要的图表放在页面的下方,以便它们慢慢加载.您可以添加 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>

简单的查看可用的图表类型

图表标识	标签	最适合使用
带走图	进行贸易	利率差异,寻求收益的交易
收益率不同图	收益率差异	债券市场分歧,利率预期
收益率曲线图	收益率曲线 (10s2s)	经济衰退信号,趋势趋于稳定/平坦
通货膨胀图	通货膨胀比较	价格指数制度分析,央行差异
通货膨胀差异图	通货膨胀差异	购买力平价差异
失业率图	失业率	劳动力市场分歧,美联储/欧洲央行任务
贸易资产负债表	贸易平衡	结构性经常账户流动

当新数据发布时会发生什么

每个嵌入式图表都从FXMacroData的公告管道中提取现场数据. 通货膨胀报告没有中央银行利率决定没有一个农业以外的工资表图表数据在 Firestore 中更新后几分钟内正式发布.任何访问者加载或重新加载嵌入图表的页面都会自动看到更新的数据.

您不需要重新发布您的博客帖子,清除缓存或更新任何嵌入代码. iframe 始终会在每次加载时获取新数据. 这意味着您今天写的关于欧元/美元携带交易的帖子将继续向通过搜索找到它的读者显示准确,最新的数据.

没有API键

嵌入式小工具视图是免费的,不需要API键.公共网络上的任何页面都可以加载这些图表.只需要通过REST API程序查询原始宏观经济数据 (例如,构建自己的自定义图表或自动分析) 才能需要API钥匙.

结束

现在你有了你需要嵌入任何博客文章或网页的实时宏图的所有东西:

浏览工具页面或直接在仪表板中使用嵌入按找到您的图表
收到 <iframe> 片段
粘贴到您的CMS的HTML块或自定义嵌入字段
选择性调整高度并添加 loading="lazy" 对于多图表的物品
发布您的图表现在是现场和自动更新

下一步自然是探索通过"经济报告"可用的全套宏观经济指标. 汇率数据的应用程序文档您可以通过REST API终点点来建立自定义图表,并将其与您的模型输出相对应. 政策利率没有人知道. 货币膨胀没有美国政府债券收益率让您直接访问这些小工具的数据.

How to Embed a Live Macro Widget on Your Trading Blog