Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to...

14
Instagram for Magento © Meetanshi.com 1. Extension Installation Guide 2. Configuration 3. Page View Settings 4. Popup View Settings 5. UTM Tracking Settings 6. Fetch Instagram Images 7. Manage Instagram Images 8. Caption with Hyperlink View Settings 9. Product Feed View Settings 10. Category Specific Settings 11. Product Specific Settings 12. Instagram in Frontend

Transcript of Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to...

Page 1: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

1. Extension Installation Guide

2. Configuration

3. Page View Settings

4. Popup View Settings

5. UTM Tracking Settings

6. Fetch Instagram Images

7. Manage Instagram Images

8. Caption with Hyperlink View Settings

9. Product Feed View Settings

10. Category Specific Settings

11. Product Specific Settings

12. Instagram in Frontend

Page 2: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

1. Extension Installation • Upload or copy all folders in the zip package to your Magento root folder. It doesn’t

overwrite any existing files but just adds new files to the folder structure.

• Once done, log in your Magento admin panel, go to System → Cache Management, select

all caches and refresh.

• Navigate to System → Configuration, if you can see the extension tab, it is installed

properly.

• If you get Access denied error, you need to log out admin panel and log in again.

2. Configuration For configuring the extension, login to Magento, move to System → Configuration →

Instagram where you can find various settings to enable the extension.

• Instagram: Enable or disable Instagram extension from here.

• Instagram Profile User Name: Add your profile user name to show in image popup.

• Fetch Instagram Images Using: Select either from the hashtags or your own user name

to fetch images.

• Instagram User Access Token: Enter your access token. You can get it from

https://www.instagram.com/developer/authentication/ following the steps

mentioned.

Method to receive the access token:

Reach out to authorization URL:

• Not logged in user will be asked to log in.

• The user will be asked to grant application access to his Instagram data.

The server will redirect the user in one of two ways:

• Server-side flow (recommended): Redirect the user to desired URL. Take the provided codeparameter and exchange it for an access token by posting the code toaccess token URL.

• Implicit flow: Instead of handling a code, include the access token as a fragment (#) in the URL. Although the method being less secure, it allows applications without any server component to receive an accesstoken.

• No of Instagram Images to Fetch: Set the number of Instagram images to fetch.

Page 3: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

3. Page View Settings To display Instagram images on various pages, configure the below settings. • Display Instagram Images on Home Page: Select “YES” to display images on home page.

• Number of Instagram Images to Display on Home Page: Set the number of images to

show on home page.

• Display Instagram Images on Category Page: Select “YES” to display images on Category

page.

• Number of Instagram Images to Display on Category Page: Set the number of images to

show on category page.

• Display Instagram Images on Product Page: Select “YES” to display images on product

page.

• Number of Instagram Images to Display on Product Page: Set the number of images to

show on product page.

• Number of Instagram Images to Display on Instagram Page: Set the number of images

to show on Instagram page.

Page 4: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

4. Popup View Settings Configure the following popup view settings:

• Instagram Image Popup View: Select Instagram Image Popup View from drop

down.

• Auto Play Video in Popup: Enable or disable auto play video in Popup.

5. UTM Tracking Settings Keep check on the traffic from Instagram in Google Analytics by configuring the UTM tracking

settings as shown here:

• URLs with UTM Tracking: Enable URLs with UTM Tracking

• Campaign Source: Set the campaign source.

• Campaign Name: Set the campaign name.

• Campaign Medium: Set the campaign medium.

Page 5: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

6. Fetch Instagram Images Click “Fetch New Images” to fetch Instagram images based on the username or hash tag as

configured. You can approve or delete fetched images as per your requirement.

7. Manage Instagram Images All the approved images listed here. You can edit image information to set hotspots, caption,

links, create product feed as set while configuring the extension.

Page 6: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

8. Caption with Hyperlink View Settings

If you have set Instagram Popup View as “Caption with Hyperlink”, you can edit the image to set

hotspots, captions and hyperlinks here. You can set hotspots simply by dragging and dropping

the pins.

• Caption-1: Set the caption to redirect users when they click the caption from popup.

• Hyperlink-1: Set the hyperlink to redirect users when they click the caption from

popup

• Hotspot Position X - 1 and Hotspot Position Y – 1 will be set automatically once you

set the position of pins.

Similarly, you can configure up to 5 captions and hyperlinks for the Instagram image.

Page 7: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

9. Product Feed View Settings If you have set Instagram Popup View as Product Feed from configuration, you can find settings

to setup product feeds for the fetched image. Set hotspot positions just by dragging and

dropping the pins and set SKU to fit with each hotspot.

Product SKU - 1: Set product SKU to show product feed in popup.

Hotspot Position X – 1 and Hotspot Position Y – 1 will be automatically set once you set the

position of pins.

Similarly, you can setup 5 product feeds with each hotspot for this image.

Page 8: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

10. Category Specific Settings You can also show Instagram images on the category page. Simply move to Catalog → Manage

Categories and select the category for which you want to show images on the category page. As

shown below, select User name or Hashtag to show Instagram images on specific category page.

11. Product Specific Settings You can also show Instagram images on specific product pages. Navigate to Catalog → Manage

Products and select the product for which you want to show Instagram images. select User

name or Hashtag as shown below.

Page 9: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

12. Instagram Images on Frontend Once the extension is configured, you can see Instagram feed enabled on various pages. • Instagram Images on Home Page

Page 10: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

• Instagram Images on Category Page

Page 11: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

• Instagram Images on Product Page

Page 12: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

• Instagram Images on Instagram Page

You can navigate to Instagram page from My Account. On hover of Instagram image, likes

and comment counts are displayed. And, on click of the images, a popup is opened with the

selected view as set in configuration.

• Caption with Hyperlink View

Caption with hyperlink has multiple captions on hovering of which hotspots can be seen.

Moreover, on click of captions, users get redirected to set links. Users can navigate through

all images and click the “Follow” button to follow the user on Instagram.

Page 13: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

• Product Feed View in Popup

In this view, users can see products blocks on hover of which hotspots can be seen on

image. On click of product blocks, users get redirected to respective products.

Page 14: Magento Instagram User Guide by Meetanshi · 2018-09-04 · Product SKU - 1: Set product SKU to show product feed in popup. Hotspot Position X – 1 and Hotspot Position Y – 1 will

Instagram for Magento © Meetanshi.com

• Default Insta View

This is the same view how you see Instagram app on the desktop. The default Insta view

popup displays the “Follow” button to follow user profile on Instagram. Also, you can see

the original caption with like counts, comments and the navigation bar to navigate through

all images.

If you have any question or need support, Contact us at https://meetanshi.com/contacts/