weltpixel

MAGENTO 2 INSTAGRAM FEED WIDGET

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 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. Pictures can be displayed by user. 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 - on your web page, display the Instagram feed according to user account.
  • Select number of images - possibility to select the maximum number of the images you want to add.
  • Add title - option to add a Title.
  • Add description - option to add a 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 the Instagram images (thumbnail/low resolution/standard resolution).

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.3.1. 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
  • 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.3.1. 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
  • 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
  • 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 add the Instagram feed to your Magento Store?

Step 1.

  • To be able to use the Instagram Widget extension, you'll first 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 the Instagram Developer page. Login to your account or create one, and then click on Manage Clients, and finally on Register a New Client.
weltpixel
weltpixel

Step 2.

  • Fill out the Application Name, Description, and Website (which should be your website). Fill out http://localhost in the field Valid redirect URIs and press enter to confirm that field.

Note! The Instagram Developer page has issues loading the Google Captcha Script. Refer to this Stack Overflow article for a workaround.

Step 3.

  • In the Security tab, make sure that the Disable Implicit OAuth or Enforce signed requests options are unchecked.
weltpixel
weltpixel

Step 4.

  • Now you should see a success message as seen in the image on the left. Next, you'll need to grab the CLIENT ID.

STEP 5.

  • Paste the following url into your web browser's search bar and access it.

    https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://localhost&response_type=token&scope=public_content

    Add the CLIENT ID that was generated for you to the URL, replacing [CLIENT_ID_HERE] and hit enter. You will then connect to Instagram’s servers.

    Instagram will ask you whether or not 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.

weltpixel
weltpixel

STEP 6.

  • This is the last page you will see after authorizing access. Now, copy the code you see after localhost/#access_token=”yourcode” . You will need this code at step 7 and when configuring the Instagram Widget connection data.

STEP 7.

  • Find your user ID:

    Your user ID is the number listed before the first period within the access token received at Step 6 (the user ID is 1127918776 in this example).

weltpixel
weltpixel

STEP 8.

  • After getting the Instagram Client Id, Access Token and User ID, 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 9.

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

weltpixel
weltpixel

STEP 10.

  • 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 Client Id - Instagram Client Id
    • Instagram Access Token - A valid oAuth token. Can be used in the place of a Client Id.
    • 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.
    • 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.
    • Limit - Set the maximum number of images to be added.
    • Sort By - Sort the images in a sort order. The available options are:
      • None(as they come from Instagram).
      • Most recent.
      • Least Recent.
      • Most Liked.
      • Least Liked.
      • Most commented.
      • Least commented.
      • Random.
    • Resolution - Size of the images displayed. The available options are:
      • Thumbnail (150x150).
      • Low Resolution (306x306).
      • Standard Resolution (612x612).
    • Feed Type - As Instagram has removed the Tag and Location Feed Types, only the User Feed Type is currently available.
    • User Id - Id found in step 7.
weltpixel
weltpixel

Change Log.

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