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

 

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

• • Login to your Facebook Developer Account and go to https://developers.facebook.com/apps/. Click “Create App” to create new Facebook app.

• • 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 2 extension configuration under the “Instagram User Access Token” field.

 

• • After receiving token, go to Facebook for Developers and click Tools > Access Token Debugger.

• • 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. Adding hashtags will fetch the images (having the hashtags you entered) from your Instagram account only.
• 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.
• Upload Instagram Page Banner: Upload image banner to show on the Instagram page in the frontend.

  

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

  

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

  

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

  

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

 

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

 

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

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

 

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