weltpixel

MAGENTO 2 INSTAGRAM FEED WIDGET

This extension is also included in the Pearl Theme.

About the Instagram Feed Widget for Magento 2.

Social network influence has become incredibly 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 the 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 them and uploading those photos to Instagram, this extension fits you perfectly.

This Extension provides the possibility to display an Instagram image feed on Category Pages, Homepages, Product Pages or other CMS pages.

With our Instagram Feed Widget for Magento 2, you can easily integrate this service into your store to get closer to your customers.

This widget comes with an extended list of options compared to other widgets: you can select the background color of widget container in order to fit your page from the Magento admin. You can also select the number of pictures you want to display per row and the number of displayed pictures. All you need is an Instagram Access Token, which we've explained step-by-step how you can obtain, and the multitude of options will allow you to customise the widget and its content to fit your business needs.

Features of the Extension.

  • Display Instagram feed - Showcase a feed of images from your Instagram user account to place your brand's image in the spotlight.
  • Multiple User Feed display - Display Instagram Feeds from multiple user accounts on the same page.
  • Select number of images - Possibility to select the maximum number of the images you want to add.
  • NEW: Display Image Caption on hover - You can now choose to display the image caption upon hovering on images from the Instagram Feed.
  • Add title - Option to add a custom title to the Instagram Widget Container.
  • Add description - Option to add a custom description to the Instagram Widget Container.
  • Container Background color - Option to choose a custom color for the Instagram Widget Container.
  • Images per row - Possibility to change the images per Row from 2 - 6.
  • Alt Text - Add Alt Text to images in the feed for SEO purposes. Original Instagram Alt Tags can be used, or a custom value can be set.
  • Lazy Loading - Load images from the Instagram Feed via Lazy Loading for better performance (requires the Lazy Load Products and Images extension).

1 MINUTE INSTALLATION GUI.

  • Step 1:
    Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.4.2. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
    app/code/WeltPixel/Backend
    app/code/WeltPixel/InstagramWidget


    • Optional
    Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder is missing, please create it manually:
    app/code/WeSupply/Toolbox

  • Step 3:
    Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
    www.yourmagentostore.com/weltpixel-extension-installation/
  • Step 4:
    In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
  • Step 5:
    Wooohooo! The extension is now installed on your Magento store! Congrats!

Troubleshooting

If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

How to Install via SSH.

  • Step 1:
    Before installing the Magento 2 Instagram Feed Widget on your store, please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.4.2. It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to the paths of your Magento 2 instance listed below. If the ‘app/code/WeltPixel’ folder is missing, please create it manually:
    app/code/WeltPixel/Backend
    app/code/WeltPixel/InstagramWidget


    • Optional
    Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder is missing, please create it manually:
    app/code/WeSupply/Toolbox

  • Step 3:
    Access the root of your Magento 2 project from the 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
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy -f
  • Step 4:
    Flush any cache that you might still have enabled on your server or in Magento.
  • Step 5:
    Woohoo, the extension is installed!

How to Upgrade the extension.

  • Step 1. Remove extension code under app/code/WeltPixel/InstagramWidget before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
  • Step 2. Follow normal installation instructions above.

Magento Marketplace Installation.

How to generate an Instagram Access Token.

Here's what you'll be needing:

  1. A Facebook Developer account. If you don't already have an account, click Get Started after logging in with your regular Facebook account to create one.
  2. An Instagram account from where you'd like to pull images using the widget.

Step 1: Creating a Facebook App.

  • Log in to your Facebook Developer account and head to My Apps.
  • Hit Create App and select the Consumer App Type.
  • Choose a name for your app.
  • Complete the rest of the configuration with your details and save the app.
weltpixel
weltpixel
  • You should now be taken to the App Dashboard. Navigate to Settings > Basic and scroll down to the bottom of the page.
  • Scroll down to the bottom of the page and click Add Platform.
  • Choose Website and add the URL of your website. It's important you add the whole URL, including the slash at the end if it exists.
  • Save the app and move on to the next step.

Step 2: Setting up the Instagram Basic Display API.

  • Using the sidebar on the left, choose Products and find Instagram Basic Display and click Set Up.
  • Click Create New App and add a Display Name for the app.
  • Add your website's URL to the OAuth, Deauthorize Callback and Data Deletion Request Callback URL fields.
weltpixel
weltpixel

Step 3: Authorize your Instagram Account as an App Tester.

  • Click Add or Remove Instagram Testers.
  • Under the Instagram Testers section, hit Add Instagram Testers and add your Instagram account's username to send the invite.
  • Open a new browser window and log in to your Instagram account.
  • Click the profile icon and head to Settings.
  • Choose Apps and Websites and accept the invitation to your app under the Tester Invites tab.

Step 4: Generate a long-lived Access Token.

  • Head back into the Facebook Developer Dashboard. In the sidebar on the left, choose Instagram Basic Display under Products.
  • From the dropdown, choose Basic Display and scroll down to User Token Generator.
  • You should have your Instagram Account under the Instagram Test Users section. Hit Generate Token.
  • This will prompt you to allow the Instagram App to access your basic information. After authorizing, a popup will appear which will display your Token.
  • Copy your token and store it someplace safe. Hit Done and then Save Changes.
  • Done! We should now have everything we need to set up the Instagram Widget. Move on to the Widget Configuration steps below.

    • Important note! - Instagram Access Tokens last for 60 days. After the token expires, you'll need to generate a new one and update the widget configuration with it.

weltpixel
weltpixel

How to configure the extension.

Step 1.

  • Head to Content > Pages or Content > Blocks. From here, the steps are the same for Pages or for Blocks. Edit the page or block content.

Step 2.

  • Click on the Insert Widget button, select the WeltPixel Instagram Widget and configure the Widget Options.

weltpixel
weltpixel

STEP 3.

  • The Magento 2 Instagram Feed Widget is a simple way to add Instagram photos to your site. Setting up the widget is quite easy.

    • Instagram Api Type - Starting with version 1.10.9 of the extension, the Javascript Fetching method is deprecated. You'll need to use the Basic API option.
    • Title - Insert a title for the widget.
    • Description - Insert a short description.
    • Container Background Color - Select the color that you want to use as a background for the widget.
    • Open Images in New Tab - Choose whether or not to open the image in a new tab when clicked on.
    • Images Per Row - Select from 2-6 images that you want to have on an single row.
  • Images Should Have Padding - Choose whether or not to insert padding between the images.
  • Add ALT text for image - Choose whether or not to generate Alt text for images in the feed. You can use Alt Tags as they come from Instagram, or add a custom value applied to all images.
  • Display Image Caption - Enables displaying captions for each post as overlay on hover.
  • Optimize Image Layout - This option will take your Instagram pictures that have random ratios and find the best match to showcase them in your web page while keeping the same picture ratio and not adding any white spaces. For this option to work, you'll need to set the resolution of your images below to Original Image Size.
  • Enable Lazy Image Load - Choose whether or not to load images in the feed via Lazy Loading (requires the Lazy Load Products and Images extension).
  • Number of Images - Select the number of images you'd like to have pulled from Instagram and displayed.
  • Token - Insert your Instagram Token generated in the "How to generate an Instagram Access Token" section above.
weltpixel
weltpixel

Change Log.

What’s new in v.1.10.9 - May 18, 2021

  • New Feature: The Instagram Widget is now configured via the Instagram Basic Display API. Javascript Fetching was deprecated due to tighter security policies from Instagram.
  • Confirmed compatibility with the newly released Magento 2.3.7 and 2.4.2-p1 versions.


What’s new in v.1.10.7 - March 8, 2021

  • New Feature: Added the possibility of displaying the image caption when hovering over the Instagram Feed.
  • Fixed a CORS error that prevented the Instagram Feed from loading onto the page.


What’s new in v.1.10.5 - January 25, 2021

  • Added a powerful caching solution to the extension to assure active users on the website are not affected by Instagram restrictions.
  • Added additional backend versioning verifications.


What’s new in v.1.10.1 - October 22, 2020

  • Fixed a bug related to the Lazy Loading functionality whereby, if configured via Widget Options, the images would sometimes not load correctly.
  • Confirmed compatibility with the newly released Magento 2.4.1 version.


What’s new in v.1.10.0 - August 10, 2020

  • Confirmed compatibility with the newly released Magento 2.4.0 version.


What’s new in v.1.9.8 - July 6, 2020

  • Whitelisted domain for Content Security Policies introduced in Magento 2.3.5.


What’s new in v.1.9.7 - May 7, 2020

  • New feature - Implemented Lazy Loading for Instagram Feed images (requires the Lazy Loading extension).
  • New feature - Implemented the ability to add Alt Text to images in the feed.
  • Added a fallback value for Alt value in case Instagram Widgets do not have an Alt tag.
  • Confirmed compatibility with Magento 2.3.5.
  • Implemented small Backend performance optimizations.
  • Added nxcli.net (Nexcess temporary URL) as a valid domain in the licensing process.
  • Added an option in the Developer section to allow for switching Magento's CSP between "report-only" and "restrict".


What’s new in v.1.9.6 - April 9, 2020

  • Fixed a Backend issue on Magento Commerce whereby the Category Schedule functionality was not working properly.


What’s new in v.1.9.5 - March 10, 2020

  • Added a new functionality which allows for using alt tags for Instagram images.
  • Added new translations.
  • Added backend Google reCaptcha compatibility for Magento 2.3.x


What’s new in v.1.9.4 - February 5, 2020

  • Code enhancements for increased security. Changed User Group info collection method.
  • Confirmed compatibility for Magento 2.3.4.


What’s new in v.1.9.2 - November 27, 2019

  • Functionality update. Due to a recent change in Instagram's API, the option to configure the extension with this API is no longer available. The extension now functions via Javascript Fetching, with the option to fetch images via a User Name or Tag Name.
  • Added Magento and PHP version in the WeltPixel Developer section.


What’s new in v.1.9.1 - October 16, 2019

  • Confirmed compatibility with the latst Magento 2.3.3 version.
  • Included the WeSupply Toolbox integration extension - Proactive Notifications Email & SMS, Returns & RMA, Store Locator, Delivery Date Estimate, Logistics Analytics, NPS & CSAT score. Get Free on-boarding and launch within 24 hours.


What’s new in v.1.9.0 - July 18, 2019

  • Confirmed compatibility with Magento 2.3.2.
  • Added HTTPS endpoint for licensing process.


What’s new in v.1.8.5 - June 7, 2019

  • Small performance improvements.


What’s new in v.1.8.4 - April 25, 2019

  • Added PHP version in the WeltPixel Developer Section.


What’s new in v.1.8.3 - April 3rd, 2019

  • Confirmed compatibility for Magento 2.3.1.


What’s new in v.1.8.2 - January 24, 2019

  • Deprecated Tag and Location types removed.
  • CSS adjustments for centered title.
  • Documentation improvements.
  • Helpcenter adjustment, removed zendesk iframe and added a simple link to our Support Center in order to avoid any potential conflicts with other admin js added by 3rd party extensions.
  • Fix for multiple rewritten ImageFactory classes, rewrite check validity, rewrite checks optimizations.


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 12, 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.


What’s new in v.1.6.1 - March 8, 2018

  • System log broken reference error fixes.


What’s new in v.1.6.0 - March 1st, 2018

  • Added optimized display layout for instagram pictures of various sizes, including image padding.
  • Added 'open in new tab' Instagram image option.


What’s new in v.1.5.8 - January 12, 2018

  • 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