Magento 2 Instagram Feed Widget.
Explore More Magento Instagram Feed Examples.View Demo
About the Instagram Feed Widget for Magento 2.
The social networks influence has become so big nowadays and has spread all over, including sales. Being one of the most popular social networking services ever, Instagram is what you need to have on your store to take relationship with your customers to a new level.
If you are using Magento 2 for your Ecommerce site, and you want to add new products just by taking a photo of it and photos with a special tag on Instagram, this extension fits you perfectly.
This Extension provides the possibility to display instagram images feed on category, homepage, product page or other cms pages.
With our Instagram Widget Advance for Magento 2 you can easily integrate this service into your store to get closer to the customers.
This widget comes with an extended list of options compared to other widgets: you can select from admin the background color of widget container in order to fit your page. You can also select the number of pictures you want to display per row and the maximum number of displayed pictures. Pictures can be sorted and ordered by a lot of criteria like most recent, most liked, most commented and so on. Picture resolution is available in 3 formats Thumbnail, Low resolution and Standard Resolution. You can display pictures based on user, geolocation or pictures in which you are tagged. This multitude of options will allow you to customise the widget and it’s content to fit your business needs.
Features of the Extension.
- Display instagram feed - on your web page display the Instagram feed according to user; location or tag
- Select number of images - possibility to select the maximum number of the images you want to add
- Add title - option to add Title
- Add description - option to add Description
- Images per row - possibility to change the images per Row from 2 - 6
- Set order - option of sorting the images in a set order
- Image size - you can change the resolution of instagram images (thumbnail/low resolution/standard resolution)
How to Install the Extension:
Before installing Instagram Widget Advanced for Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.3.0. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
Access the root of your magento 2 project from command line and run the following commands:
php bin/magento module:enable WeltPixel_Backend --clear-static-content
php bin/magento module:enable WeltPixel_InstagramWidget --clear-static-content
php bin/magento setup:upgrade
Flush any cache that you might still have enabled on your server or in Magento.
Woohoo, the extension is installed!
How to add instagram feed to your Magento Store?
- To be able to use Instagram Widget extension first you need to set your Instagram username and authorize the widget to use your account.
- The only thing you’ll need to get going is a valid client id from Instagram’s API. You can easily register for one on Instagram’s website.
- Go to Instagram Developer. Login to your account or create one. Then click on Manage Clients, and finally on Register a New Client.
- Fill out the Application Name, Description, Website(which should be your website). Fill our http://localhost in the field Valid redirect URIs and press enter to confirm that field.
- In Security tab DO NOT CHECK Disable implicit OAuth or Enforce signed requests.
- Now you should see a Success message as seen in the image below. From this page you need the CLIENT ID code.
Paste the following url into your web browser.
Add the client id you generated to the url replacing [CLIENT_ID_HERE] Hit enter, and you will connect to Instagram’s servers.
Instagram will ask you whether you want to grant the client you registered in Step 2 access to your account.
Once your client has been granted access to your account, Instagram will redirect your browser to your localhost and your newly generated access token will be appended to the url after localhost/#access_token=Treat your Instagram access token like you would your password.
Do not share your access token with anyone.
- This is the last page you will see after Authorizing access. Now copy code you see after localhost/#access_token=”yourcode” . You will use this code on step 7 and when configuring the Instagram widget connection data.
Find your user ID:
Your user ID is the number before the first period from the access token received at Step 6 (user ID is 1127918776 in this example).
After receiving Instagram Client Id, Access Token and User ID, go to Content > Pages or Content > Blocks. From there the steps are the same for Pages or for Blocks. Edit the page or block content.
Click Insert Widget button, select WeltPixel Instagram Widget and configure Widget Options.
Instagram Widget Advanced is a simple way to add Instagram photos to your site. Setting up Instagram Widget Advanced for Magento 2 is quite easy.
- Instagram Client Id - Instagram Client Id
- Instagram Access Token A valid oAuth token. Can be use in place of a client Id
- Title Insert a title for widget
- Description Insert a short description
- Container Background Color Select the color that you want to use as a background on the widget
- Images Per Row Select from 2-6 images that you want to be on a row
- Limit Maximum number of images you want to add
Sort By Sort the images in a sort order. Available options are:
- Non(as they come from Instagram)
- Most recent
- Least Recent
- Most Liked
- Least Liked
- Most commented
- Least commented
Resolution Size of the images to get. Available options are:
- Thumbnail (150x150)
- Low Resolution (306x306)
- Standard Resolution (612x612
Select your feed type:
- Feed type User Enter *User ID* received at step 7
- Feed type Tagged Enter a specific *Tag name* , pictures with that tag will be shown
- Feed type Location Enter *Location ID* (not name), search on google how Instagram assigns location id to pictures.
What’s new in v.1.8.0 - December 8, 2018
- Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
- PHP 7.2 compatibility added.
- As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.
What’s new in v.1.7.5 - October 24, 2018
- Added detailed error messages for invalid licenses for an easier identification of the cause.
- License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.
What’s new in v.1.7.4 - September 25, 2018
- Admin menu styling to fit screen size 1366px.
- Fix for production mode with merged JS - missing color pallet display now fixed.
What’s new in v.1.7.3 - August 23, 2018
- License improvements, adding *.magento.cloud as a valid test domain.
What’s new in v.1.7.2 - August 2, 2018
- Fixed admin random logout issue.
- Licensing improvements, allowing 3 letter domain as valid domain.
What's new in v.1.7.1 - July 11, 2018
- Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
- Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
- Added licensing compatibility with Magento B2B.
What’s new in v.1.7.0 - July 5, 2018
- Added option to enable/disable WeltPixel admin notifications.
- Show store and server related information under debugging tab: Magento Mode, Magento Edition, Server User, Magento Installation Path, Current server time, Latest cron jobs.
- Added licensing, license key needs to be generated under weltpixel.com account for purchased product, based on domain name and added under your magento installation.
What’s new in v.1.6.4 - May 16, 2018
- Compatibility with Magento 2.2.4, logger broken reference fix, changed to rewrite from plugin.
- System log broken reference error fixes.
- Added optimized display layout for instagram pictures of various sizes, including image padding.
- Added 'open in new tab' Instagram image option.
- Added version control for installed WeltPixel modules, including latest version check.
What’s new in v.1.5.7 - December 14, 2017
- Added Support Center functionality in Magento Admin.
- Added Debugger functionality, checks for rewrites and points potential issues.
What’s new in v.1.5.3 - September 20, 2017
- Checked compatibility with Magento 2.2 and PHP7.1 - all ok, updated composer.
What’s new in version 1.0.2 - May 16, 2017
- Added translations files under /i18n/en_US.csv.
What’s new in v.1.0.1 - 12/10/2016
- Composer dependency version changes.
What’s new in v.1.0.0 - 16/09/2016
- Initial release