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

To register a new Instagram API Application, please refer to this guide

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