InstaPics - Instagram Magento Extension

Instagram Magento Extension

Scope

Social commerce is one of the biggest commerce trends from last few years. Now a days, social media is the biggest part of everyone's day-to-day life. They may not help e-commerce stores to get as many as sales, but they definitely influence their market positions: branding, online reputation, search engine rankings as well as social recommendations of products and sellers. Instagram is one the best ways to showcase store's collection and to convince with users with their collection.

With our Instagram Magento module, you will add a social media integration that might appeal to your users. Through this you can showcase different trends to use your store's collection and provide them new learning experience of fashion done by different customers using your store's collection.

How to use

Instagram Magento module enables you to showcase your instagram images by two ways :-

By Username
By Hashtags

You can display your Instagram images on home page, category pages, product pages or everywhere simultaneously in both the ways. You can display images either in grid fashion or as a slider. Both grid view and slider are fully responsive irrespective of any bootstrap class or any other designing frameworks. And it contains high configurable options so that users can configure sliders according to their website design.

Requirement

Major requirement for integrating Instagram in magento is to configure Instagram's API settings correctly. Make sure that your Instagram app should be in sandbox mode.

Instagram API requirement:

Client Id
Client Secret
Redirect URL

You can get all this credentials by logging in Instagram developer's section. Follow our installation document to properly create user credentials.

Features

It provides options to fetch images by username or hashtag both simultaneously
It provides options to showcase images in slider or in grid view
It provides options to customize slider according to your theme
Fully responsive slider
It can be placed anywhere throughout the website

Steps to collect INSTAGRAM API Details:

Login Instagram if you are not already. Then go to Instagram Developer Page
Click on “Register your application”
If you don’t already have an application registered, you will now see a form to register a new one. If you instead see a list of “clients”, click the “Register new client” at the top right
Now, fill the form fields as mention below
Application Name – Your store name (Do not use Instagram, IG, insta or gram in your app name)
Description – Enter a proper description. (define your app basic working details here)
Company Name – Your company Name

Website URL – Your website URL. (https://example.com)
Valid Redirect URIs – http://example.com/instapic.php (Please enter the your website URL followed by instapic.php)
Contact Email – provide your email address in this field
ReCaptcha – enter the captcha code value in this field for secure registration procedure by Instagram
Disable implicit OAuth – Go to security tab above the page, and uncheck the disable implicit OAuth option
Register – Finally after filling all valid details in form click on the register button to complete registration
Copy client Id, client secret & redirect URL and paste it in magento admin section

CONFIGURE INSTAGRAM MODULE IN ADMIN PANEL

Once you purchase this module, you will get one compressed file.

Extract that file and you will get the complete folder of the module
Copy complete folder and paste it in your website root directory
After that login to your website admin panel and clear the cache in System > Cache Management
Then you can go to System > Configuration. Here you can see all the configuration options of the module

Instagram Images By User Details:

Enable Instagram By Name: Enable it, if you want to display images by user details
Number of images: It defines the maximum number of images to be collected from instagram
Client Id: Copy your client id from instagram developer section and paste it here
Client Secret: Copy your client secret from instagram developer section and paste it here
Redirect URL: Copy your redirect URL from instagram developer section and paste it here.
Generate Access Token: Click on 'Generate Access Token' button and then you will get your user-id and access-token. Copy both from the redirected page and paste in the below input fields

User Id: Copy user id from redirected page and paste it here
Access Token: This is the most important field which is responsible to fetch your images. Copy exactly same from redirected page and paste it here. Make sure there must not be any extra spaces as suffix or prefix of access token.
Select how to display images: Select the view option in which you want to display your images. There are two options to display your images: Slider view OR Grid View
Number of images in one row: It defines the number of images to be displayed in one row of grid view
Grid Image Margin: It defines the margin between each images in grid view.
Include JS and CSS for slider: Select yes, if you are enabling the slider view. It will include extra js and css which is required for slider

Slider Setting:

Select Slider Mode: There are 3 modes available for slider: Horizontal, Vertical OR Fade. Select the slider mode from one of this
Start from Random Slide: You can select to start your slider with random images. So, whenever your slider is loaded, it will start with any random image
Slide margin: It defines the margin between slides. Insert margin according to your design

Slide Width: It defines the width of individual slide
Maximum Number of Slides: It specifies maximum number of slide to be displayed in one view. You can set it according to your design requirement
Display Navigation Controls: Enable or disable navigation controls to display
Minimum Number of Slides: It specifies minimum number of slide to be displayed in one view. This will be used for responsive layout. You can set it according to your design requirement

Instagram Images By Hash Tag:

Enable Instagram By Name: Enable it, if you want to display images by hashtag
Enter Hash Tag: Enter #hashtag by which you want to search the images
Number of images: It defines the maximum number of images to be collected from instagram
Select how to display images: Select the view option in which you want to display your images

Number of images in one row: It defines the number of images to be displayed in one row of grid view
Grid Image Margin: It defines the margin between each images in grid view
Include JS and CSS for slider: Select yes, if you are enabling the slider view. It will include extra js and css which is required for slider

Instagram Magento Extension

Instagram Magento Extension

Scope

How to use

Requirement