TABLE OF CONTENTS

Overview

Mageplaza Instagram Feeds for Magento 2 allows you to show your Instagram posts on your site.


Features

  • Choose how many posts are shown on the website
  • Layout your images in different ways using the Single Row, Multiple Rows, and Optimized Image options
  • Show the caption of your Instagram posts
  • Let customers see the entire Instagram post without leaving your site


Setup

Step 1) Creating Your Instagram API Key

The first step is getting an Instagram API key. This key allows your website to connect with Instagram and retrieve your Instagram images to show on the site.


Step-by-step Guide

  1. Make your Instagram account a business account.
  2. Create a Facebook account.
    • If you already have a Facebook account, proceed to step 3.
  3. Make your Facebook account into a developers account.
    • Your login will be the same as the Facebook account's from step 2.
  4. Link your Facebook developer account to your Instagram business account.
    1. Open Instagram.
    2. Go to your profile page.
    3. Click the menu button in the top right.
    4. Navigate to Settings > Account > Linked Accounts > Facebook.
    5. Login with your Facebook developer account.
  5. Get the API Key.
    1. Login to the Facebook Developer portal.
    2. Go to My Apps.
    3. You can follow the following video tutorial to retrieve your API key:  https://www.youtube.com/watch?v=rWUcb8jXgVA&feature=youtu.be 
      1. The "tester account" is the Instagram account that has the images you want to pull from.
    4. Save the API key to your computer in Notepad or a similar program.

Step 2) Add the Key to the Website

The next step is adding the key to the website's settings. This allows the website to use the key when displaying the Instagram posts.


Step-by-step Guide

  1. In the website admin panel, navigate to Stores > Configuration.
  2. On the left hand side, open the Mageplaza Extensions section and click Instagram Feed.
  3. After the page refreshes, open the General section and change the following settings:
    1. Set Enable to Yes.
    2. Next to User Token, enter your API key.
  4. Press Save Config in the upper right hand corner.
  5. Refresh the cache.


Step 3) Add the Feed

  1. In the Magento admin panel, navigate to Content > Elements > Widgets
  2. Click Add New Widget in the upper right hand corner.
  3. After the page refreshes, change Type to Mageplaza Instagram Feed and Design Theme to Smartwave Porto CPC.
  4. Click Continue.
  5. In the next panel, enter an appropriate name for Widget Title such as Instagram Feed and set Assign to Store Views to All Store Views.
    • If you are a multisite store, select the appropriate store view.
  6. Scroll down to where you see Layout Updates.
    1. Layout Updates
      1. The following settings will add the Instagram feed to the bottom of the homepage just before the footer. If you need the feed on other pages, feel free to test different settings until you achieve the desired effect.
        1. Settings
          1. Display On: Specified Page
          2. Page: CMS Home Page
          3. Container: Before Page Footer
  7. Press Save in the upper right hand corner.
  8. Refresh the cache.


The Instagram feed should now show on the page specified. If you do not like the location of the Instagram feed, feel free to  edit the widget you created in the Display section.


Troubleshooting

Why are the Instagram images not showing up in the feed?

  1. One reason may be due to the Instagram API Key expiring.
    1. The key expires after six (6) months or whenever your Instagram password changes.
    2. You can create a new key before then by following this video guide: https://youtu.be/rWUcb8jXgVA?t=145