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 that 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 “Add a New App”, it will open a popup to create an App ID. Select the option “For Everything Else”.

 

  • Enter App Display Name and click Create App ID button

 

  • Complete security check and click Submit button and it will redirect you to the Manager app dashboard page.

 

  • In Manager app dashboard, go to Setting > Advanced
  • Under the section ‘Business Manager’, select a Business Manager or create a Business Manager then save this setting

  • After ‘Save Changes’, click the ‘Configure in Business Manager’ button under the “Business Manager” section. It will redirect to the Business setting dashboard.

 

  • Setting Business Account:
    • Create a system user (or reuse an existing one) for this business in Business Settings under Users > System Users tab
    • Add the system used above as someone who acts as an admin for a Page you're about to generate an access token for. (Add the system user to a selected Page by clicking Add People button under Accounts > Pages tab.)
    • Add the Assets by clicking the Add Assets tab
    • Select Assets type(Pages and Apps), Assets, and Set Permissions for generating a new token. (here admin has all Permissions)

 

  • After adding the assets and people, 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.

 

 

  • Paste the Token here and Debug it.

 

  • You can see Token Information like expiry date, validity, origin, scopes, etc.

 

To check all the above steps in a video format, click here: https://drops.meetanshi.com/kPFPH1

  • Facebook Page ID: Enter your Facebook page ID. Follow the steps below to find your Facebook page ID.
    • When you create a new Facebook page, the page ID is given. If you want to find the page ID of an already existing page, visit the page and check the URL. The characters in the URL after the page name is your page ID. For example, the URL is https://www.facebook.com/Test-Business-2387482487989307
    • Here the name of the page is “Test Business” and the digits 2387482487989307 is the page ID.

    • Or, you can get the Page ID from the Page “About” section (only when Logged in to your Facebook) under “More Info”.

 

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