How to Embed a Live Macro Widget on Your Trading Blog

몇 분 안에 블로그에 실시간 매크로 차트를 가져오세요

워드프레스에서 거래 블로그를 운영하고, 노션에서 연구를 게시하거나, 고스트에서 금융 콘텐츠를 작성하든, 독자들은 실시간 데이터를 보고 싶어합니다. 게시 버튼을 누르면 나이가 들게 되는 정적 화면 촬영이 아닙니다. FXMacroData의 삽입 가능한 차트 위젯을 사용하면 단일 <iframe> 모든 페이지에 스니펙트를 넣고 즉시 실시간 거시 경제 차트를 제공하며, 새로운 버전마다 자동으로 업데이트됩니다.

이 가이드의 끝으로, 당신은 적어도 하나의 라이브 매크로 차트를 블로그에 내장하고, 통화 쌍을 사용자 정의하는 방법을 알고, 어떤 차트 유형이 사용 가능한지 이해하고, 백엔드를 만지거나 자바스크립트를 작성하지 않고도 모든 콘텐츠에 대해 위젯을 입력하고 교환할 수 있습니다.

필수 조건

시작 하기 전 다음 과 같은 것 들 을 가지고 있는지 확인 하십시오.

• 블로그 또는 웹사이트 페이지 본부에서 원시 HTML을 수용하는 모든 플랫폼: 워드프레스 (클래식 또는 블록 편집기), 고스트, 웹 플로우, 스퀘어 스페이스, Wix, 노션, 미디엄, 서브스택 또는 손으로 코딩 된 HTML 사이트.
• HTML을 삽입할 수 있습니다. 대부분의 CMS 플랫폼에서 이것은 "HTML 블록", "Custom HTML", 또는 "Embed" 블록이라고 불립니다. 서버 액세스 필요 없습니다.
• 브라우저 당신은 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) 각 통화의 국내 수익률 곡선의 급격성 또는 역전
• 기본 & 코팅 수익률 곡선 모양 쌍의 각 다리에 대한 개별 수익곡선의 스냅샷
• 인플레이션 비교 두 통화에서 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: 임베드 트 (embed snippet) 를 복사합니다

원하는 차트를 찾으면, "복사 코드" 위젯 카드의 버튼을 클릭하면 클립보드에 복사된 스니펫이 이렇게 보입니다.

<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 키가 없으며, 자바스크립트 의존도도 없으며, 추가 CDN도 로드할 수 없습니다.

단계 3: 임베드 URL 패턴을 이해

이프레임 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 입력값을 찾아서 i프레임 스니펫을 붙여넣습니다.

워드프레스 (클래식 편집기)

클래식 편집기 도구줄에서, 에서 전환 시각 탭으로 텍스트 탭. 게시물 본체에서 차트가 표시되는 곳을 붙여서 비주얼로 다시 전환하여 미리 보기

워드프레스 (블록 / 구텐버그 편집기)

클릭하세요 + 새로운 블록을 추가하는 버튼을 클릭합니다. 사용자 지정 HTML 그리고 그것을 선택. HTML 블록에 iframe 단편을 붙여넣어. 편집기의 미리보기 라이브 차트가 방문자에게 올바르게 렌더링되는 평면 표시를 표시 할 수 있습니다.

<!-- 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을 붙여넣습니다 (완전 이프레임 태그가 아닌 단지 src value) 로 임베드 URL 필드에 입력합니다.

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

스퀘어스페이스 / Wix / 웹플로우

이 플랫폼들 각각은 전용 코드 아니면 임베드 블록. 페이지에 하나를 추가하고 전체 iframe HTML 스니펫을 붙여 저장합니다. 스퀘어스페이스에서는 블록 삽입기의 "더 많은" 섹션 아래의 "코드 블록"입니다. Wix에서는 "사이트를 삽입하십시오" 위젯을 사용하여 "What's This?" → "HTML ifreme"를 선택하십시오. 웹 플로우에서는 추가 패널에서 "Embed" 구성 요소를 끌고 이동하십시오.

정적 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: 한 문서에 여러 개의 차트를 삽입하십시오

하나의 문서에는 필요한 만큼의 임베디드 차트가 포함될 수 있습니다. 각 i프레임은 독립적이기 때문에, 다부분야 분석 조각은 캐리 트레이드, 인플레이션 미화, 수익률 곡선을 순서대로 표시할 수 있습니다

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

새로운 자료가 공개 될 때 무슨 일이 일어나는가

임베디드 차트마다 FXMacroData의 발표 파이프라인에서 실시간 데이터를 가져옵니다. 인플레이션 보고서, a 중앙은행의 환율 결정또는 농부 외의 임금표 인쇄 파이어스토어에서 그래프 데이터는 공식 출시 후 몇 분 이내에 업데이트됩니다. 임베디드 그래프가 있는 페이지를 로드하거나 다시 로드하는 방문자는 자동으로 업데이트 된 데이터를 볼 수 있습니다.

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.

끝

이제 블로그 게시물이나 웹 페이지에 실시간 매크로 차트를 삽입하는 데 필요한 모든 것을 가지고 있습니다.

1. 을 검색하세요 위젯 페이지 또는 직접 대시보드에서 삽입 버튼을 사용하여 차트를 찾을 수 있습니다
2. 수신 <iframe>
3. CMS의 HTML 블록 또는 사용자 지정 임베드 필드에 붙여
4. 선택적으로 높이를 조정하고 추가합니다 loading="lazy" 다차트 제품
5. 게시 당신의 차트는 이제 라이브 및 자동 업데이트

다음 단계로서는 경제 전반에 대한 모든 makro-economic indicators를 FXMacroData API 문서. 당신이 내장 이상으로 이동하고 원시 지표 데이터에 의해 구동 사용자 정의 차트를 구축하고 싶다면, 예를 들어, 자신의 모델 출력 에 대한 정책 비율 기대를 덮어 REST API 최종 포인트 정책금리 인플레이션그리고 정부채권 수익률 이 위젯을 작동시키는 데이터에 직접 접근할 수 있게 해줍니다.