Instagram for Magento 2

Instagram

Introduction

The Instagram extension allows to integrates Magento 2 with Instagram to display Instagram images in your website and increase engagement.

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Managing Instagram

The extension allows store administrator to create any number of Instagram widget and place it anywhere in the store. To view, edit or create new Instagram widget, go on the Admin sidebar, and click on CONTENT ⟶ Element ⟶ Widget.

To create a Instagram Widget click "Add Widget" button. Then, complete the settings to create the widget;

Settings

In the Settings section, do the following;

Type - choose Instagram by Ulmod. Then, tap Continue

Design Theme - choose the design theme which is set to the current theme. Tap Continue

Storefront Properties

Under Storefront Properties, do the following:

In the Widget Title field, enter a descriptive Instagram title for internal reference only.

Set Assign to Store Views to the view where the Instagram will be available.

Enter a number in theSort Order field to determine the order of the Instagram if it appears in the same position as other content elements. The highest position is zero.

Layout Updates

In the Layout Updates section, tap Add Layout Update.

Set Display On to the type of page where the Instagram is to appear.

In the Block Reference list, choose the area of the page layout where the Instagram is to be placed.

Widget Options

Please, check the How to Configure Instagram API to learn how to regsiter the application and get your Client Id and Access Token.

Under Widget Options :

In the Instagram Client Id field, enter the your Client Id

In the Instagram Access Token field, enter a valid access token

Defines a Title to appear in the Instagram block on storefront

Enter a short Description to appear in the Instagram block after the Title

The Display Images From field , enables to choose the feed type.

  • If User is selected, specify a unique "User Id" to get images;
  • If Location is selected, enter a "Location Id";
  • If Tag is selected, enter a specific "Tag name", images with that that tag will be shown;

In the Images Per Row select images to display per row, from 2-6 images

In Images Limit field, specify the maximum number of images to display in storefront

The Select Resolution of Image enables to select the size of the images to get. You can display images with Thumbnail (default) - 150x150, Low Resolution - 306x306 or Standard Resolution 612x612

The SortBy field, enables to sort the images in a sort order. The following options are available:

  • Default - As they come from Instagram
  • Newest to oldest
  • Oldest to newest
  • Highest # of likes to lowest
  • Lowest # likes to highest
  • Highest # of comments to lowest
  • Lowest # of comments to highest
  • Random order

In the Show Likes Number? field, select "Yes" to show likes number on images. The likes icon and the number will display on hovering image in the storefront

In the Show Comment Number? field, select "Yes" to show the comment number on images. The comment icon and the number will display on hovering image in the storefront

If Open Images in new Tab is set to "Yes", images will open in new tab on click

In the Custom CSS Enter a custom CSS to override the default style for the widget. Example: .um-instagram-container{background-color:#f0f0f0} to override the default container background color

Go on the storefront to verify that the widget is working correctly. To change the widget location, you can reopen it and try a different page or block reference.

Note: please, re-enter your Instagram Client Id and Access Token and save, any time you edit the widget .

API Configuration

How To Configure Instagram API

To register a new Instagram API Application, please follow the step-by step instructions below:

Go to https://www.instagram.com/developer/

Login to your Instagram account or create one. Then click on Manage Clients

Then click 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.

Go to Manage Clients and copy you Client Id

Paste the following url into your web browser.

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

Replace http://localhost with your domain, Example: http://mydomain.com

And, [CLIENT_ID_HERE] with the Client Id generated ealier

Click enter, Instagram will ask you whether you want to grant the client you registered yo access your account.

Hit Authorize.

You will be redirected to your redirect uri, your newly generated Access Token will be added to the url. And, your User ID is the number before the first period from the access token. For example :

Redirect uri :

http://mydomain.com/#access_token=7461739288.105c41a.f4c52e7d88c04582bbfdcb941de512cf

Access Token:

7461739288.105c41a.f4c52e7d88c04582bbfdcb941de512cf

User ID:

7461739288

Please keep your Access Token in a safe place and do not share it with anyone.

Now, copy the Client Id, Access Token and User ID received and insert it under the extension settings in the Widget Options..

Frontend View

On Page

Example of Instagram created via widget and displaying on the home page

Responsive design

The extension is responsive to mobile devices and work great regardless the type of screen or device used to view your store

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page