How to add an Instagram feed to your website

Make use of live images on your website by connecting your Instagram account with your Sitemanager project.

Installing the Integrations

The Instagram Feed can be installed directly from our Integrations, this will install automatically install the required API Key.

Authenticating Instagram

Navigate to your newly installed API Key called Instagram API from the navigation.

Example of the API Key settings:

image_2021_01_20T15_54_37_980Z

The first step is to authenticate with your Instagram account.
Click the blue button, this will redirect you to Instagram login portal.

After providing access to Sitemanager you will be redirected, here you will find the API Key.  Copy this API Key and paste it in first field of the API Key settings (Value API Key/Token, see image above). Don’t forget to press save after entering your key.

A 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 an error occurs while refreshing the key. 

image_2020_10_19T06_26_35_998Z

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.

Adding the Instagram Feed in the CMS

After installing the Instagram Feed from our Integrations you will find a new component when adding a new component to your site called Instagram Feed.

Customization

After placing the component you can decide to leave the component as is or tweak it with our design panels and functionality panel.

By default, our component will render 6 (or less if not available) of your latest images from the connected Instagram account. (see image below)

The functionality panel comes with the following options (see image below);

  • Show caption: disable/enable the caption, default this is enabled and will be visible upon hover. However, style this as you like.
  • Amount: the amount of pictures to show and render on every click of the load more button (if enabled). The default is 6 pictures.
  • Enable load more: Enabling this will show a button to render more images from your Instagram live feed. This is default disabled.

instagram-functionality