How to Embed a Live Macro Widget on Your Trading Blog

احضر مخططات الماكرو الحية إلى مدونتك في دقائق

سواء كنت تدير مدونة تداول على ووردبريس، نشر البحوث في Notion، أو كتابة محتوى مالية على شبح، قراءك تريد أن ترى البيانات الحية ليس لقطات شاشة ثابتة التي تتقدم في السن في اللحظة التي تضغط على نشر. <iframe> في أي صفحة وسرعان ما تقدم الرسوم البيانية الاقتصادية الكلية في الوقت الحقيقي التي يتم تحديثها تلقائيا مع كل إصدار جديد.

بحلول نهاية هذا الدليل، سيكون لديك على الأقل مخطط ماكرو واحد مباشر مضمن في مدونتك، تعرف كيفية تخصيص زوج العملات، وفهم أنواع الرسوم البيانية المتاحة، ويكون قادرا على تبادل الوسائط في وإخراج لأي جزء من المحتوى دون لمس الخلفية الخاصة بك أو كتابة أي جافا سكريبت.

الشروط المسبقة

قبل البدء، تحقق من أن لديك ما يلي:

• مدونة أو موقع أي منصة تقبل HTML الخام في أعمال جسم الصفحة: ووردبريس (محرر كلاسيكي أو كتلة) ، شبح، تدفق ويب، Squarespace، ويكس، فكرة، متوسط، سوبستاك، أو موقع HTML المبرمج يدويا.
• القدرة على إدراج HTML في معظم منصات CMS يطلق على هذا "كتلة HTML" أو "HTML مخصص" أو كتلة "تمثيل". لا تحتاج إلى وصول إلى الخادم.
• متصفح سوف تقوم بتوليد المقتطف من صفحة برامج FXMacroData؛ لا توجد حسابات أو مفاتيح API مطلوبة للنظرة المدمجة.

الخطوة الأولى: اختر الرسم البياني الخاص بك وزوج العملات

إبحار إلى صفحة FXMacroData Widgets لتصفح جميع أنواع الرسوم البيانية القابلة للدخل المتاحة. تسع فئات من الرسيمات المتاحتة، تغطي إشارات الكلية التي يتبعها تجار الفوركس عن كثب:

• التجارة صافي عائد سعر الفائدة من الاحتفاظ بموقف طويل في العملة ذات العائد الأعلى
• 10Y الفرق في العائد الفارق بين عائدات السندات الحكومية لمدة 10 سنوات لزوج العملات
• منحنى العائد (10s2s) شديدة الحد أو عكس منحنى العائد المحلي لكل عملة
• أساس & عرض أشكال منحنى العائد صور فورية للوصول الفردي لكل خط من خطي الزوج
• مقارنة التضخم مؤشر أسعار المستهلكين الرئيسي جنبا إلى جنب لكلا العملتين
• التضخم التفاضلي الفجوة في معدلات التضخم بين الاقتصادين
• معدل البطالة مقارنة سوق العمل، وهو مدخل رئيسي في قرارات سعر الفائدة للبنوك المركزية
• ميزان التجارة بيانات تدفق الحساب الجاري، غالبا ما تكون محركا بطيئا للتوجهات الأساسية للعملات الأجنبية

حدد زوج العملات باستخدام مختار الزوج في أعلى صفحة الوسائط. يتم تقديم خمسة أزواج افتراضية EUR/USD، GBP/USD و USD/JPY و AUD/USD ، و USD / CAD أو يمكنك كتابة أي زوج مباشرة في عنوان URL المضمن لوحة التحكم بمجرد فهم نمط عنوان URL (المغطى في الخطوة 3).

بالنسبة لمعظم المدونات التجارية، التجارة أو 10Y الفرق في العائد الرسم البياني لليورو مقابل الدولار الأمريكي هو نقطة البداية الأكثر أهمية عالمياً. إذا كان مدونتك تغطي زوجًا أو منطقة معينة ، فاختر الرسم الذي يطابق أفضل أطروحة المقالة التي تكتبها.

الخطوة 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 إضافي لتحميل.

الخطوة 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 ميزان التجارة

على سبيل المثال، لتضمين مخطط التفاضل التضخمي للياقة الجنيه الإسترليني مقابل الدولار الأمريكي، سيكون عنوان URL:

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

يمكنك بناء أي مجموعة يدويًا لا حاجة للعودة إلى صفحة الويجيتات كل مرة بعد أن تعرف النمط. هذا مفيد بشكل خاص إذا كنت تحتفظ بشبكة لمشاركات التحليل الأسبوعية المتكررة وتريد تبادل الزوج أو المؤشر بسرعة.

الخطوة 4: اضغط على منصة المدونة

تتضمن الخطوات أدناه المنصات الأكثر شيوعًا. المبدأ هو نفسه دائمًا: ابحث عن مدخل HTML الخام للكتلة المحتوى حيث تريد الرسم البياني ، وملص مقتطف الإفريم هناك.

ووردبريس (محرر كلاسيكي)

في شريط أدوات المحرر الكلاسيكي، التبديل من بصري إضافة إلى النص علامة تبويب. اضغط على المقطع حيث تريد أن يظهر الرسم البياني في جسم البريد، ثم أعد إلى البصرية لمشاهدته المسبقة.

ووردبريس (بلوك / محرر غوتنبرغ)

انقر على + زر لإضافة كتلة جديدة. HTML مخصصة و اخترها. اضغط مقتطف الإفريم في كتلة 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. يقوم ghost بتصوير الإفريمات بشكل أصلي دون أي تكوين إضافي.

مفهوم

في مفهوم، اكتب /embed لإدراج كتلة تضمين. إلصق عنوان URL التضمين الكامل (ليس علامة الإفريم الكاملة فقط src قيمة) في حقل URL المضمنة.

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

سكوايرسبيس / ويكس / ويب فلو

كل من هذه المنصات لديها منصة مخصصة الرمز أو إدراج block. أضف واحد إلى صفحتك، وملص مقتطف HTML كامل iframe، وحفظ. بالنسبة لـ Squarespace، هذا هو "بلوك الكود" تحت قسم "المزيد" في إدراج الكتل. بالنسبة إلى Wix، استخدم ويدج "إدراج موقع" واختار "ما هذا؟" → "إفريم 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>

الخطوة الخامسة: تخصيص العرض والارتفاع

الأبعاد الافتراضية للدمج تعمل بشكل جيد لمعظم تخطيطات المدونات القياسية، ولكن يمكنك تعديلها لتصميمك. 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. تقرير التضخم، a قرار سعر الفائدة من البنك المركزيأو طباعة قوائم الرواتب غير الزراعية يتم تحديث بيانات الرسم البياني في Firestore في غضون دقائق من الإصدار الرسمي. أي زائر يقوم بتحميل أو إعادة تحميل صفحة مع مخطط مضمن سيرى البيانات المحدثة تلقائيًا.

لا تحتاج إلى إعادة نشر منشور مدونتك أو مسح ذاكرة التخزين المؤقت أو تحديث أي رمز مضمن. يجمع iframe دائمًا بيانات جديدة على كل تحميل. وهذا يعني أن المقال الذي تكتبه اليوم حول تداول EUR/USD سوف يستمر في عرض بيانات دقيقة وحديثة للقراء الذين يجدونها من خلال البحث بعد ستة أشهر من الآن.

الختام

لديك الآن كل ما تحتاجه لتضمين مخططات ماكرو حية في أي منشور مدونة أو صفحة ويب:

1. إبحث عن صفحة الويجيت أو استخدم زر التضمين مباشرة في لوحة القيادة للعثور على الرسم البياني الخاص بك
2. عُلم <iframe> مقتطف
3. لصقها في كتلة HTML من CMS الخاص بك أو حقل تضمين مخصص
4. إضافة إضافية loading="lazy" للمواد ذات الرسوم البيانية المتعددة
5. نشر الرسم البياني الخاص بك الآن على الهواء مباشرة وتحديث الذاتي

الخطوة الطبيعية التالية هي استكشاف مجموعة كاملة من المؤشرات الاقتصادية الكلية المتاحة من خلال وثائق FXMacroData APIإذا كنت ترغب في الذهاب إلى ما وراء الاندماج وبناء الرسوم البيانية المخصصة التي تدفعها بيانات مؤشر خام على سبيل المثال، وتغطية توقعات أسعار الفائدة السياسية ضد الناتج النموذج الخاص بك نقاط النهاية REST API ل أسعار النظام- لا التضخمو عائدات السندات الحكومية يمنحك وصولاً مباشراً إلى نفس البيانات التي تعمل على هذه الأدوات