1 / 15

Magento 2 Instagram

Magento 2 Instagram extension integrates Instagram with Magento 2. Display Instagram images on any CMS page.

Meetanshi
Download Presentation

Magento 2 Instagram

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 1.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: ophp bin/magento setup:upgrade ophp bin/magento setup:static-content:deploy ophp bin/magento cache:flush •That’s it. 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.com/developer/authentication/ following the steps mentioned. → 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 codeparameter 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. oMy User Name: You can use your own user name added under“Instagram Profile User Name” to fetch images. oHashtags: Enter comma separated hashtags to fetch Instagram images. •Instagram Image Popup View: Select Instagram popup view to show in frontend. oCaption with Hyperlink: Add multiple captions with link to redirect users when they click captions from popup. oProduct Feed: Add multiple product SKUs to fit with the products in image. On click of product feeds, users will be redirected to linked products. oDefault Insta View: This is the same view as desktop Instagram look. Instagram for Magento 2 © Meetanshi.com

  3. 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. Instagram for Magento 2 © Meetanshi.com

  4. Instagram for Magento 2 © Meetanshi.com

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

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

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

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

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

  10. •Instagram Images on Category Page Instagram for Magento 2 © Meetanshi.com

  11. •Instagram Images on Product Page Instagram for Magento 2 © Meetanshi.com

  12. •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. •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. Instagram for Magento 2 © Meetanshi.com

  13. •Product Feed View in Popup In 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. Instagram for Magento 2 © Meetanshi.com

  14. •Default Insta View This 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/ Instagram for Magento 2 © Meetanshi.com

More Related