Magento Instagram

Home > Magento Extension User Guides > Magento Instagram

Magento Instagram integrates Instagram with Magento to fetch Instagram images and create a beautiful Instagram shop in Magento store to boost the store visits and sales!

 

Table of Content

  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

 

  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.

 

  1. Configuration
    For configuring the extension, log in 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.
  • Instagram User Access Token: Enter your access token. Follow the below steps to get access token.

Connect Instagram Graph API
Before starting, make sure that you have the following required access:

  • An Instagram Business Account or Instagram Creator Account.
  • A Facebook page account connected to the Instagram account.
  • A Facebook Developer account that can perform Tasks on that Page
  • A registered Facebook App with Basic settings configured

Steps to get the access token:

    • On click of “Create App”, a popup will be opened. Select the app type from the popup and click “Continue”.

    • Enter app display name, app contact Email, select the purpose of app creation, select your business manager account and click “Create App” button.

    • Complete security check by re-entering the password and click Submit button and it will redirect you to the app manager dashboard.

    • In Manager app dashboard, go to Roles > Roles
    • Under the section “Business Manager Account” section, click on your business manager or create a business manager.

    • Click “See All in Business Settings”.

 

    • Under the Business setting dashboard, click “System Users” under “Users”. Add a new system user (or reuse an existing one) by clicking the “Add” button.

    • The system user is someone who acts as an admin for the Facebook page you're about to generate an access token for. Enter the system user details and click “Create System User” button.

 
    • Add the assets by clicking the Add Assets tab.

 

    • Select your Facebook page from the “Asset type” and grant permissions for generating a new token. (Here, admin has all the permissions)

    • Now, click “Apps” from the asset type, select the app, and grant permissions for generating a new token. (Here, admin has all the permissions)

    • After adding the assets, click “Generate New Token”. Select an app for which you want to generate the token.

 

    • Select all the required permission and click “Generate Token”.

 

    • After clicking “Generate Token”, you will receive a token, copy it and paste it in the Magento extension configuration under the “Instagram User Access Token” field.

 

    • Paste the access token here and Click “Debug”. You can see access token information like expiry date, validity, origin, scopes, etc.

  • Facebook Page ID: Enter your Facebook page ID. Follow the steps below to find your Facebook page ID.
    • Login to your Facebook account, move to your Facebook page. Click About at the top of your page. If you don't see it, click More.
    • Scroll down to find your Page ID below “More Info”. For more details, visit https://www.facebook.com/help/1503421039731588

 

  • Fetch Instagram Images Using: Select option to fetch Instagram images.
    • My User Name: You can use your own user name added under Instagram Profile User Name to fetch images.
    • Hashtags: Enter comma separated hashtags to fetch Instagram images. It will only fetch hashtagged images from your profile.
  • No of Instagram Images to Fetch: Set the number of Instagram images to fetch.

 

  1. 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: Enter the number of images to show on home page.
  • Display Instagram Images on Category Page: Select “YES” to display images on the Category page.
  • Number of Instagram Images to Display on Category Page: Enter the number of images to show on the 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: Enter the number of images to show on the product page.
  • Number of Instagram Images to Display on Instagram Page: Enter the number of images to show on the Instagram page.


  

 

  1. Popup View Settings
    Configure the following popup view settings:
  • Instagram Image Popup View: Select Instagram popup view to show in frontend.
    • Caption with Hyperlink: Add multiple captions with link to redirect users when they click captions from the popup.
    • Product Feed: Add multiple product SKUs to fit with the products in image. On click of product feeds, users will be redirected to linked product pages.
  • Auto Play Video in Popup: Enable or disable auto play video in Popup.



 

  1. UTM Tracking Settings
    Keep a 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.


 

  1. Fetch Instagram Images
    Click “Fetch New Images” to fetch Instagram images based on the username or hashtag as configured. You can approve or delete fetched images as per your requirement.


  1. 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.


  

 

  1. 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 the popup.
  • Hyperlink-1: Set the hyperlink to redirect users when they click the caption from the 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.



 

  1. Product Feed View Settings
    If you have set Instagram Popup View as Product Feed from the 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 the popup.
    Hotspot Position X – 1 and Hotspot Position Y – 1 will be automatically set once you set the position of pins.

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


 

  1. 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 a specific category page.


  

 

  1. 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.



 

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


 

  • Instagram Images on Category Page




 

  • Instagram Images on Product Page



 

  • Instagram Images on Instagram Page
    You can navigate to Instagram page from My Account. On hover of an 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 the 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.


  

 

  • Product Feed View in Popup
    In this view, users can see products blocks on hover of which hotspots can be seen on the image. On click of product blocks, users get redirected to respective products.



 

Updated:

Other Articles

and 228 more ...