Among all the platforms, Instagram stands out with visual content, a huge user base, influencing purchasing decisions, and building brand loyalty. Adding your Instagram feed to your Magento 2 store can boost customer engagement and sales.
This tutorial will guide you on how to add Instagram feed to Magento 2 store. BSS Commerce will also review in detail the best Instagram feed extension, its features, and how to configure it to display your Instagram feed on your website. Now, let’s dive into the following article:
How to Add Instagram Feed to Magento 2: Step-by-Step Guides
Table of Contents
Adding Instagram Feed to Magento allows you to add your Instagram feed to your Magento store and make it more visually appealing and engaging. But how do you do that? In this guide, BSS Commerce will go through the process step by step so you can add Instagram Feed to your Magento store easily.
To begin, let’s get started by installing the Magento 2 Instagram Feed extension. You can install Magento 2 extensions via Composer or via App/Code.
Take Note: If a post has multiple media, the first image or video will be displayed in the Instagram feed.
Now, let’s get started!
Preparation: Module Configuration
#1. General Configuration
In this section, you will activate the module and set it up to link Instagram with your Magento store.
Proceed to Stores ⇒ Configuration ⇒ BSS Commerce ⇒ Instagram Feed
In the Enable Module section, select Yes to activate the module.
In the Instagram Access Token field, input the user Token associated with your Instagram account. This token is essential for making API calls to retrieve images and videos from your Instagram feed.
#2. Advanced Token Settings
It is crucial to note that tokens have expiration dates, and each time you publish new content, the settings will be automatically refreshed for your convenience.
- API call interval minutes: Specify the duration between two successive API calls.
- Refresh Token: Select Yes to enable the automatic generation and updating of a new token, which will replace the one that has expired.
- Access Token Expiration Date: indicates the date on which the current Access Token will expire.
TAKE NOTE: Please note that the token has 60 days of validity. If this setting is enabled, the module will start the process 2-3 days before the token expires, so the Meta for Developer system will create a new token and update the Instagram Access Token above. But you must run a cron for your site. Alternatively, you must manually go to the system and click Save config button every 60 days to keep the token active.
#3. Media Popup Settings
This module enables a popup to appear whenever users interact with an Instagram feed:
- In the Popup Auto Play settings, select “Yes” if you wish for the media to transition to the subsequent item automatically. Alternatively, choose “No” to disable this feature, requiring customers to click the arrow to view the next posts.
- In the Popup Auto Play Speed, please specify the duration (in seconds) for which each post will be displayed before advancing to the next one.
How to Add Instagram Widget to Magento 2 Store
This module facilitates an Instagram feed that functions as a widget within the Magento store, allowing you to configure the display pages, positions, titles, and layouts of the feed.
Step 1. Add the Widget
To add a new Instagram feed widget, proceed to Content > Widgets and select the Add Widget button.
In the Settings section, locate the Type field and select the BSS Instagram Feed Widget. Subsequently, choose the Design Theme and click the Continue button to move forward.
Step 2. Setup Storefront Properties
- Widget Title: Specify the title for the widget within the backend interface.
- Assign to Store Views: Designate the widget to the chosen store views.
- Sort Order: Determine the sequence if multiple widgets exist within the same container.
In Layout Updates section, you select the pages and positions to display the Instagram feed. You can add more placements by clicking Add Layout Update button.
At Display on: select the specific page, product, or category type where the widget will be shown. Consequently, you will be presented with options to choose from specific pages or to apply to all products/categories.
On the right side, there is a Container option: select the appropriate container position for the widget. To complete the process, click the Save button.
Step 3. Widget Options: Label, Layout and Auto-play
- Widget Label: Specify the name of the Instagram feed widget as it will appear on the frontend.
- Widget Layout: Standard for grid, Slider for a slider. If Slider is selected you will have the option to enable or disable auto-play under Auto Play. Also, you can set the auto-play time in Auto Play Time.
- Enable Repeated Images: Opt for Yes to allow the slider to cycle through the images again once it reaches the end.
Okay, so the instructions on how to add Instagram feed to Magento 2 are done. But to use it more smoothly and effectively you should also take note of the common issues and troubleshooting tips for the Instagram feed below.
>>> Master Magento 2 with our ultimate guide: Magento Tutorial For Beginners: Everything You Need to Know
Top Advantages of Integrating Instagram with Magento 2
Instagram is a powerful tool for businesses to connect with their audience and sell. Connect this visual giant with your Magento 2 store and unlock the world. In this section, BSS Commerce will show you the benefits of connecting Instagram and Magento 2:
- Make Magento Store Look Better: The appearance of your store affects visitors’ purchasing decisions. With Magento 2, you can easily add an Instagram feed to your store. This integration will make your store look better with beautiful Instagram images.
- Sell Better with Unlimited Inspiration: Instagram serves as a rich source of creative and motivational content. Thanks to integrating it with your Magento store, you can provide your customers with compelling images and videos on how to use your products to enhance their likelihood of making a purchase.
- Boosted Engagement: Instagram has high user engagement rates. By featuring your Instagram content on your Magento store, you can make visitors interact with your content, and boost engagement on both your website and your Instagram account.
- Improve Shopping Experience: The Magento 2 Instagram integration extension is designed to improve shopping experience. This feature allows customers to see how products look in real life. Users can also position the widget container to show images from Instagram.
- Build Trust: User-generated content (UGC) is a powerful tool to build trust and confidence in potential customers. By showing real reviews and photos from your Instagram followers on your Magento store, you can show potential customers that your products are loved and trusted by others.
- Increase Online Visibility: Connect Instagram to your Magento 2 store and you can attract more followers on the platform. Having a strong social media presence is good for your business in the long run. This integration not only promotes your brand but also strengthens brand recognition over time.
Therefore, integrating Instagram with Magento 2 offers numerous benefits that can help you enhance your online store, boost customer engagement, and ultimately drive more sales. It’s a strategy worth considering for any eCommerce business.
Common Issues and Troubleshooting Tips for Instagram Feed
Instagram is great for sharing personal experiences and has a visually appealing interface and a huge community. However, users face issues that can hinder the app from working smoothly. Knowing these issues is key to finding solutions. Here are some common issues with Instagram feed you may encounter:
1. Magento 2 Instagram Feed Not Updating (or Slow Website Pages)
Users encounter the issue of Instagram feeds not updating. This can be caused by internet connectivity issues, outdated app versions, or temporary glitches in Instagram’s servers. It’s so frustrating when you want to see the latest posts but your feed won’t refresh as expected.
Tips and Best Practices:
- Optimize image sizes in the feed.
- Reduce the number of images shown.
- Use a content delivery network (CDN) for image distribution.
- Enable caching for the Instagram widget.
2. Photos Not Loading on Instagram (or Image Quality Issues)
Another issue users face is photos not loading on Instagram. This can be caused by low res images, unstable internet connection, or issues with Instagram’s servers. It’s so frustrating when you want to see a post from your favorite account and the image doesn’t show up.
Tips and Best Practices:
- Use high-quality images on your Instagram posts.
- Check the widget settings for image quality.
- Don’t compress too much in the widget settings.
- Check image dimensions and aspect ratios.
3. Instagram Stories Not Showing Up (or Widget Layout Issues)
The Instagram widget is broken and the layout is not working properly. It can overlap with other elements or be misplaced on your Magento 2 website. Besides, users frequently encounter the issue of Instagram stories not appearing, which can stem from various factors such as outdated application versions, operating system complications, or server-related problems on Instagram’s end.
Tips and Best Practices to Fix it:
- Adjust the widget configurations within the admin panel.
- Customize the CSS styles to align with the store’s design.
- Check for any conflicts with other extensions or bespoke themes.
- Ensure the widget module is updated to its most recent version.
On the other hand, you can take into account the following tips to fix these issues:
- Restart Your Device: The simplest way is to restart your device. This will fix temporary issues that may be causing the problem.
- Check Your Internet: If the Instagram app won’t refresh at all, there’s an issue with your internet. Try to open a website on your device’s browser or any other app that requires internet. If other apps are not working as well, the problem is with your internet service.
- Check Your Device’s Date and Time: An incorrect date and time on your device can cause the feed not to update. Make sure the date and time is set correctly.
- Check Your Device’s Storage: Some users have said that clearing up storage on their devices fixed the issue. If your device is almost full, try to free up some space so Instagram can work properly.
- Acknowledge Warning Notifications: Sometimes the issue with the feed not loading is because Instagram has temporarily suspended your account. This might happen if you’ve violated some of Instagram’s guidelines or rules.
- Update the App: For those using Instagram on older devices, updating the app to the latest version on Google Play or Apple Store might fix feed issues.
- Reinstall the App: If updating doesn’t fix the issue, try uninstalling and then reinstalling the app.
- Check Internet Connection: Poor internet connection can prevent the feed from loading. Make sure your internet is stable and strong enough for browsing.
- Disable VPN: If you’re using a VPN, try turning it off. VPNs can sometimes interfere with Instagram’s functionality.
But, these solutions are general and might not work for all. If you’ve tried all of these and still having issues, the problem might be with Instagram itself. In that case, report the issue to Instagram and wait for them to fix it or consider using the best premium Instagram feed extensions for Magento 2 below.
Best Premium Instagram Feed Extensions for Magento 2
Magento 2 Instagram Feed extension will help you capture customer attention and increase sales by showing dynamic images and trendy content from your Instagram account. Besides, adding this platform into your Magento store has never been simpler, as this module enables you to position an Instagram widget in any location with a variety of layout options.
A quick overview of Magento 2 Instagram Feed Extension:
- Compatible with the Hyva Theme (ver 1.3.9)
- Open Source (CE): 2.3.x – 2.4.x Commerce On-Premise (EE): 2.3.x – 2.4.x
- Review: 100% positive
- Free installation
- Free lifetime update
- Free one year support
- 30 days money-back guarantee
Here is how this Instagram Feed extension enhances your store:
1. Add Instagram Feed to your Magento 2 store anywhere and everywhere
After installation, you can activate the Instagram feed using the Access Token of your Meta account. Also, the Instagram feed is a widget, that allows you to add multiple feeds, choose from different layouts, and place them on different pages of your store. With multiple widgets, you can assign titles to each and choose a grid or slider layout to show the different collections you want to highlight.
2. Show each Instagram post in a Popup for better visibility and navigation
When a customer clicks on any image or video, a popup will appear with larger media and link to the post on Instagram. This will help you to get more engaged followers and interactions with your brand. You can configure the popups to auto-play at a custom speed and transition in backend settings.
3. Show more product images and customer reviews with Magento 2 Instagram Feed
You can add Instagram Feed directly on your store website. This will not only build trust in your brand but also show that your products are loved by many. Also, you can upsell and cross-sell throughout your store using Instagram feed, even on Checkout, Cart, or My Account pages. The more customers see your products the more likely they will add to cart.
4. Send customers to your Instagram profile to grow your following and social interactions
This Magento 2 Instagram feed extension will help you reach more audiences and communicate with them better. Apart from direct sales you can engage potential customers by sharing content about lifestyle, guides, tips, reviews, or promotional events. This module allows you to add links in post popups to send customers to your Instagram page.
For further information about the best Magento 2 Instagram feed extension, including free and premium, Check out this post to get details!
Final Words: How to Add Instagram Feed to Magento 2
Integrating Instagram feed into your Magento 2 store is a strategic move to enhance customer engagement and boost brand visibility. By effectively showcasing your latest Instagram content, you can inspire trust, increase product interest, and drive traffic to your online store.
Choosing the right Instagram feed extension for Magento store is crucial for a seamless integration. Consider factors such as features, performance, compatibility, and customer support when making your selection. With proper installation, configuration, and optimization, you can leverage the power of Instagram to elevate your Magento 2 store’s overall customer experience.
Furthermore, consulting a leading Magento development service is advisable for this situation. BSS Commerce is dedicated to providing a wide range of Magento eCommerce development services tailored to meet the customers’ specific needs. BSS Commerce is eager to assist you with our expertise and experience to facilitate the rapid growth of your business.
