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

Both the Instagram API Key and Instagram Feed can be installed directly from our Integrations.

Authenticating Instagram

Navigate to your newly installed API Key.

Example of the API Key settings:

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.

If also you provide an email address you will receive an email 24 hours before your key will expire. This key is valid for 60 days.

Refreshing your key

To refresh your key you simply press the orange refresh token button.
This will reset the 60-day expiry if there's a key. If there was an email provided the existing email will be overwritten, leaving the email field empty won't overwrite your email only stopping notification will remove your email.

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