ویجت نرخ دلار برای سایت راهی است برای اینکه مخاطب شما بدون رفتن به سایت دیگری، وضعیت بازار را ببیند. دو روش اصلی وجود دارد: قرار دادن یک قاب از صفحهای که نرخ را نمایش میدهد، یا خواندن داده از یک اندپوینت عمومی و نمایش آن با چند خط جاوااسکریپت. این مقاله هر دو را ساده توضیح میدهد.
نکتهای که باید از ابتدا بدانید: این سایت در حال حاضر یک ویجت آماده و تککلیکی ارائه نمیکند. چیزی که در اختیار شما میگذارد، یک صفحه عمومی با نرخ زنده و یک اندپوینت JSON عمومی است که میتوانید از آن استفاده کنید. اگر به یک ویجت کامل با تنظیمات ظاهری نیاز دارید، این مقاله مسیر ساخت آن را هم توضیح میدهد.
چرا نرخ ارز را در سایت خودتان نشان دهید؟
سه دلیل عملی وجود دارد که این کار برای وبلاگهای اقتصادی، سایتهای خبری و صرافیها منطقی است:
- کاهش رفتوبرگشت کاربر: کاربر نیازش را در همان صفحه برطرف میکند و شما بازدید را از دست نمیدهید.
- افزایش اعتماد: نشان دادن عدد زنده همراه با زمان بهروزرسانی، نشانه دقت و شفافیت است.
- کاربرد محتوایی: میتوانید نرخ را کنار مطالب تحلیلی خود بگذارید تا خواننده زمینه را بهتر بفهمد. رابطه دلار و سکه طلا نمونهای از این است.
نکته مهم: نرخ ارز یک محتوای پویاست و باید همیشه تازه باشد. نمایش یک عدد ثابت از هفتهها قبل، نهتنها مفید نیست، بلکه اعتماد را از بین میبرد.
روش اول: قاب گذاشتن صفحه (iframe)
سادهترین روش این است که بخشی از صفحهای که نرخ را نمایش میدهد، در سایت خودتان جاسازی کنید.
مزیت اصلی این روش، سادگی است: نیازی به جاوااسکریپت اختصاصی ندارید و طرح کاملاً با صفحه مبدأ هماهنگ میماند. نرخ لحظهای دلار همین ساختار را دارد و میتوانید آن را در سایت خودتان قرار دهید.
| مزیت | محدودیت |
|---|---|
| پیادهسازی بسیار ساده | کنترل محدود روی ظاهر |
| همیشه تازه، بدون نگهداری | اندازه و استایل با صفحه مبدأ گره خورده است |
| مناسب سایتهای استاتیک | در صفحات خیلی شلوغ، جایگذاری دشوارتر است |
چیزی که باید رعایت کنید، مسئله دسترسپذیری است: قاب بارگذاریشده باید عنوان توصیفی داشته باشد، وگرنه صفحه شما برای کسانی که صفحهخوان استفاده میکنند، بیمعنا میشود. این نکتهای است که در بسیاری از راهنماهای ویجت نادیده گرفته میشود.
نکته دوم که فراموش میشود: هرگز نرخ را بهصورت یک تصویر ثابت ذخیره و نمایش ندهید. تصویر بهروز نمیشود و شما عملاً داده نمایش میدهید بدون هیچ توضیحی.
روش دوم: خواندن داده و نمایش با جاوااسکریپت
روش دوم کنترل بیشتری به شما میدهد. این سایت یک اندپوینت عمومی JSON در مسیر زیر در اختیار میگذارد:
/api/rate
خروجی آن شامل سه فیلد است: نرخ دلار به تومان، درصد تغییر روزانه و زمان بهروزرسانی. نکته مهم این است که مسیر نسبی است؛ یعنی همان نشانی که در سایت استفاده میکنید. اگر سایت شما دامنه دیگری دارد، باید نشانی کامل همان سایت را در تنظیمات جاوااسکریپت خود قرار دهید.
ساختار داده به این شکل است:
{
"usd_toman": 0,
"change_24h_percent": 0,
"timestamp": ""
}
یک نمونه ساده از کد سمت کاربر:
async function loadRate() {
try {
const res = await fetch("/api/rate", { cache: "no-store" });
if (!res.ok) return;
const data = await res.json();
if (typeof data.usd_toman !== "number" || !data.timestamp) return;
document.querySelector("[data-rate-value]").textContent =
new Intl.NumberFormat("en-US").format(Math.round(data.usd_toman));
document.querySelector("[data-rate-time]").textContent =
new Date(data.timestamp).toLocaleTimeString("fa-IR");
} catch {
// در صورت خطا، مقدار قبلی را دستنخورده نگه دارید
}
}
loadRate();
setInterval(loadRate, 45000);
چند نکته مهم در این کد وجود دارد که ارزش توجه دارند:
cache: "no-store"تا مرورگر نسخه کهنه را برنگرداند.- بررسی نوع داده پیش از نمایش، تا اگر ساختار داده تغییر کرد، صفحه خراب نشود.
- نمایش زمان بهروزرسانی در کنار عدد. این همان نکتهای است که ابزارهای رصد نرخ ارز را قابل اعتماد میکند.
- حفظ مقدار قبلی در صورت خطا، تا کاربر با عدد خالی یا صفر روبهرو نشود. نمایش صفر بهجای نرخ، بدترین حالت ممکن است، چون کاربر ممکن است آن را نرخ واقعی فرض کند.
- فاصله زمانی متعادل میان درخواستها. فاصله خیلی کوتاه بار روی سرویس میآورد و فاصله خیلی طولانی، «لحظهای» بودن را از بین میبرد.
اگر به روزرسانی خودکار میخواهید، چند خط دیگر لازم است تا وقتی برگه باز است، داده تازه شود. این نکتهای است که در بحث سرعت و تجربه کاربری اهمیت دارد، اما پیش از افزودن هر جاوااسکریپتی، ارزش آن را بسنجید.
کدام روش را انتخاب کنم؟
| معیار | روش iframe | روش اندپوینت |
|---|---|---|
| سرعت راهاندازی | بالا | متوسط |
| کنترل روی ظاهر | کم | زیاد |
| سبک بودن صفحه | کمتر | بیشتر |
| نیاز به دانش فنی | کم | متوسط |
| مناسب برای وردپرس | با افزونه یا کد | با افزونه یا کد |
اگر نمیدانید کدام را انتخاب کنید، با روش سادهتر شروع کنید. همیشه میتوانید بعداً ارتقا دهید، اما پیچیدگی را نمیتوانید بهآسانی از یک سایت پرامکانات حذف کنید.
نکته عملی: اگر سایت شما وردپرسی است، برای هر دو روش افزونههای آماده وجود دارد. اگر سایت استاتیک یا سفارشی است، همان کد بالا را در یک فایل یا بلوک اسکریپت قرار دهید.
چند نکته که نباید از قلم بیفتد
نرخ را بدون برچسب نشان ندهید
عددی که مخاطب میبیند باید همراه با نوعش باشد. بدون برچسب، مخاطب نمیداند با بازار آزاد روبهرو است یا نرخ رسمی. تفاوت نرخ نیما، سنا و بازار آزاد توضیح میدهد که این تفاوت چقدر مهم است.
منبع داده را ذکر کنید
یک خط توضیح درباره اینکه عدد از کجا میآید و چه زمانی بهروز میشود، تفاوت یک ابزار حرفهای و یک عدد بیمنبع را رقم میزند.
در برابر خطا مقاوم باشید
همیشه حالت خطا را در نظر بگیرید. در بودجهبندی خانوار در نوسان گفتیم که تصمیم نباید روی یک عدد لحظهای گرفته شود؛ همان منطق برای نمایش نرخ هم صدق میکند. بهتر است هیچ عددی نباشد تا عدد غلط نشان داده شود.
نرخ را از تصویر نخوانید
خواندن نرخ از روی تصویر (OCR) یا از روی متن کپیشده، روش قابل اتکایی نیست. اگر داده ساختاریافته در دسترس است، از آن استفاده کنید.
چند پرسش که قبل از انتشار بپرسید
- آیا عددی که نشان میدهم، با زمان بهروزرسانی همراه است؟
- آیا نوع نرخ را مشخص کردهام؟
- اگر اندپوینت از کار افتاد، چه چیزی به کاربر نشان داده میشود؟
- آیا این اسکریپت سرعت بارگذاری صفحه را خراب میکند؟
- آیا متن جایگزین و توصیف مناسب برای دسترسپذیری دارد؟
- آیا در صفحه موبایل هم درست نمایش داده میشود؟
سوالات متداول
آیا این سایت ویجت آماده دارد؟
در حال حاضر، صفحه عمومی با نرخ زنده و یک اندپوینت JSON در دسترس است. ویجت آماده تککلیکی هنوز ارائه نشده، ولی همین دو، پایه ساخت آن را میدهند.
آیا استفاده از این داده رایگان است؟
دسترسی عمومی است و برای استفاده در سایت شما محدودیتی اعلام نشده. با این حال، استفاده مسئولانه یعنی اینکه درخواستهای زیاد و غیرضروری ایجاد نکنید و فاصله زمانی معقولی بین بهروزرسانیها بگذارید.
دادهها با چه تاخیری میرسند؟
اطلاعات دقیق در تاریخچه نرخ و رابط کاربری سایت نمایش داده میشود. مهم این است که زمان نمایش دادهشده را همراه عدد به مخاطب نشان دهید.
اگر سایتم فونت فارسی خاصی دارد چه کنم؟
اگر از روش iframe استفاده میکنید، ظاهر صفحه مبدأ حفظ میشود. اگر داده را خودتان نمایش میدهید، کنترل کامل ظاهر را دارید و میتوانید فونت و سبک سایت خودتان را بهکار ببرید.
آیا نرخ را میتوانم در شبکههای اجتماعی هم بگذارم؟
از نظر فنی محدودیتی وجود ندارد، ولی توجه کنید که هر جا عددی نمایش میدهید، مسئولیت بهروز بودنش را هم بپذیرید. نرخ کهنه در یک پست دائمی، بدتر از نمایش ندادن نرخ است.
اگر فردا ساختار داده تغییر کرد چه میشود؟
به همین دلیل در کد نمونه، پیش از نمایش، نوع داده بررسی میشود. اگر ساختار تغییر کند، صفحه شما خالی یا خراب نمیشود و صرفاً عدد بهروز نمیشود.
جمعبندی
برای قرار دادن نرخ دلار در سایت، دو روش عملی دارید: جاسازی قاب از صفحه عمومی نرخ لحظهای یا خواندن داده از اندپوینت JSON در مسیر /api/rate و نمایش آن با جاوااسکریپت. روش اول سریعتر و روش دوم منعطفتر است. در هر دو حالت، نمایش زمان بهروزرسانی، ذکر نوع نرخ و مدیریت خطا ضروری است. برای دیدن روند بازار، تاریخچه نرخ را کنار ویجت خود قرار دهید.
بیشتر بخوانید
- بهترین اپلیکیشنها و ابزارهای رصد لحظهای نرخ ارز؛ چطور انتخاب کنیم؟
- نرخ دلار بازار آزاد چیست و چطور تعیین میشود؟
- تحلیلگران چطور روند آینده بازار ارز را بررسی میکنند؟
این مقاله جنبه آموزشی و تحلیلی دارد و توصیه مالی یا سرمایهگذاری محسوب نمیشود.