INSTAGRAM CONNECT

X-MAGE2 1

MAGENTO 2 INSTAGRAM CONNECT

USER GUIDE

Version Created Date

1.0.0 2016-06-17

2.0.0 2016-12-05

INSTAGRAM CONNECT

X-MAGE2 2

Table of Contents Instagram Connect configuration ........................................................................................................... 3

Menu ................................................................................................................................................... 3

Connect configuration ........................................................................................................................ 4

Instagram images slider widget .............................................................................................................. 4

Menu ................................................................................................................................................... 4

Click Add button to create new widget .............................................................................................. 5

Choose “Instagram Image Slider” type ............................................................................................... 5

Fill information, choose layout update to define where widget will be displayed on store. ............. 6

Choose widget options to customize how the widget display ........................................................... 7

Instagram images follower widget.......................................................................................................... 7

Create new widget and choose “Instagram Follower Slider” type ..................................................... 8

Fill information and choose layout update like Instagram Images Slider ........................................... 8

Customize widget options like Instagram Images Slider but it doesn’t have hashtag. ...................... 9

Instagram detail product display configuration ...................................................................................... 9

In Instagram Configuration view, choose option to display images slider for product detail page ... 9

Create tag for product ............................................................................................................................ 9

Menu ................................................................................................................................................. 10

Edit product and choose the hashtag of this product on Instagram account .................................. 11

Instagram shopping page configuration ............................................................................................... 12

In Instagram Configuration view, choose option to display link to Instagram Shopping Page on

Store website .................................................................................................................................... 12

Instagram shopping page template design ........................................................................................... 12

Menu ................................................................................................................................................. 13

Click “Add template” button to create new template ...................................................................... 13

Fill information to template .............................................................................................................. 14

Design template by adding tile with 4 size, drag and drop tile to change location. ......................... 14

Change to Mobile tab to design template for mobile ...................................................................... 15

On list template, choose Add image feature to add pictures for each tile of designed template ... 16

Drag and drop image from Image container to design container. After drag and drop in PC or

Mobile, the image will be display in the tile with same id of the remain device ............................. 17

Change to Mobile tab to view the display after Drag and Drop images. .......................................... 18

The image can be removed or swith from tile to tile ....................................................................... 18

If the mobil or pc design after adding image is not good enough. ................................................... 19

Register Instagram Developer Client .................................................................................................... 19

INSTAGRAM CONNECT

X-MAGE2 3

Instagram Connect configuration

Menu

INSTAGRAM CONNECT

X-MAGE2 4

Connect configuration

1 – Input Client id which is received when register the Instagram Developer Client

2 – Input Client secret which is received when register the Instagram Developer Client

3 – Input Access token which is received when register the Instagram Developer Client

(The Register Instagram Developer Client steps will be documented in final part)

Instagram images slider widget

Menu

INSTAGRAM CONNECT

X-MAGE2 5

Click Add button to create new widget

Choose “Instagram Image Slider” type

INSTAGRAM CONNECT

X-MAGE2 6

Fill information, choose layout update to define where widget will be displayed on

store.

INSTAGRAM CONNECT

X-MAGE2 7

Choose widget options to customize how the widget display

1 – Title of slider 2 – Instagram hashtag for slider images : Choose specific images on instagram which will be display in slider by using same hashtag for them. 3 – Max number of image in slider 4 – Number of columns, Number of rows : Customize them by number to build the way slider display to fit with space on store website. 5 – Display likes and comments : Choose to display image’s likes and comments count when view image bigger

Instagram images follower widget

INSTAGRAM CONNECT

X-MAGE2 8

Create new widget and choose “Instagram Follower Slider” type

Fill information and choose layout update like Instagram Images Slider

INSTAGRAM CONNECT

X-MAGE2 9

Customize widget options like Instagram Images Slider but it doesn’t have hashtag.

Instagram detail product display configuration

In Instagram Configuration view, choose option to display images slider for product

detail page

1 – Product detail page display : Choose to display images slider or not 2 – Product detail image number: Choose the number of images on slider 3 – Display likes and comments: Like Instagram Image Slider, choose to display Likes and Comments count of images when viewing bigger.

Create tag for product

INSTAGRAM CONNECT

X-MAGE2 10

Menu

INSTAGRAM CONNECT

X-MAGE2 11

Edit product and choose the hashtag of this product on Instagram account

INSTAGRAM CONNECT

X-MAGE2 12

Instagram shopping page configuration

In Instagram Configuration view, choose option to display link to Instagram Shopping

Page on Store website

1 – Link’s label: Label of link when display on Store website

2 – Enable link on Navigation menu, Enable link on Footer : Choose to display link on the menu or

the footer or not

Instagram shopping page template design

INSTAGRAM CONNECT

X-MAGE2 13

Menu

Click “Add template” button to create new template

INSTAGRAM CONNECT

X-MAGE2 14

Fill information to template

1 – Title : Title of template

2 – Description : Description of template

3 – Status : Choose to using template or not

Design template by adding tile with 4 size, drag and drop tile to change location.

List buttons: 1 – Add buttons : Add tile with 4 size 2 – Save grid : save current design of template 3 – Load grid : load saved design of template 4 – Clear grid : Clear all tile

INSTAGRAM CONNECT

X-MAGE2 15

Change to Mobile tab to design template for mobile

INSTAGRAM CONNECT

X-MAGE2 16

On list template, choose Add image feature to add pictures for each tile of designed

template

INSTAGRAM CONNECT

X-MAGE2 17

Drag and drop image from Image container to design container. After drag and drop

in PC or Mobile, the image will be display in the tile with same id of the remain device

1 – The image container: Contain all images which have the hashtag for the products of store 2 – One image just display in template 1 time

INSTAGRAM CONNECT

X-MAGE2 18

Change to Mobile tab to view the display after Drag and Drop images.

The image can be removed or swith from tile to tile

INSTAGRAM CONNECT

X-MAGE2 19

If the mobil or pc design after adding image is not good enough.

Register Instagram Developer Client 1. Go to the link https://www.instagram.com/developer/ , click “Log in” and use your

Instagram account to Log. Click “Register” in developer homepage to register new Client.

INSTAGRAM CONNECT

X-MAGE2 20

2. In “Manage Client” page, click “Register a New Client” button to see “Register new Client ID”

page. Fill all filed and capcha and click “Register” button. The redirect url have to be a real

url. We can use https://www.google.com.vn/ to be a redirect url.

3. After register successful, we will be redirect to “Manage Clients” page. We can see

information of our Client with CLIENT ID,CLIENT SECRET and REDIRECT URI

INSTAGRAM CONNECT

X-MAGE2 21

4. Now we have CLIENT ID and CLIENT SECRET, we have to get ACCESS TOKEN for finish all

required fields. Firstly we have to Authenticate for Client by go to new Browser page and go

to this link:

https://www.instagram.com/oauth/authorize?client_id={ Your CLIENT ID }&redirect_uri= {

Your redirec URI

}/&scope=basic+public_content+follower_list+likes+comments+relationships&response_typ

e=code

The confirmation to Authorize will display and click to “Authorize” button.

5. After Authorize you will be redirect to the “Redirect URI” which you register Client before (In

my example is google.com) with the “code” on the URL. We will use this code for get ACCESS

TOKEN key.

INSTAGRAM CONNECT

X-MAGE2 22

6. The next step you can use some tools online or not to Post a request to get Access Token. In

my case, i use https://www.hurl.it/, one of online website which i can Post request easily. Go

to https://www.hurl.it/, Change the Destination field to 'POST' by select in combobox and

input the URL:

https://api.instagram.com/oauth/access_token

Click Add parameter(s) and input all of these information below:

+ client_id : your CLIENT ID

+ client_secret : your CLIENT SECRET

+ grant_type : authorization_code

+ redirect_uri : your redirect URI

+ code : your code</br>

Click to make sure you are not robot and click 'Launch Request' button, you can see the

result when scroll down. You can see in the Body of the result, we can get the ACCESS

TOKEN as a list of characters in access_token field. We finish to get all required field for

connect Instagram and get information from Instagram API: CLIENT ID, CLIENT SECRET and

ACCESS TOKEN

INSTAGRAM CONNECT

X-MAGE2 23

7. Note:

a. The code will be expried in short time and when you request to get ACCESS TOKEN

you can get this error in Body of result:

"error_message": "Matching code was not found or was already used."

You just do step 4 again to get new code and continue to finish all step.

INSTAGRAM CONNECT

X-MAGE2 24

b. The ACCESS TOKEN can be expried but for long time. You should request again if

don't see the image display on store as normal or for each 2 weeks for make sure

that the ACCESS TOKEN will always be available.

c. First time we have to do all steps. You should save the URL in step 4 to use for the

next time. Do the same with step 6 by note all information except “code” value. It

will save alot of time to get ACCESS TOKEN.

d. Use 3 required field CLIENT ID, CLIENT SECRET and ACCESS TOKEN for Instagram

connect configuration feature.