Magento 2 Instagram

Magento 2 Instagram integrates Magento 2 with Instagram to fetch Instagram images, edit and show them in the front-end to give a look and feel of an amazing Instagram shop in Magento 2 stores.

 

Table of Content

  1. Extension Installation Guide
  2. Configuration
  3. Page View Settings
  4. Fetch Instagram Images
  5. Manage Instagram Images
  6. Caption with Hyperlink View Settings
  7. Product Feed View Settings   
  8. Category Specific Settings
  9. Product Specific Settings
  10. Instagram in Frontend

 

  1. Extension Installation
  • For Magento Marketplace Customers
    • Create a folder structure in Magento root as app/code/Meetanshi/Instagram
    • Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/Instagram via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush
  • For Meetanshi Customers
    • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  1. Configuration
    For configuring the extension, login to Magento 2, move to Stores > 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 steps below to get the 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

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://meetanshi.d.pr/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.
  • Maximum Number of Images to Fetch: Set the maximum number of images to fetch from Instagram.
  • 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 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 products.


  

  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: 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.
  • Display Images in Product Media Gallery: Select “YES” to display images in Product Media Gallery.
  • Display Images in Product Detail Section: Select “YES” to display images in Product Detail Section.
  • Number of Instagram Images to Display on Instagram Page: Set the number of images to show on Instagram page.


  

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

 

  1. Category Specific Settings
    As shown below, select the User name or Hashtag to show Instagram images on a specific category page.


  1. Product Specific Settings
    To show Instagram images on specific product pages, select User name or Hashtag as shown below.




 

  1. Instagram in 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 the Instagram page from the top link or footer link. On the hover of the 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
    On hovering of the Instagram image, hotspots can be seen and on the hover of each hotspot, a caption is seen. The users click the caption to get redirected to set links. Users can navigate through all images using the navigation arrows and click the “Follow” button to follow the user on Instagram.


  

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

​​​​​​​




​​​​​​​