افزونه Instagram Feed

افزونه Instagram Feed

افزونه Instagram Feed با نام فعلی Smash Balloon Social Photo Feed یکی از قدرتمندترین و بهترین افزونه های اینستاگرام وردپرس برای نمایش مطالب و تصاویر اینستاگرام در وب سایت وردپرسی شما است.از سری مقاله های آموزش رایگان طراحی سایت امروز به  معرفی و آموزش افزونه Instagram Feed می پردازیم.

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

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

افزونه Smash Balloon Social Photo Feed که قبلاً با نام Instagram Feed شناخته می شد، دارای بیش از 1 میلیون نصب فعال بوده و امتیاز 4.9 از 5 را کسب کرده است. نصب و راه اندازی این افزونه بسیار آسان است و به شما امکان می دهد تصاویر اینستاگرام اکانت هایی که به آنها دسترسی دارید را در وب سایت وردپرس خود نمایش دهید.

آموزش افزونه Instagram Feed و نحوه نمایش تصاویر اینستاگرام در سایت وردپرس

ابتدا افزونه را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Instagram Feed در پیشخوان وردپرس اضافه خواهد شد. روی آن کلیک کنید. صفحه تنظیمات افزونه مشابه شکل زیر نشان داده خواهد شد.

این صفحه از چند تب مختلف تشکیل شده است که در بالای صفحه نشان داده شده است. در ادامه آموزش به بررسی تب های مختلف صفحه تنظیمات افزونه Smash Balloon Social Photo Feed می پردازیم.

پیکربندی تنظیمات

در تب Configure می توانید تنظیمات افزونه را پیکربندی کنید. این تب شامل گزینه های مختلفی است که قبل از شروع سفارشی سازی افزونه لازم است آنها را تنظیم کنید.

• گزینه Configure به شما امکان می دهد تا حساب اینستاگرام خود را به سایت وردپرس تان وصل کنید. برای این کار کافی است روی دکمه بزرگ آبی رنگ Connect an Instagram Account کلیک کنید. اگر قبلاً به اینستاگرام خود وارد شده اید ، پس از کلیک بر روی این دکمه ، فید شما به طور خودکار به وب سایت وردپرس تان متصل می شود.
• Preserve settings when plugin is removed: هنگامی که افزونه را پاک می کنید تنظیمات شما به صورت خودکار پاک خواهد شد. با فعال کردن این گزینه تنظیمات شما حتی با پاک کردن افزونه از بین نخواهد رفت. بنابراین می توانید به راحتی افزونه را غیرفعال و مجدداً فعال کنید و نگران از بین رفتن تنظیمات خود نباشید.
• Check for new posts every: پست های اینستاگرام شما توسط افزونه Instagram Feed به صورت موقت در دیتابیس وردپرس کش می شوند. در این قسمت می توانید فاصله زمانی کش شدن پست ها را مشخص کنید. اگر زمان کش شدن را روی یک ساعت تنظیم کنید افزونه پس از سپری شدن این مدت کش را پاک کرده و مجدداً اینستاگرام را برای پست های جدید بررسی می نماید.

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

اگر بخواهید سایت وردپرسی خود را به اکانت اینستاگرامی دیگری متصل کنید کافی است مجدداً روی دکمه آبی رنگ Connect an Instagram Account کلیک کنید. در پنجره باز شده روی دکمه Switch Accounts کلیک نمایید. سپس اطلاعات اکانت مورد نظر خود را وارد کرده و روی دکمه Log in کلیک کنید.

پس از آن اکانت وارد فید اصلی اینستاگرام شما خواهد شد. تا این قسمت از آموزش موفق شده اید اکانت مورد نظر خود را با استفاده از افزونه Instagram Feed به سایت وردپرسی تان متصل کنید.

با توجه به تغییرات اخیر API اینستاگرام، امکان نمایش عکس ها از دیگر حساب های اینستاگرام که به آنها دسترسی ندارید، وجود ندارد و تنها می توانید فید کاربری اکانتی که به آن دسترسی دارید را نمایش دهید.

شما می توانید با ورود به سیستم با استفاده از دکمه بالا یا با کلیک بر روی دکمه Manually Connect an Account و کپی/پیست کردن توکن دسترسی به هر تعداد اکانت که بخواهید متصل شوید.

با کلیک بر روی دکمه Remove from Primary Feed می توانید اکانت ها را از فید اصلی خود خارج کنید.

با کلیک بر روی دکمه Add to another Feed شورت کدی به شما نشان داده خواهد شد که می توانید از آن برای نمایش فید اینستاگرام در نوشته ها و برگه های خود استفاده کنید.

در بخش Show Photos From در نسخه رایگان افزونه تنها گزینه User Account فعال است که به این معنی است که عکس ها تنها از اکانت کاربر قابل نمایش هستند و برای نمایش چندین کاربر در یک فید کافی است آنها را با استفاده از کاما از یکدیگر جدا کنید. در نسخه Pro افزونه امکان نمایش پست ها با استفاده از هشتگ نیز وجود دارد. همچنین می توانید چند نوع فید مختلف را در یک فید نمایش دهید.

اگر گزینه Show Access Token را فعال کنید، توکن دسترسی برای اکانت مورد نظر به شما نشان داده خواهد شد.

در انتهای صفحه باکسی به نام Display your feed وجود دارد. در این باکس شورت کد نمایش فیدها در اختیار شما قرار داده شده است.

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

افزونه Instagram Feed امکان سفارشی سازی نمایش پست ها را فراهم کرده است. این کار در تب Customize انجام می گیرد. در ادامه آموزش به بررسی تنظیمات این تب می پردازیم.

آموزش سفارشی سازی نمایش پست ها در افزونه Instagram Feed

روی تب Customize در بالای صفحه کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد. این صفحه از قسمت های مختلفی تشکیل شده است که در این قسمت از آموزش افزونه Instagram Feed به بررسی آنها می پردازیم.

در قسمت General می توانید عرض و ارتفاع فید و رنگ پس زمینه را انتخاب کنید.

بخش Layout Type مربوط به نسخه Pro افزونه Instagram Feed است. با خرید نسخه پرمیوم افزونه می توانید طرح بندی های شبکه ای، گردونه، موزاییکی و هایلایت داشته باشید.

• Number of Photos: اگر در حال نمایش عکس از چندین شناسه کاربری یا هشتگ هستید، در این قسمت می توانید تعداد عکس هایی که از هریک نمایش داده می شود را انتخاب کنید.
• Number of Columns: در این قسمت می توانید تعداد ستون ها را انتخاب کنید.
• Padding around Images: در این قسمت می توانید پدینگ عکس ها را سفارشی سازی کنید. به این ترتیب فاصله بین عکس ها تنظیم می شود.
• Disable mobile layout: به صورت پیش فرض در دستگاه های تلفن همراه طرح بندی به صورت خودکار تغییر کرده و از ستون های کمتری استفاده می شود. با فعال کردن این گزینه می توانید طرح بندی موبایل را غیرفعال کنید.

در پایان روی دکمه ذخیره تغییرات کلیک نمایید.

بخش بعدی سفارشی سازی مربوط به تنظیمات تصاویر در افزونه Instagram Feed است که در ادامه به آموزش آن می پردازیم.

• Sort Photos By: در این قسمت می توانید نحوه مرتب کردن عکس ها را انتخاب کنید.
• Image Resolution: در این قسمت توصیه افزونه استفاده از گزینه Auto-detect است. تشخیص خودکار بدان معنی است که افزونه به صورت خودکار وضوح تصویر را بر اساس اندازه فید شما تنظیم می کند.

با ارتقاء افزونه Instagram Feed می توانید ویژگی های دیگری مانند نوع رسانه نمایش داده شده، فعال کردن لایت باکس پاپ آپ، لینک دادن پست ها به URL ها در کپشن را فعال کنید.

گزینه های Photo Hover Style و Carousel مربوط به نسخه Pro افزونه هستند.

در بخش بعدی آموزش سفارشی سازی، تنظیمات هدر در افزونه Instagram Feed را بررسی می کنیم.

• Show Feed Header: با فعال کردن این گزینه هدر فید نشان داده می شود.
• Header Size: در این قسمت می توانید اندازه هدر را مشخص کنید.
• Show Bio Text: اگر اکانت اینستاگرام شما دارای بیو است با فعال کردن این گزینه متن بیو نشان داده می شود.
• Header Text Color: در این قسمت می توانید رنگ متن هدر را مشخص کنید.

در قسمت های Load More Button و Follow Button می توانید دکمه های بارگذاری بیشتر و فالو را به سایت خود اضافه کنید و رنگ پس زمینه دکمه، رنگ متن دکمه و متن دکمه را سفارشی سازی کنید.

در پایان روی دکمه ذخیره تغییرات کلیک نمایید. قسمت بعدی آموزش مربوط به کسانی است که به کدنویسی CSS و جاوا اسکریپت آشنایی دارند و می خواهند افزونه Instagram Feed را بر طبق نیازهای خود سفارشی سازی بیشتری نمایند.

در قسمت Misc می توانید کد CSS و جاوا اسکریپت سفارشی خود را وارد کنید.

• Are you using an Ajax powered theme: اگر قالب شما از Ajax برای لود کردن محتوا به صفحات استفاده می کند (به این معنی که صفحه شما رفرش نمی شود) این گزینه را فعال کنید.
• Cache error API recheck: اگر سایت شما از کش کردن، مینیفای کردن یا اتصال (Concatenation) جاوا اسکریپت استفاده می کند، فعال کردن این گزینه می تواند به جلوگیری از مشکلات کش کمک کند.
• Enable Backup Caching: با فعال کردن این گزینه هر فید یک نسخه تکراری از خود را در دیتابیس ذخیره می کند تا در صورت عدم دسترسی به کش معمولی از آن استفاده شود.
• Force cache to clear on interval: اگر مشکلی را در رابطه با افزونه ای که بروزرسانی خودکار نشده است تجربه کرده اید، می توانید این گزینه را روی Yes تنظیم کنید. این کار باعث می شود کش افزونه به صورت مرتب پاک شود و داده های جدید را از اینستاگرام بازیابی کند.

در پایان روی دکمه ذخیره تغییرات کلیک کنید.

پس از آنکه تنظیمات مورد نظر خود را در افزونه Instagram Feed سفارشی سازی کردید می توانید فید اینستاگرام را در نوشته و برگه های سایت وردپرسی خود نمایش دهید.

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

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

توجه داشته باشید که در ویرایشگر گوتنبرگ وردپرس این کار را باید از طریق بلوک کد کوتاه انجام دهید.

اگر می خواهید چندین فید را در سایت خود نمایش دهید می توانید تنظیمات مختلف را در یک شورت کد به صورت زیر تنظیم کنید:

 [instagram-feed num=9 cols=3] 

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

 [instagram-feed] 
 [instagram-feed num=4 cols=4 showfollow=false] 
 [instagram-feed accesstoken="ANOTHER_ACCESS_TOKEN"]