نمایش تصاویر اینستاگرام در وردپرس با Spotlight

اگه عکس‌ها و ویدئوهای تازه‌تون رو در اینستاگرام منتشر می‌کنید، لازم نیست همون محتوا رو دوباره داخل سایت بارگذاری کنید. با نمایش تصاویر اینستاگرام در وردپرس می‌تونید یک فید تصویری بسازید که پست‌های حسابتون رو داخل برگه، نوشته، سایدبار یا فوتر نشون می‌ده.

در این آموزش از افزونه Spotlight Social Media Feeds استفاده می‌کنیم. قدم‌به‌قدم افزونه رو نصب می‌کنیم، حساب حرفه‌ای اینستاگرام رو به اون وصل می‌کنیم، ظاهر فید رو می‌سازیم و در آخر سراغ تنظیم سرعت، نمایش موبایل و خطاهای رایج می‌ریم. برای انجام این مراحل به کدنویسی نیاز ندارید.

نمایش تصاویر اینستاگرام در وردپرس چه فایده‌ای داره؟

شاید بپرسید وقتی کاربر می‌تونه مستقیم وارد اینستاگرام بشه، چه لزومی داره عکس‌ها رو داخل سایت هم نشون بدیم؟ همه بازدیدکننده‌های سایتتون صفحه اینستاگرام شما رو نمی‌شناسن یا برای دیدن اون از سایت خارج نمی‌شن. نمایش چند پست مرتبط داخل سایت کمک می‌کنه این افراد بدون ترک صفحه، نمونه فعالیت‌ها، محصولات یا حال‌وهوای برندتون رو ببینن.

این کار وقتی مفیدتره که اینستاگرام بخش مهمی از ارتباط شما با مخاطب‌هاست. مثلاً یک فروشگاه می‌تونه تصاویر استفاده واقعی از محصولات رو نشون بده، یک رستوران می‌تونه عکس غذاها و فضای مجموعه رو نمایش بده و یک طراح می‌تونه تازه‌ترین نمونه‌کارهاش رو جلوی چشم بازدیدکننده بذاره. در نتیجه، فید اینستاگرام بین محتوای سایت و فعالیت اجتماعی شما ارتباط می‌سازه و مسیر پیداکردن صفحه اینستاگرامتون رو هم کوتاه‌تر می‌کنه.

• تازه‌ترین پست‌های اینستاگرامتون به‌صورت خودکار داخل سایت نمایش داده می‌شن و لازم نیست هر عکس رو جداگانه بارگذاری کنید.
• بازدیدکننده‌های سایت با دیدن محتوای واقعی برندتون می‌تونن وارد صفحه اینستاگرام بشن و اون رو دنبال کنن.
• بخش‌هایی مثل صفحه اصلی، فوتر یا صفحه نمونه‌کارها بدون انتشار دوباره عکس‌ها تازه و تصویری می‌مونن.

البته بهتره فید رو مکمل محتوای سایت بدونید. توضیحات مهم، قیمت، مشخصات محصول و اطلاعاتی که باید همیشه در دسترس باشن رو فقط داخل اینستاگرام نذارید.

قبل از شروع به چه چیزهایی نیاز دارید؟

• دسترسی مدیر به پیشخوان وردپرس تا بتونید افزونه رو نصب و تنظیم کنید.
• یک حساب حرفه‌ای Creator یا Business در اینستاگرام. این دو نوع حساب برای تولیدکننده محتوا و کسب‌وکار ساخته شدن.
• امکان ورود به همون حساب اینستاگرام موقع اتصال افزونه و تأیید دسترسی‌ها.
• نسخه پشتیبان از سایت، به‌خصوص اگه قراره افزونه رو اول روی سایت اصلی امتحان کنید.

اگه تازه با افزونه‌ها آشنا شدید، اول راهنمای افزونه وردپرس چیست و چگونه کار می‌کند رو ببینید. بعد از اون مراحل نصب این آموزش خیلی ساده‌تر می‌شه.

انتخاب افزونه برای نمایش فید اینستاگرام

چرا از افزونه Spotlight Social Media Feeds استفاده می‌کنیم؟

Spotlight Social Media Feeds برای ساخت فید تصویری اینستاگرام طراحی شده و یک محیط دیداری برای انتخاب حساب، چیدمان و تعداد پست‌ها داره. بعد از ساخت فید هم می‌تونید اون رو با بلوک گوتنبرگ یا کد کوتاه در بخش دلخواه سایت بذارید.

مزیت محیط دیداری اینه که قبل از انتشار، نتیجه تغییرات رو می‌بینید. بااین‌حال، جای بعضی گزینه‌ها و امکانات رایگان یا پولی افزونه ممکنه در نسخه‌های مختلف تغییر کنه؛ پس قبل از انتشار نهایی، نتیجه رو در سایت خودتون بررسی کنید.

نسخه رایگان برای چه سایت‌هایی کافیه؟

اگه فقط می‌خواید پست‌های یک حساب رو با یک چیدمان ساده داخل سایت نشون بدید، بهتره کار رو با نسخه رایگان شروع کنید. برای قابلیت‌های پیشرفته‌تر باید فهرست امکانات نسخه فعلی افزونه رو در صفحه رسمی اون بررسی کنید، چون مرز امکانات رایگان و پولی ممکنه تغییر کنه.

نصب افزونه Spotlight Social Media Feeds در وردپرس

1. وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید.
2. در کادر جست‌وجو عبارت «Spotlight Social Media Feeds» رو بنویسید. نام و سازنده افزونه رو با صفحه رسمی اون تطبیق بدید و بعد روی «هم‌اکنون نصب نمایید» کلیک کنید.
3. بعد از پایان نصب، روی «فعال نمایید» بزنید. حالا گزینه مربوط به Spotlight به پیشخوان اضافه می‌شه و می‌تونید صفحه ساخت فید رو باز کنید.

ممکنه ترجمه دکمه‌ها در سایت شما کمی فرق داشته باشه. اگه گزینه Spotlight رو ندیدید، یک‌بار صفحه پیشخوان رو تازه‌سازی کنید و فعال‌بودن افزونه رو در بخش «افزونه‌های نصب‌شده» ببینید.

اتصال حساب اینستاگرام به وردپرس

API اینستاگرام چیه و چرا افزونه به اون نیاز داره؟

API یعنی مسیر رسمی ارتباط بین دو سرویس. Spotlight از این مسیر برای دریافت پست‌هایی استفاده می‌کنه که اجازه دسترسی به اون‌ها رو داده‌اید. به همین دلیل افزونه نباید رمز اینستاگرامتون رو داخل پیشخوان وردپرس بگیره.

روش اتصال قدیمی حساب‌های شخصی بر پایه Instagram Basic Display API کاربرد نداره و اتصال فعلی معمولاً به حساب حرفه‌ای Creator یا Business وابسته‌ست. توضیح رسمی این تغییر در وبلاگ توسعه‌دهندگان Meta منتشر شده.

اتصال حساب Creator یا Business

1. در صفحه Spotlight گزینه ساخت فید تازه رو انتخاب کنید.
2. روی گزینه اتصال حساب اینستاگرام بزنید و نوع حساب حرفه‌ای خودتون رو انتخاب کنید.
3. وقتی صفحه ورود رسمی باز شد، وارد حساب درست بشید. اگه چند حساب دارید، نام کاربری رو با دقت بررسی کنید.
4. دسترسی‌های لازم برای دریافت و نمایش محتوای حساب رو تأیید کنید تا دوباره به وردپرس برگردید.

بررسی دسترسی‌ها و کامل‌کردن اتصال

بعد از برگشتن به وردپرس، نام حساب و چند پست آخر باید در محیط افزونه دیده بشن. حسابی رو انتخاب کنید که می‌خواید فید از اون ساخته بشه. اگه حساب اشتباه وصل شده، قبل از ساخت فید اون رو قطع کنید و اتصال رو با حساب درست انجام بدید.

راه‌حل خطاهای رایج موقع اتصال حساب

• مطمئن بشید حساب اینستاگرام از نوع Creator یا Business هست.
• خروجی مسدودکننده تبلیغات یا تنظیمات سخت‌گیرانه مرورگر رو موقتاً بررسی کنید، چون ممکنه پنجره ورود باز نشه.
• از یک مرورگر دیگه یا پنجره خصوصی استفاده کنید تا ورود هم‌زمان به چند حساب باعث اشتباه نشه.
• اگه بعد از تأیید دوباره به صفحه خطا برگشتید، نشانی سایت و HTTPS رو در «تنظیمات ← عمومی» بررسی کنید.

آیا کاربران ایرانی و هاست‌های داخل ایران می‌تونن از افزونه استفاده کنن؟

نصب و فعال‌کردن خود افزونه برای کاربران ایرانی معمولاً مشکلی نداره، چون Spotlight Social Media Feeds از مخزن وردپرس دریافت می‌شه. بخش حساس ماجرا اتصال افزونه به اینستاگرام و دریافت مداوم پست‌هاست. این کار به ارتباط مرورگر شما، سرور سایت و سرویس‌های اینستاگرام و Meta وابسته‌ست.

با توجه به فیلتر بودن اینستاگرام در ایران، ممکنه صفحه ورود یا تأیید دسترسی برای شما بدون ابزار تغییر مسیر اینترنت باز نشه. حتی اگه اتصال اولیه در مرورگر انجام بشه، سرور سایت هم باید بتونه درخواست‌های لازم رو به سرویس‌های Meta بفرسته و پاسخ اون‌ها رو دریافت کنه. پس بازشدن اینستاگرام روی کامپیوتر شما به‌تنهایی ثابت نمی‌کنه که فید روی سایت هم درست به‌روز می‌شه.

آیا اتصال روی هاست داخل ایران شدنیه؟

جواب قطعی برای همه هاست‌های ایرانی یکی نیست. نتیجه به شبکه دیتاسنتر، محدودیت‌های خروجی سرور، تنظیمات امنیتی هاست و مسیر ارتباطی‌ای بستگی داره که افزونه استفاده می‌کنه. ممکنه اتصال روی یک هاست داخل ایران کار کنه، ولی روی هاست دیگه با خطای اتصال، منقضی‌شدن درخواست یا به‌روزنشدن فید روبه‌رو بشه.

نیازمند بررسی عملی: قبل از اینکه این افزونه رو برای بخش مهمی از سایتتون انتخاب کنید، نسخه رایگان اون رو روی همون هاست نصب کنید، حساب آزمایشی رو وصل کنید و چند روز تازه‌شدن خودکار پست‌ها رو زیر نظر بگیرید. بدون این آزمایش نمی‌شه سازگاری یک شرکت هاستینگ یا دیتاسنتر مشخص رو تأیید کرد.

• از پشتیبانی هاست بپرسید آیا اتصال خروجی سرور به دامنه‌ها و APIهای موردنیاز Meta و Instagram محدود شده یا نه.
• بعد از اتصال، یک پست تازه منتشر کنید و ببینید فید بدون ورود دوباره و پاک‌کردن دستی کش به‌روز می‌شه یا نه.
• فید رو در اینترنت‌های مختلف باز کنید، چون ممکنه تصاویر برای مدیر سایت نمایش داده بشن ولی بعضی بازدیدکننده‌های داخل ایران اون‌ها رو نبینن.
• اطلاعات مهم محصول یا کسب‌وکارتون رو فقط داخل فید نذارید. متن، قیمت و تصاویر ضروری رو مستقیم در وردپرس هم منتشر کنید تا محدودیت اینستاگرام محتوای اصلی صفحه رو از دسترس خارج نکنه.

اگه سرور نتونه با سرویس‌های لازم ارتباط بگیره، تغییر مرورگر یا ابزار تغییر مسیر اینترنت روی کامپیوتر شما مشکل سرور رو حل نمی‌کنه. در این شرایط بهتره گزارش خطای افزونه رو برای پشتیبانی هاست بفرستید و درباره امکان برقراری ارتباط خروجی سؤال کنید. جابه‌جایی هاست فقط وقتی منطقیه که محدودیت سرور فعلی تأیید شده باشه.

ساخت اولین فید اینستاگرام

1. حساب رو انتخاب کنید: حساب متصل‌شده‌ای رو انتخاب کنید که عکس‌ها باید از اون دریافت بشن.
2. قالب نمایش رو مشخص کنید: برای شروع، چیدمان شبکه‌ای ساده انتخاب مناسبیه و تصاویر رو مرتب کنار هم می‌ذاره.
3. تعداد عکس‌ها و ستون‌ها رو تنظیم کنید: با تعداد کم شروع کنید. بعد تعداد ستون‌ها و فاصله بین تصاویر رو طوری بچینید که فید شلوغ نشه.
4. نمایش موبایل و تبلت رو ببینید: تعداد ستون‌ها رو برای صفحه کوچک کمتر کنید تا عکس‌ها خیلی ریز نشن.
5. فید رو ذخیره کنید: یک نام مشخص مثل «فید صفحه اصلی» بنویسید تا بعداً اون رو بین چند فید راحت پیدا کنید.

قبل از ذخیره، چند پست اول رو نگاه کنید. اگه عکس‌ها کشیده، بریده یا خیلی کوچک دیده می‌شن، نسبت تصویر و تعداد ستون‌ها رو تغییر بدید.

نمایش تصاویر اینستاگرام در برگه یا نوشته

اضافه‌کردن فید با بلوک گوتنبرگ

1. برگه یا نوشته موردنظرتون رو در ویرایشگر وردپرس باز کنید.
2. روی علامت «+» بزنید و عبارت Spotlight رو جست‌وجو کنید.
3. بلوک افزونه رو اضافه کنید و فیدی رو که ساختید از فهرست انتخاب کنید.

نمایش فید با کد کوتاه

کد کوتاه یا Shortcode یک تکه متن کوتاهه که وردپرس اون رو به خروجی افزونه تبدیل می‌کنه. کد فید رو از داخل Spotlight کپی کنید، بلوک «کد کوتاه» رو به برگه اضافه کنید و کد رو همون‌جا بچسبونید. خود کد رو دستی حدس نزنید؛ چون شناسه هر فید ممکنه فرق داشته باشه.

پیش‌نمایش و انتشار صفحه

قبل از انتشار، پیش‌نمایش صفحه رو در دسکتاپ و موبایل باز کنید. روی یکی از پست‌ها بزنید و مطمئن بشید مقصد لینک درست کار می‌کنه. بعد از بررسی فاصله‌ها، اندازه تصاویر و سرعت بارگذاری می‌تونید صفحه رو منتشر کنید.

نمایش فید اینستاگرام در سایدبار یا فوتر

استفاده از ابزارک در قالب‌های کلاسیک

در قالب‌های کلاسیک وارد «نمایش ← ابزارک‌ها» بشید. ابزارک کد کوتاه یا بلوک مناسب Spotlight رو به سایدبار یا فوتر اضافه کنید. بعد فید رو انتخاب کنید یا کد کوتاه ذخیره‌شده رو بچسبونید و تغییرات رو ذخیره کنید.

استفاده از بلوک در ویرایشگر سایت

اگه قالب بلوکی دارید، وارد «نمایش ← ویرایشگر» بشید و بخش فوتر یا قالب موردنظرتون رو باز کنید. بلوک Spotlight یا کد کوتاه رو اضافه کنید و بعد قالب رو ذخیره کنید. یادتون نره که تغییر فوتر ممکنه فید رو در همه صفحه‌های سایت نشون بده.

تنظیم ظاهر فید برای هماهنگی با سایت

• چیدمان: برای فوتر و بخش‌های باریک، تعداد ستون کمتر مناسبه. در صفحه‌های عریض می‌تونید شبکه بزرگ‌تری بسازید.
• اندازه و نسبت تصویر: یک نسبت ثابت باعث می‌شه ردیف‌ها مرتب دیده بشن، ولی ممکنه بخشی از عکس‌های عمودی یا افقی بریده بشه.
• اطلاعات پست: نمایش کپشن، تعداد لایک یا نظر رو فقط وقتی فعال کنید که به هدف صفحه کمک می‌کنه. بعضی از این گزینه‌ها ممکنه به نسخه افزونه یا دسترسی API وابسته باشن و باید در سایتتون بررسی بشن.
• دکمه‌ها: دکمه دنبال‌کردن مسیر ورود کاربر به صفحه اینستاگرام رو روشن می‌کنه. دکمه بارگذاری بیشتر هم برای فیدهای طولانی کاربرد داره، ولی بهتره صفحه رو بی‌دلیل سنگین نکنید.

بهینه‌کردن سرعت نمایش تصاویر اینستاگرام

فید اینستاگرام برای دریافت محتوا و نمایش تصاویر به درخواست‌های اضافه نیاز داره. پس بهتره فقط در صفحه‌هایی از اون استفاده کنید که واقعاً به فید نیاز دارن.

• تعداد پست‌های اولیه رو محدود کنید و به‌جای نمایش ده‌ها عکس، چند پست مهم رو نشون بدید.
• اندازه تصویر رو متناسب با عرض محل نمایش انتخاب کنید تا فایل بزرگ برای یک ستون کوچک بارگذاری نشه.
• بعد از تغییر تنظیمات، کش سایت و افزونه بهینه‌سازی رو پاک کنید تا نسخه تازه فید دیده بشه.
• صفحه رو در موبایل واقعی و اینترنت معمولی آزمایش کنید. فقط به نمایش سریع اون روی کامپیوتر خودتون اعتماد نکنید.
• برای بررسی دقیق‌تر می‌تونید از راهنمای بررسی سرعت سایت با Google Lighthouse و آموزش افزایش سرعت سایت وردپرس کمک بگیرید.

رفع مشکلات رایج فید اینستاگرام در وردپرس

چرا تصاویر اینستاگرام نمایش داده نمی‌شن؟

اول اتصال حساب رو در Spotlight بررسی کنید. بعد مطمئن بشید فید ذخیره شده و بلوک یا کد کوتاه همون فید رو داخل صفحه گذاشته‌اید. اگه فقط در سایت اصلی چیزی دیده نمی‌شه، کش صفحه رو پاک کنید و خطاهای مرورگر یا افزونه امنیتی رو هم بررسی کنید.

چطور اتصال منقضی‌شده رو دوباره برقرار کنیم؟

وارد بخش حساب‌های متصل در Spotlight بشید و گزینه اتصال دوباره یا Reconnect رو انتخاب کنید. بعد وارد حساب درست اینستاگرام بشید و دسترسی‌های لازم رو دوباره تأیید کنید. نام این گزینه ممکنه با نسخه افزونه فرق داشته باشه.

چرا پست‌های تازه به فید اضافه نمی‌شن؟

اول چند دقیقه فرصت بدید تا داده تازه دریافت بشه. بعد فید رو در پیشخوان باز کنید و اتصال حساب رو ببینید. کش افزونه، سایت و شبکه توزیع محتوا رو هم پاک کنید. اگه پست داخل محیط Spotlight دیده می‌شه ولی در صفحه نیست، مشکل به احتمال زیاد از کش خروجی صفحه‌ست.

چرا ظاهر فید در موبایل به‌هم می‌ریزه؟

تعداد ستون موبایل رو کمتر کنید و فاصله بین تصاویر رو کاهش بدید. اگه فید از عرض صفحه بیرون می‌زنه، اون رو داخل یک ستون خیلی باریک یا بخشی با عرض ثابت نذارید. تنظیمات قالب و افزونه صفحه‌ساز هم ممکنه روی عرض بلوک اثر بذارن.

چطور تداخل افزونه کش یا قالب رو بررسی کنیم؟

اول همه کش‌ها رو پاک کنید و قابلیت ترکیب یا تأخیر اجرای فایل‌های JavaScript رو موقتاً خاموش کنید. اگه مشکل حل شد، فایل‌های Spotlight رو از همون قابلیت بهینه‌سازی مستثنا کنید. برای آزمایش قالب یا غیرفعال‌کردن افزونه‌های دیگه بهتره از نسخه آزمایشی سایت استفاده کنید تا ظاهر سایت اصلی به‌هم نریزه.

نکات امنیتی و حریم خصوصی موقع اتصال اینستاگرام

• اتصال رو فقط از صفحه رسمی افزونه و پنجره ورود رسمی اینستاگرام انجام بدید.
• رمز اینستاگرامتون رو داخل تنظیمات وردپرس، فرم پشتیبانی یا پیام برای افراد دیگه وارد نکنید.
• فقط دسترسی‌هایی رو تأیید کنید که برای دریافت و نمایش فید لازم هستن.
• اگه افزونه رو برای همیشه حذف کردید، اتصال و دسترسی اون رو هم از بخش حساب‌های متصل و تنظیمات حساب حرفه‌ای بررسی و قطع کنید.
• وردپرس، قالب و افزونه‌ها رو به‌روز نگه دارید و قبل از هر تغییر مهم از سایت نسخه پشتیبان بگیرید.

جمع‌بندی

برای نمایش تصاویر اینستاگرام در وردپرس، اول Spotlight Social Media Feeds رو نصب کنید و حساب حرفه‌ای Creator یا Business خودتون رو از مسیر رسمی به افزونه وصل کنید. بعد یک فید بسازید، تعداد پست‌ها و ستون‌ها رو برای دسکتاپ و موبایل تنظیم کنید و اون رو با بلوک یا کد کوتاه در صفحه دلخواه بذارید.

بعد از انتشار هم سرعت صفحه، تازه‌شدن پست‌ها و اعتبار اتصال رو هر چند وقت یک‌بار بررسی کنید. اگه از هاست داخل ایران استفاده می‌کنید، حتماً دریافت پست‌های تازه رو روی همون سرور آزمایش کنید. اگه دنبال یک روش جایگزین هستید، آموزش نمایش تصاویر اینستاگرام در وردپرس با Instagram Feed هم می‌تونه به انتخاب بهترتون کمک کنه.

سؤال‌های متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.