Magento 2 Instagram

1
Instagram for Magento - User Guide
2

• Table of Content
• Extension Installation Guide
• Configuration
• Page View Settings
• Fetch Instagram Images
• Manage Instagram Images
• Caption with Hyperlink View Settings
• Product Feed View Settings
• Category Specific Settings
• Product Specific Settings
• Instagram in Frontend

3

• Extension Installation
• Extract the zip folder and upload our extension
  to root of your Magento 2 directory via FTP.
• Login to your SSH and run below commands step by
  step
• php bin/magento setupupgrade
• php bin/magento setupstatic-contentdeploy
• php bin/magento cacheflush
• Thats it.

4
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. You can get it from https//www.instagram.c
  om/developer/authentication/ following the steps
  mentioned.

5

• Method to receive the access token
• Reach out to authorization URL
• Not logged in user will be asked to log in.
• The user will be asked to grant application
  access to his Instagram data.
• The server will redirect the user in one of two
  ways
• Server-side flow (recommended) Redirect the user
  to desired URL. Take the provided code parameter
  and exchange it for an access token by posting
  the code to access token URL.
• Implicit flow Instead of handling a code,
  include the access token as a fragment () in the
  URL. Although the method being less secure, it
  allows applications without any server component
  to receive an access token.
•  
• 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.
• 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.
• Default Insta View This is the same view as
  desktop Instagram look.

6
(No Transcript)
7
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.

8
(No Transcript)
9
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.
10
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
11
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.  
12
(No Transcript)
13
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.
14
(No Transcript)
15
8. Category Specific Settings
As shown below, select User name or Hashtag to
show Instagram images on specific category page.
16
9. Product Specific Settings
To show Instagram images on specific product
pages, select User name or Hashtag as shown
below.
17
10. Instagram in FrontendOnce the extension is
configured, you can see Instagram feed enabled on
various pages.

• Instagram Images on Home Page

18

• Instagram Images on Category Page

19

• Instagram Images on Product Page

20

• Instagram Images on Instagram PageYou 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

21

• Caption with Hyperlink ViewCaption 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.

22

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

23

• Default Insta ViewThis is the same view how you
  see Instagram app on the desktop. The default
  Insta view popup displays the Follow button to
  follow user profile on Instagram. Also, you can
  see the original caption with like counts,
  comments and the navigation bar to navigate
  through all images.

If you have any question or need support, Contact
us at https//meetanshi.com/contacts/