Cómo incrustar un widget de macro en vivo en su blog de trading

Traiga gráficos de macros en vivo a su blog en minutos

Ya sea que ejecute un blog de trading en WordPress, publique investigaciones en Notion o escriba contenido financiero en Ghost, sus lectores quieren ver datos en vivo no capturas de pantalla estáticas que envejecen en el momento en que pulsa publicar. <iframe> extracto en cualquier página y inmediatamente sirve gráficos macroeconómicos en tiempo real que se actualizan automáticamente con cada nueva versión.

Al final de esta guía, usted tendrá al menos un gráfico de macro en vivo incrustado en su blog, saber cómo personalizar el par de divisas, entender qué tipos de gráficos están disponibles, y ser capaz de intercambiar widgets dentro y fuera para cualquier pieza de contenido sin tocar su backend o escribir ningún JavaScript.

Los requisitos previos

Antes de comenzar, compruebe que tiene lo siguiente:

• Un blog o sitio web cualquier plataforma que acepte HTML en bruto en el cuerpo de la página funciona: WordPress (editor clásico o de bloques), Ghost, Webflow, Squarespace, Wix, Notion, Medium, Substack o un sitio HTML codificado a mano.
• La capacidad de insertar HTML en la mayoría de las plataformas CMS esto se llama un "bloque HTML", "HTML personalizado" o "bloques de embebimiento".
• Un navegador generará el fragmento de la página de widgets de FXMacroData; no se requieren cuentas ni claves de API para la vista incrustada.

Paso 1: Elige tu gráfico y tu par de divisas

Navegue hacia el Página de widgets de FXMacroData Para navegar por todos los tipos de gráficos disponibles, hay nueve categorías de gráficas disponibles, que cubren las señales macro que los operadores de divisas rastrean más de cerca:

• El comercio el rendimiento neto de la tasa de interés derivado de la tenencia de una posición larga en la moneda de mayor rendimiento
• Diferencial de rendimiento 10Y el diferencial entre los rendimientos de los bonos del Estado a 10 años de un par de divisas
• Curva de rendimiento (10s2s) la inclinación o la inversión de la curva de rendimiento interno de cada moneda
• Forma de la curva de rendimiento de base y cotización instantáneas individuales de la curva de rendimiento para cada etapa del par
• Comparación de la inflación índice de precios de los precios de las mercancías para ambas monedas
• Diferencial de inflación la diferencia de tasas de inflación entre las dos economías
• Tasa de desempleo comparación del mercado de trabajo, un elemento clave en las decisiones de los bancos centrales sobre los tipos de interés
• Balanza comercial datos de flujo de la cuenta corriente, a menudo un motor de movimiento lento de las tendencias estructurales de divisas

Seleccione un par de divisas utilizando el selector de pares en la parte superior de la página de widgets. Se ofrecen cinco pares predeterminados EUR/USD, GBP/USD , USD/JPY, AUD/USD y USD/CAD o puede escribir cualquier par directamente en la URL de incorporación del panel una vez que entienda el patrón de URL (que se cubre en el paso 3).

Para la mayoría de los blogs de comercio, el El comercio ¿ Qué ? Diferencial de rendimiento 10Y Si su blog cubre un par o región específica, elija el gráfico que mejor coincida con la tesis del artículo que está escribiendo.

Paso 2: Copie el fragmento de inserción

Una vez que haya encontrado el gráfico que desea, haga clic en el "Copiar el código" el botón en la tarjeta de widget. el fragmento copiado a su portapapeles se verá así:

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

El gráfico carga datos en vivo desde el backend de FXMacroData, se muestra en el navegador del lector y se actualiza automáticamente a medida que se publican nuevos anuncios macroeconómicos.

Paso 3: Comprender el patrón de URL de incrustación

La URL del iframe sigue una estructura simple y predecible:

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

¿ Dónde ? {PAIR} es el par de divisas en BASE_QUOTE formato (por ejemplo, EUR_USD¿ Qué ? GBP_USD¿ Qué ? USD_JPY) y {CHART_ID} es uno de los identificadores de gráficos compatibles:

• carryChart Comercio
• yieldDiffChart Diferencial de rendimiento 10Y
• yieldCurveChart Curva de rendimiento (10s2s)
• baseYieldCurveShape Forma de la curva de rendimiento de base
• quoteYieldCurveShape Forma de la curva de rendimiento de las cotizaciones
• inflationChart Comparación de la inflación
• inflationDiffChart Diferencial de inflación
• unemploymentChart Tasa de desempleo
• tradeBalanceChart Balanza comercial

Por ejemplo, para incrustar el gráfico de diferenciales de inflación para GBP/USD, la URL sería:

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

Puede construir cualquier combinación manualmente sin necesidad de volver a la página de widgets cada vez que conozca el patrón.

Paso 4: Pegar en su plataforma de blog

Los pasos a continuación cubren las plataformas más comunes. El principio es siempre el mismo: encontrar la entrada HTML en bruto para el bloque de contenido donde se desea el gráfico, y pegar el fragmento de iframe allí.

WordPress (editor clásico)

En la barra de herramientas del editor clásico, cambia de la Visión - ¿ Qué ? El texto Pegar el fragmento donde desea que el gráfico aparezca en el cuerpo de la publicación, luego volver a Visual para previsualizarlo.

WordPress (Bloqueo / Edición de Gutenberg)

Haga clic en el + Busca el botón para añadir un nuevo bloque. HTML personalizado y seleccionala. Pegar el fragmento de iframe en el bloque HTML. La vista previa en el editor puede mostrar un marcador de posición el gráfico en vivo se representa correctamente para los 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>

Es un fantasma.

En el editor Ghost, escribe /html Para insertar una tarjeta HTML, pegue el fragmento dentro del bloque de tarjeta.

Noción

En el concepto, escriba /embed para insertar un bloque de incrustación. Pegar la URL completa de incorporación (no la etiqueta de iframe completa sólo el src Notion hará que el widget esté en línea.

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

Esqueraspace / Wix / Webflow

Cada una de estas plataformas tiene un dedicado El código ¿ Qué ? Incorporar Bloquear. Añadir uno a su página, pegar el fragmento HTML completo del iframe y guardar. Para Squarespace, este es el "Bloqueo de código" bajo la sección "Más" en el insertor de bloques. Para Wix, use el widget "Incrustar un sitio" y seleccione "Qué es esto?" → "Iframe HTML". Para Webflow, arrastre un componente "Inclusión" desde el panel Agregar.

HTML estático o sitio personalizado

Pegar el fragmento directamente en su HTML en el punto del artículo donde desea que aparezca el gráfico. No se requieren scripts o dependencias adicionales.

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

Paso 5: Personalizar el ancho y la altura

Las dimensiones de embebimiento predeterminadas funcionan bien para la mayoría de los diseños de blogs estándar, pero puedes ajustarlas para tu diseño. width ¿ Qué ? height en la etiqueta del iframe.

¿ Cómo ? width="100%" Para hacer que el gráfico sea receptivo y llenar su contenedor se recomienda para diseños compatibles con dispositivos móviles.

• 400px compacto; bueno para una barra lateral estrecha o entre párrafos cortos
• 500px estándar; se adapta a la mayoría de los diseños de artículos
• 600px generoso; ideal si el gráfico es la pieza central visual de una sección centrada en datos

<!-- 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 establecer un ancho de píxel fijo crea desplazamiento horizontal en el móvil. width="100%" y deja que el ancho de la columna de tu página restrinja el gráfico naturalmente.

Paso 6: Incorpore varios gráficos en un artículo

Cada iframe es independiente, por lo que una pieza de análisis de múltiples secciones puede mostrar la curva de carry trade, el diferencial de inflación y la curvatura de rendimiento en secuencia cada una actualizada en tiempo real para cualquier visitante que lea el artículo semanas o meses después de la publicación.

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

Aquí hay un diseño práctico de varios gráficos para un artículo de análisis semanal del 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>

Paso 7: Enlace de regreso al panel completo

Cada gráfico incrustado es una vista en vivo de solo lectura. Para los lectores que deseen explorar más pares de conmutación, rangos de fecha de cambio o profundizar en el historial de indicadores individuales vincularlos al panel de control completo de FXMacroData. Una corta línea de atribución debajo de cada gráfico acredita la fuente de datos y brinda a sus lectores un camino para un análisis más profundo:

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

Qué sucede cuando se publican nuevos datos

Cada gráfico embebido extrae datos en vivo de la tubería de anuncios de FXMacroData. informe de inflación¿ Qué ? decisión de tipo de interés del banco central, o un Impresión de nóminas de trabajadores no agrícolas los datos de los gráficos en Firestore se actualizan en cuestión de minutos después de la publicación oficial.

No es necesario volver a publicar su publicación de blog, borrar una caché o actualizar ningún código de embebed. El iframe siempre recupera datos frescos en cada carga. Esto significa que una publicación que escriba hoy sobre el comercio de transporte del EUR/USD continuará mostrando datos precisos y actuales a los lectores que lo encuentren a través de la búsqueda dentro de seis meses.

El final

Ahora tienes todo lo que necesitas para incrustar gráficos de macro en vivo en cualquier blog o página web:

1. Busca en el Página de widgets o use el botón Incorporar directamente en el panel para encontrar su gráfico
2. ¿ Qué pasa ? <iframe> el fragmento
3. Pegarlo en el bloque HTML de su CMS o campo de incrustación personalizado
4. Opcionalmente ajustar la altura y añadir loading="lazy" para artículos con varios gráficos
5. Publica tu gráfico está ahora en vivo y se actualiza automáticamente

El siguiente paso natural es explorar el conjunto completo de indicadores macroeconómicos disponibles a través de la Documentación de la API de FXMacroDataSi desea ir más allá de la incorporación y construir gráficos personalizados impulsados por datos de indicadores en bruto por ejemplo, superponiendo las expectativas de tasas de política contra su propia salida modelo los puntos finales de la API REST para tipos de interés¿ Qué ? la inflación, y rendimientos de los bonos del gobierno le dará acceso directo a los mismos datos que alimentan estos widgets.