magento 2 instagram
DESCRIPTION
Magento 2 Instagram extension integrates Instagram with Magento 2. Display Instagram images on any CMS page. Instagram is one of the popular social media platforms. Its popularity can be an excellent medium to engage to potential visitors. Meetanshi developed Magento 2 Instagram extension to fulfill this purpose! Integrate Instagram with Magento 2 and fetch Instagram images in the stores to create a beautiful Insta shop. Take the most out of your Instagram account for your business! Use Magento 2 Instagram extension to increase traffic and hence more conversions! The module enables to fetch Instagram images, edit and display them in the storefront. It creates an impression of an Instagram shop in Magento 2 stores. Additionally, increase your Instagram followers! To start using the module, firstly update the Instagram content via hashtags or your own username on your Magento 2 store and endorse the products with Instagram images. Moreover, you can set hotspots on Instagram images to make use of indirect marketing by setting caption with hyperlink or product feed with the hotspots. Get Magento 2 Instagram extension today and boost your sales! Benefits of Meetanshi's Magento 2 Instagram extension: • Enable/disable Magento 2 Instagram extension from the backend. • Enable Instagram images to display for the whole store, specific categories or specific products. • Enter your username and authenticate your Instagram profile by adding the access token to use the extension. • Add multiple hashtags or use your own username to fetch images and update the Instagram content on your Magento 2 Store. • Make the Instagram view attractive by choosing one of the three Instagram popup views: Caption with hyperlink, Product feed and default Insta view. • Select username or hashtags from product edit and category section to display Instagram images on product and category page respectively. • Allows displaying the images from Instagram to any CMS pages of your store. • Restrict the number of images to be displayed on the home page, category page, product page, and Instagram page. • Display Instagram images in product media gallery section and the product description section of the product page. • Also, set number of Instagram images to show on the Instagram page. • Admin can easily fetch and update image list just with a single click. • Admin can review, approve or delete and edit Instagram images before the display. • Admin is allowed to delete the approved images in bulk or one by one. • Allows editing the image details such as captions, hyperlinks, product SKUs, hotspots from Manage Instagram Images section. • Drag and drop pins to set hotspot positions from backend to display in frontend automatically. • Displays Instagram images in a responsive popup. • On hover of Instagram images on any page, likes and comments counts are displayed. • The module automatically brings original caption to show in image popup in the frontend. • Display hotspots on Instagram images on hover of various captions or products. • Encourage users to follow you on Instagram for updates by displaying the Instagram profile with follow button in image popup. • Navigate to other Instagram images using navigation buttons on the popup. • Use the module as an Instagram widget on any page. • Multi-store support. For more information, visit https://meetanshi.com/magento-2-instagram.htmlTRANSCRIPT
Instagram for Magento 2 © Meetanshi
Instagram for Magento 2
User Guide
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
Instagram for Magento 2 © Meetanshi
1. Extension Installation • For Magento Marketplace Customers
o Create a folder structure in Magento root as app/code/Meetanshi/Instagram
o Download and extract the zip folder and upload our extension files to the
app/code/Meetanshi/Instagram via FTP.
o 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
o Extract the zip folder and upload our extension to the root of your Magento 2 directory via
FTP.
o 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
Instagram for Magento 2 © Meetanshi
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 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:
• Create Facebook app (https://developers.facebook.com/docs/apps#register) • Go to Add a New App ( https://developers.facebook.com/apps/)
Instagram for Magento 2 © Meetanshi
• On click of “Add a New App”, it will open a popup to create an App ID. Select option “For
Everything Else”.
• Enter App Display Name and click Create App ID button
Instagram for Magento 2 © Meetanshi
• Complete security check and click Submit button and it’s redirect to 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
Instagram for Magento 2 © Meetanshi
• After ‘Save Changes’, click the ‘Configure in Business Manager’ button under “Business
Manager” section. It will redirect to the Business setting dashboard.
• Setting Business Account: o Create a system user (or reuse an existing one) for this business in Business Settings
under Users > System Users tab o 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.)
o Add the Assets by clicking the Add Assets tab o Select Assets type(Pages and Apps), Assets, and Set Permissions for generating a new
token. (here admin has all Permissions)
Instagram for Magento 2 © Meetanshi
• 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”.
Instagram for Magento 2 © Meetanshi
• After clicking ‘Generate Token’, you will receive a token, copy it.
• After receiving token, go to Facebook for Developers and click Tools > Access Token Debugger.
Instagram for Magento 2 © Meetanshi
• 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
Instagram for Magento 2 © Meetanshi
• Facebook Page ID: Enter your Facebook page ID. Follow the steps below to find your
Facebook page ID.
o 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
o Here the name of the page is “Test Business” and the digits 2387482487989307 is the
page ID.
o Or, you can get the Page ID from the Page “About” section (only when Logged in to your
Facebook) under “More Info”.
Instagram for Magento 2 © Meetanshi
• Fetch Instagram Images Using: Select option to fetch Instagram images.
o My User Name: You can use your own user name added under “Instagram Profile User
Name” to fetch images.
o 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.
o Caption with Hyperlink: Add multiple captions with link to redirect users when they
click captions from popup.
o 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.
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.
Instagram for Magento 2 © Meetanshi
• 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 fetc Instagram images based on the username or hashtag as
configured. You can approve or delete fetched images as per your requirement.
Instagram for Magento 2 © Meetanshi
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.
Instagram for Magento 2 © Meetanshi
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 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.
Instagram for Magento 2 © Meetanshi
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.
Instagram for Magento 2 © Meetanshi
8. Category Specific Settings As shown below, select User name or Hashtag to show Instagram images on specific category
page.
9. Product Specific Settings To show Instagram images on specific product pages, select User name or Hashtag as shown
below.
Instagram for Magento 2 © Meetanshi
10. Instagram in Frontend Once the extension is configured, you can see Instagram feed enabled on various pages. • Instagram Images on Home Page
Instagram for Magento 2 © Meetanshi
• Instagram Images on Category Page
Instagram for Magento 2 © Meetanshi
• Instagram Images on Product Page
Instagram for Magento 2 © Meetanshi
• Instagram Images on Instagram Page
You can navigate to Instagram page from top link or footer link. 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.
Instagram for Magento 2 © Meetanshi
• Caption with Hyperlink View
On hovering of Instagram image, hotspots can be seen and on 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.
Instagram for Magento 2 © Meetanshi
• Product Feed View in Popup
In this view, users can see related product blocks on hover of hotspots set on images. On click
of product blocks, users get redirected to respective products.