How to Embed a Live Macro Widget on Your Trading Blog

मिनटों में अपने ब्लॉग पर लाइव मैक्रो चार्ट लाएं

चाहे आप वर्डप्रेस पर एक ट्रेडिंग ब्लॉग चलाते हों, नोशन में शोध प्रकाशित करते हों, या घोस्ट पर वित्त सामग्री लिखते हों आपके पाठक लाइव डेटा देखना चाहते हैं न कि स्थिर स्क्रीनशॉट जो उस क्षण उम्र के होते हैं जब आप प्रकाशित करते हैं। FXMacroData के एम्बेडेबल चार्ट विजेट आपको एक एकल पेस्ट करने देते हैं <iframe> किसी भी पृष्ठ में स्निपेट और तुरंत वास्तविक समय में मैक्रोइकॉनॉमिक चार्ट्स की सेवा करते हैं जो हर नई रिलीज़ के साथ स्वचालित रूप से अपडेट होते हैं।

इस गाइड के अंत तक, आपके ब्लॉग में कम से कम एक लाइव मैक्रो चार्ट एम्बेडेड होगा, मुद्रा जोड़ी को अनुकूलित करना जानते हैं, समझते हैं कि कौन से चार्ट प्रकार उपलब्ध हैं, और अपने बैकएंड को छूने या कोई जावास्क्रिप्ट लिखने के बिना किसी भी सामग्री के लिए विजेट को अंदर और बाहर स्विच करने में सक्षम होंगे।

पूर्व शर्तें

शुरू करने से पहले, जाँच करें कि आपके पास निम्नलिखित हैंः

• ब्लॉग या वेबसाइट कोई भी प्लेटफ़ॉर्म जो पृष्ठ शरीर में कच्चे HTML को स्वीकार करता है कार्य करता हैः वर्डप्रेस (क्लासिक या ब्लॉक संपादक), भूत, वेबफ्लो, स्क्वायरस्पेस, विक्स, नोशन, मीडियम, सबस्टैक, या एक हाथ से कोडित HTML साइट।
• HTML डालने की क्षमता अधिकांश सीएमएस प्लेटफार्मों में इसे "एचटीएमएल ब्लॉक", "कस्टम एचटीएमआर", या "इम्बेड" ब्लॉक कहा जाता है। आपको सर्वर एक्सेस की आवश्यकता नहीं है।
• ब्राउज़र आप FXMacroData विगेट्स पृष्ठ से स्निपेट उत्पन्न करेंगे; एम्बेडेड दृश्य के लिए कोई खाते या एपीआई कुंजी की आवश्यकता नहीं है.

चरण 1: अपना चार्ट और मुद्रा जोड़ा चुनें

के लिए नेविगेट करें FXMacroData विगेट्स पृष्ठ सभी उपलब्ध एम्बेडेबल चार्ट प्रकारों को ब्राउज़ करने के लिए. नौ चार्ट श्रेणियां उपलब्ध हैं, जो मैक्रो सिग्नल को कवर करती हैं जिन्हें विदेशी मुद्रा व्यापारी सबसे करीब से ट्रैक करते हैंः

• व्यापार करना उच्च उपज वाली मुद्रा में लंबी स्थिति रखने से शुद्ध ब्याज दर रिटर्न
• 10Y उपज अंतर मुद्रा जोड़ी के लिए 10 साल के सरकारी बांड की पैदावार के बीच का अंतर
• उपज वक्र (10s2s) प्रत्येक मुद्रा के घरेलू उपज वक्र की खड़ी या उलट
• आधार और उद्धरण उपज वक्र आकार जोड़ी के प्रत्येक चरण के लिए व्यक्तिगत उपज वक्र स्नैपशॉट
• मुद्रास्फीति तुलना दोनों मुद्राओं के लिए सीपीआई के साथ-साथ
• मुद्रास्फीति अंतर दोनों अर्थव्यवस्थाओं के बीच मुद्रास्फीति दरों में अंतर
• बेरोजगारी दर श्रम बाजार की तुलना, केंद्रीय बैंक की दरों के निर्णयों में एक महत्वपूर्ण योगदान
• व्यापार संतुलन चालू खाता प्रवाह डेटा, अक्सर संरचनात्मक विदेशी मुद्रा रुझानों का धीमा गति वाला चालक

विजेट पृष्ठ के शीर्ष पर जोड़ी चयनकर्ता का उपयोग करके मुद्रा जोड़ी का चयन करें. पांच डिफ़ॉल्ट जोड़े EUR/USD, GBP/USD , USD/JPY, AUD/USD और USD/CAD की पेशकश की जाती है या आप URL पैटर्न को समझने के बाद डैशबोर्ड एम्बेड URL में सीधे कोई भी जोड़ी टाइप कर सकते हैं (चरण 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 के बैकएंड से लाइव डेटा लोड करता है, पाठक के ब्राउज़र में रेंडर करता है और नई मैक्रोइकॉनॉमिक घोषणाओं के प्रकाशन के साथ स्वचालित रूप से ताज़ा होता है। स्निपेट में कोई एपीआई कुंजी नहीं है, कोई जावास्क्रिप्ट निर्भरता नहीं है और लोड करने के लिए कोई अतिरिक्त सीडीएन नहीं है.

चरण 3: एम्बेड यूआरएल पैटर्न को समझें

आईफ्रेम यूआरएल एक सरल, अनुमानित संरचना का पालन करता हैः

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 इनपुट को ढूंढें जहां आप चार्ट चाहते हैं, और वहां आईफ्रेम स्निपेट पेस्ट करें।

वर्डप्रेस (क्लासिक संपादक)

क्लासिक संपादक टूलबार में, से स्विच करें दृश्य टैब को पाठ टैब. चिपकाएँ स्निपेट जहां आप चाहते हैं चार्ट पोस्ट शरीर में दिखाई देने के लिए, तो इसे पूर्वावलोकन करने के लिए दृश्य पर वापस स्विच करें.

वर्डप्रेस (ब्लॉक / गुटेनबर्ग संपादक)

क्लिक करें + नया ब्लॉक जोड़ने के लिए बटन। खोजें कस्टम 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

स्क्वरस्पेस / विक्स / वेबफ़्लो

इन प्लेटफार्मों में से प्रत्येक के लिए एक समर्पित कोड या सम्मिलित करें block. अपने पृष्ठ पर एक जोड़ें, पूर्ण iframe HTML स्निपेट पेस्ट करें, और सहेजें. स्क्वरस्पेस के लिए, यह ब्लॉक सम्मिलक में "अधिक" अनुभाग के तहत "कोड ब्लॉक" है. Wix के लिए "साइट एम्बेड करें" विजेट का उपयोग करें और "यह क्या है?" → "HTML ifreme" का चयन करें. वेबफ्लो के लिए जोड़ें पैनल से "इम्बेड" घटक में खींचें.

स्थैतिक 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
  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 के घोषणा पाइपलाइन से लाइव डेटा खींचता है। जब एक प्रमुख रिलीज प्रिंट एक मुद्रास्फीति रिपोर्ट, एक केंद्रीय बैंक की दर का निर्णय, या एक गैर-खेती पगार सूची प्रिंट Firestore में चार्ट डेटा आधिकारिक रिलीज के कुछ ही मिनटों के भीतर अपडेट किया जाता है। कोई भी आगंतुक जो एम्बेडेड चार्ट के साथ किसी पृष्ठ को लोड या पुनः लोड करता है, उसे स्वचालित रूप से अपडेट किए गए डेटा दिखाई देंगे।

आपको अपने ब्लॉग पोस्ट को पुनः प्रकाशित करने, कैश को साफ़ करने, या किसी भी एम्बेड कोड को अपडेट करने की आवश्यकता नहीं है। आईफ्रेम हमेशा प्रत्येक लोड पर ताजा डेटा प्राप्त करता है। इसका मतलब है कि EUR/USD कैरी ट्रेड के बारे में आज आप जो पोस्ट लिखते हैं, वह पाठकों को सटीक, वर्तमान डेटा दिखाना जारी रखेगा जो इसे खोज के माध्यम से खोजते हैं।

समापन

अब आपके पास किसी भी ब्लॉग पोस्ट या वेब पेज में लाइव मैक्रो चार्ट एम्बेड करने के लिए आवश्यक सब कुछ हैः

1. ब्राउज़ करें विगेट्स पृष्ठ या अपने चार्ट खोजने के लिए सीधे डैशबोर्ड में एम्बेड बटन का उपयोग करें
2. प्राप्त किया <iframe> स्निपेट
3. इसे अपने सीएमएस के एचटीएमएल ब्लॉक या कस्टम एम्बेड फ़ील्ड में चिपकाएं
4. ऊंचाई को वैकल्पिक रूप से समायोजित करें और जोड़ें loading="lazy" बहु-चार्ट लेखों के लिए
5. प्रकाशित करें आपका चार्ट अब लाइव और स्व-अद्यतन है

अगला स्वाभाविक कदम है कि मैक्रोइकॉनॉमिक इंडिकेटरों के पूरे सेट का पता लगाया जाए जो कि FXMacroData एपीआई प्रलेखन. यदि आप एम्बेडिंग से परे जाना चाहते हैं और कच्चे संकेतक डेटा द्वारा संचालित कस्टम चार्ट बनाना चाहते हैं उदाहरण के लिए, अपने स्वयं के मॉडल आउटपुट के खिलाफ नीति दर अपेक्षाओं को ओवरले करना REST API के लिए एंडपॉइंट्स नीतिगत दरें, मुद्रास्फीति, और सरकारी बांड की उपज आपको इन विगेट्स को पावर देने वाले उसी डेटा तक सीधी पहुंच प्रदान करता है।