How to add an Instagram feed to your website

Make use of live images on your website by connecting your Instagram account to your SiteManager project.

In this article

Step 1: Install the Instagram feed upgrade

Step 2: Add the Instagram Feed in the CMS

Step 3: Customize

 

Step 1: Install the Instagram feed upgrade

  • Log in to the web project to which you want to add your Instagram feed.

  • Navigate to Project > Upgrade Project.

    • Select Integrations.

      integrations
 
  • Find the Instagram feed block, and click Add to site.

 

Step 2: Authenticating Instagram

  • Navigate to Project > Tokens & API Keys.
    tokens and api
  • Click the blue Authenticate with Instagram button to redirect to Instagram's login portal.
    auth
  •  After providing access, copy your Instagram API Key. image_2020_10_19T06_26_35_998Z
  • Paste your Instagram API Key in the Value API Key/Token field and hit Save.

Note:

An Instagram API Key is valid for 60 days, but SiteManager will automatically fetch a new key. If also you provide an email address, you will receive an email when any errors occur while refreshing the key. 

Stopping notifications

By clicking the red button, your email will be removed from our database, which will cancel any future reminders. You can always provide a new email when refreshing the key or by re-authenticating if the key was expired.

Step 2: Add the Instagram Feed in the CMS

  • After adding the IG feed integration, find the newly added component element Instagram Feed.
    ig feed

 

Step 3: Customize

After creating your Instagram Feed component, you can decide to leave the component as is, or tweak it with our design panels and functionality panel.

feed

  • Click the gear wheel in the top-left corner of the IG Feed component from the design view to access the functionality panel.instagram-functionality
  • Select the options that apply for you:
    • Show caption: enabled by default and visible upon hover. However, style this as you like.
    • Amount:  render 6 (or less, if not available) of your latest images from the connected Instagram account by default on every click of the load more button (if enabled).
    • Enable load more: show a button to render more images from your Instagram live feed. This is disabled by default.