magento 2 instagram connect...instagram connect x-mage2 20 2. in “manage client” page, click...
TRANSCRIPT
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.