Traga gráficos de macros ao seu blog em minutos

Se você executa um blog de negociação no WordPress, publica pesquisas no Notion ou escreve conteúdo financeiro no Ghost, seus leitores querem ver dados ao vivo não capturas de tela estáticas que envelhecem no momento em que você clica em publicar. <iframe> O programa de informação é baseado em gráficos macroeconómicos em tempo real que são atualizados automaticamente a cada nova versão.

No final deste guia, você terá pelo menos um gráfico de macro vivo incorporado em seu blog, saberá como personalizar o par de moedas, entender quais tipos de gráficos estão disponíveis e ser capaz de trocar widgets para qualquer conteúdo sem tocar no backend ou escrever JavaScript.

O que você vai construir

Um gráfico macro em tempo real, que se atualiza automaticamente, incorporado na sua postagem no blog mostrando carregamento de comércio, diferenciais de rendimento, comparações de inflação ou taxas de desemprego para qualquer par de moedas do G10 sem chave de API, sem código de back-end e sem manutenção contínua.

Requisitos

Antes de começar, verifique se tem o seguinte:

Um blog ou um website qualquer plataforma que aceite HTML bruto no corpo da página funciona: WordPress (Classic ou Block editor), Ghost, Webflow, Squarespace, Wix, Notion, Medium, Substack, ou um site HTML codificado manualmente.
A capacidade de inserir HTML na maioria das plataformas CMS, isso é chamado de "bloco HTML", "HTML personalizado" ou "embed".
Um navegador você gerará o snippet a partir da página de widgets FXMacroData; não são necessárias contas ou chaves de API para a visualização incorporada.

Passo 1: Escolha seu gráfico e par de moedas

Navegação para o Página de Widgets FXMacroData Para navegar por todos os tipos de gráficos incorporáveis disponíveis, existem nove categorias de gráfico disponíveis que cobrem os sinais macro que os traders de FX seguem mais de perto:

Comércio o rendimento da taxa de juro líquida resultante da detenção de uma posição longa na moeda de maior rendimento
10Y Diferencial de rendimento o diferencial entre os rendimentos das obrigações do governo a 10 anos de um par de moedas
Curva de rendimento (10s2s) a inclinação ou inversão da curva de rendimento interno de cada moeda
Base & Curva de rendimento de cotação instantâneos individuais da curva de rendimento para cada perna do par
Comparação da inflação índice de preços de compra e venda paralelamente para ambas as moedas
Diferencial de inflação a diferença entre as taxas de inflação das duas economias
Taxa de desemprego comparação do mercado de trabalho, um elemento essencial para as decisões sobre as taxas de juro dos bancos centrais
Balança comercial dados de fluxo de balança corrente, frequentemente um motor de evolução lenta das tendências estrutural de câmbio

Selecione um par de moedas usando o seletor de pares na parte superior da página de widgets. Cinco pares padrão são oferecidos EUR/USD, GBP/USD , USD/JPY, AUD/USD e USD/CAD ou você pode digitar qualquer par diretamente no URL de incorporação do painel uma vez que você entenda o padrões de URL (aberto na etapa 3).

Para a maioria dos blogs de negociação, o Comércio Ou ... 10Y Diferencial de rendimento Se o seu blog cobre um par ou região específica, escolha o gráfico que melhor corresponde à tese do artigo que você está escrevendo.

Passo 2: Copie o trecho de inserção

Uma vez encontrado o gráfico que deseja, clique no "Codificação" O snippet copiado para o seu clipboard vai parecer assim:

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

O gráfico carrega dados ao vivo do backend do FXMacroData, é processado no navegador do leitor e atualizado automaticamente à medida que novos anúncios macroeconômicos são publicados.

Alternativa: Copiar do painel

Todos os mapas dentro da principal . Painel de controle FXMacroData também tem um Incorporar Clique nele para gerar um snippet de iframe pré-preenchido com o par atualmente selecionado e visualização do gráfico útil se você já estiver navegando no painel e quiser incorporar exatamente o gráfico que está olhando.

Passo 3: Entenda o Padrão de URL de Incorporação

O URL do iframe segue uma estrutura simples e previsível:

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

Onde ? {PAIR} é o par de moedas em BASE_QUOTE formato (por exemplo: EUR_USD- Não . GBP_USD- Não . USD_JPY) e {CHART_ID} É um dos identificadores de gráfico suportados:

carryChart Comércio
yieldDiffChart Diferencial de rendimento 10Y
yieldCurveChart Curva de rendimento (10s2s)
baseYieldCurveShape Forma da curva de rendimento de base
quoteYieldCurveShape Forma da curva de rendimento de citação
inflationChart Comparação da inflação
inflationDiffChart Diferencial de inflação
unemploymentChart Taxa de desemprego
tradeBalanceChart Balança comercial

Por exemplo, para incorporar o gráfico do diferencial de inflação para GBP/USD, a URL seria:

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

Você pode construir qualquer combinação manualmente sem necessidade de voltar à página de widgets cada vez que você conhece o padrão.

Passo 4: Coloque na sua plataforma de blog

Os passos abaixo cobrem as plataformas mais comuns. O princípio é sempre o mesmo: encontrar a entrada HTML crua para o bloco de conteúdo onde você deseja o gráfico, e colar o snippet iframe lá.

WordPress (editor clássico)

Na barra de ferramentas do editor clássico, altere da Visuais - Não . Texto Passe o snippet onde você quer que o gráfico apareça no corpo da postagem, e depois volte para Visual para visualizá-lo.

WordPress (Block / Gutenberg Editor)

Clique no + botão para adicionar um novo bloco. HTML personalizado O preview no editor pode mostrar um espaço reservado o gráfico ao vivo é apresentado corretamente para os visitantes.

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

Fantasma

No editor Ghost, escreve /html Para inserir um cartão HTML, coloque o snippet dentro do bloco do cartão.

Noção

Em Noção, escreva /embed para inserir um bloco de inserção. colar a URL completa de inserções (não a tag iframe completa apenas o src Notion irá render o widget em linha.

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

Squarespace / Wix / Webflow

Cada uma destas plataformas tem um dedicado Código Ou ... Incorporar Bloquear. Adicione um na sua página, colar o snippet HTML completo do iframe e salvar. Para o Squarespace, este é o "Bloqueio de código" sob a seção "Mais" no insertor de blocos. Para Wix, use o widget "Incrustar um site" e selecione "O que é isso?" → "iframe HTML". Para o Webflow, arraste um componente "Includir" do painel Adicionar.

HTML estático ou site personalizado

Coloque o snippet diretamente no seu HTML no ponto do artigo onde deseja que o gráfico apareça.

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

Passo 5: Personalize a largura e a altura

As dimensões de embed padrão funcionam bem para a maioria dos layouts padrões de blogs, mas você pode ajustá-los para o seu design. width E ... height na etiqueta do iframe.

Utilize width="100%" Para tornar o gráfico responsivo e preencher seu recipiente isso é recomendado para layouts amigáveis para dispositivos móveis.

400px compacto; bom para uma barra lateral estreita ou entre parágrafos curtos
500px padrão; adapta-se à maioria dos layouts dos artigos
600px generoso; ideal se o gráfico for a peça central visual de uma secção centrada em dados

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

Evite definir uma largura fixa de pixel cria rolagem horizontal no celular. width="100%" e deixe a largura da coluna da sua página restringir o gráfico naturalmente.

Passo 6: Incorpore vários gráficos em um artigo

Um único artigo pode conter tantos gráficos incorporados quanto você precisar. Cada iframe é independente, então uma peça de análise de várias seções pode mostrar o carry trade, o diferencial de inflação e a curva de rendimento em sequência cada atualização em tempo real para qualquer visitante que leia o artigo semanas ou meses após a publicação.

Nota de desempenho

Cada iframe carrega uma página de gráfico separada. Se você estiver incorporando mais de três gráficos em um único artigo, considere colocar os menos críticos mais abaixo na página para que eles carregem preguiçosamente. loading="lazy" para a tag iframe para carregamento lento nativo em navegadores modernos:

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

Aqui está um layout prático de gráficos múltiplos para um post de análise semanal do 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>

Passo 7: Retorno ao painel completo

Cada gráfico incorporado é uma visão de leitura exclusiva ao vivo. Para os leitores que desejam explorar mais pares de comutação, intervalos de datas de mudança ou aprofundar o histórico de indicadores individuais vinculem-nos ao painel completo do FXMacroData. Uma curta linha de atribuição abaixo de cada gráfico credita a fonte de dados e dá aos seus leitores um caminho para uma análise mais profunda:

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

Tipos de gráficos disponíveis em um olhar

Identificador do gráfico	Etiqueta	Melhor utilizado para
Carregar gráfico	Comércio	Diferencial de taxa, operações de procura de rendimento
RendiçãoDiffChart	10Y Diferencial de rendimento	Divergência do mercado de obrigações, expectativas de taxas
Grafico de curva de rendimento	Curva de rendimento (10s2s)	Sinais de recessão, tendências de aceleração/aplanamento
Inflação Gráfico	Comparação da inflação	Análise do regime do IPC, divergência dos bancos centrais
InflaçãoDiffGráfico	Diferencial de inflação	Divergência da paridade de poder de compra
Desemprego Gráfico	Taxa de desemprego	Divergência no mercado de trabalho, mandato da Fed/BCE
tradeBalanceGráfico	Balança comercial	Fluxos estruturais da balança corrente

O que acontece quando novos dados são divulgados

Cada gráfico incorporado extrai dados ao vivo do pipeline de anúncios da FXMacroData. Relatório de inflação- Não . decisão de taxa de juro do banco central, ou um Impressão de folhas de pagamento não agrícolas os dados do gráfico no Firestore são atualizados em minutos após o lançamento oficial. Qualquer visitante que carregue ou recarregue uma página com um gráfico incorporado verá os dados atualizadas automaticamente.

Você não precisa republicar sua postagem no blog, limpar um cache ou atualizar qualquer código de embed. O iframe sempre recupera dados frescos em cada carregamento. Isso significa que uma postagam que você escrever hoje sobre o comércio de transporte do EUR/USD continuará mostrando dados precisos e atuais para os leitores que o encontram através da pesquisa daqui a seis meses.

Não é necessária chave API

A visualização do widget incorporado é gratuita e não requer chave de API. Qualquer página na web pública pode carregar esses gráficos. Uma chave de APIs é necessária apenas se você quiser consultar os dados macroeconômicos brutos programaticamente através da API REST (por exemplo, para criar seus próprios gráficos personalizados ou automatizar a análise).

A conclusão

Agora você tem tudo o que precisa para incorporar gráficos de macro ao vivo em qualquer post de blog ou página da web:

Procura no Página de widgets ou use o botão Incorporar diretamente no painel para encontrar o gráfico
Recebido . <iframe> fragmento
Coloque-o no bloco HTML do seu CMS ou no campo de incorporação personalizado
Opcionalmente ajuste a altura e adicione loading="lazy" para artigos com vários gráficos
Publique o seu gráfico está agora em tempo real e auto-actualizado

O próximo passo natural é explorar o conjunto completo de indicadores macroeconómicos disponíveis através do Documentação da API FXMacroDataSe você quiser ir além da incorporação e construir gráficos personalizados impulsionados por dados de indicadores brutos por exemplo, sobrepondo as expectativas de taxas de política contra a sua própria saída modelo os endpoints REST API para Taxas de juro- Não . inflaçãoE ... rendimentos de títulos do governo Dar-lhe acesso direto aos mesmos dados que alimentam estes widgets.

Securely Redirecting...

Como incorporar um widget de macro ao vivo no seu blog de negociação