Instagram Feed

Instagram Feed gallery

Display your Instagram photos and videos directly in your website. This social feed uses a customizable gallery format, allowing complete control of columns, thumbnail size, number of thumbnail and more. Clicking on any thumbnail opens a Lightbox with integrated slideshow functionality.

Tutorial Video

Setup

ACQUIRING YOUR INSTAGRAM ACCESS TOKEN

  • Before you set up your Instagram Feed, you will need to acquire your Instagram access token.
  • Go to http://instagram.pixelunion.net/
  • Click on “Generate Access Token”.
  • If you have logged into Instagram previously in your browser, you will be provided with your access token immediately. You may need to log into your Instagram account if you have never logged in with your browser, or if you have multiple accounts.
  • Copy the provided access token

BASIC SETTINGS

  • Drop the widget onto your page.
  • Size the widget container as needed.
  • For a full-width gallery, use enable “Full Bleed Row” in the row settings.
  • Open the widget option panel.
  • Paste the access token.
  • Copy the first string of characters in the access token, up to the first period.
  • Paste this string of characters into the User ID field.Instagram Feed Widget Settings

THUMBNAIL SETTINGS

  • Open the Thumbnail Settings section.
  • Set the Number of Columns and Number of Thumbnails.
  • The thumbnail width is determined by the number of columns set, as well as the padding. Thumbnails will always fill the space within columns automatically.
  • Use the Thumbnail Height setting to match the thumbnail height to the automatic width. It is best to maintain a 1:1 square aspect ratio with your gallery thumbnail images – even if your Instagram images use alternate aspect ratios.
  • Thumbnail Overlay Opacity sets the opacity of the overlay seen when hovering over a gallery thumbnail.
  • (Thumbnail Overlay Color is set in the Design section)
  • Thumbnail Padding sets the space (in pixels) between gallery images.
  • Font Family sets the font used in the thumbnail overlay hover state.
  • Thumbnail Font Size applies to the text and icon size seen in the bottom row when hovering over a thumbnail image.
  • View Icon Size sets the size of the eye icon in the middle of the thumbnail overlay.

‘LOAD MORE’ BUTTON SETTINGS

  • Open the ‘Load More’ Button Settings section.
  • Set the ‘load more’ button text with the Button Text parameter.
  • Choose a font with the Button Font Family parameter.
  • Button Font Size sets the size of the text used within the button.
  • Button Width determines the width of the button, and should be used in relation to the text used within the button. More text requires larger button width settings.

LIGHTBOX SETTINGS

  • Open the Lightbox Settings section.
  • Choose a font for lightbox captions using the Caption Font Family option.
  • Caption Font Size sets the size of the lightbox caption font.
  • Pagination Font Size sets the size of the pagination numbers shown for each slide within the lightbox slideshow.
  • The next four settings offer a variety of custom control over lightbox transitions and open/close speed: Lightbox Open Transition, Transition Between Slides, Lightbox Open Transition Speed and Lightbox Close Transition Speed.
  • Overlay Opacity sets the opacity of the page overlay seen behind the lightbox.
  • The remaining group of toggles in this section provide various custom control over functionality in lightbox mode. These settings are self-explanatory.

DESIGN SECTION

  • Open the Design tab.
  • The Thumbnail Settings section allows for customization of the thumbnail overlay, font, and icon colors.
  • The Load More’ Button Settings section allows for customization of the ‘Load More’ button’s background color, background hover color, and font color.