Widgets

Instagram Feed

Estimated reading: 9 minutes 636 views

The Instagram Feed is a dynamic widget that allows you to seamlessly integrate your Instagram photos, videos, and albums directly onto your website. With this widget, you can effortlessly showcase your captivating visual content to your visitors.

One of its standout features is the requirement of a unique token to identify individual Instagram IDs, ensuring a secure and personalized experience. It provides a variety of layout options, allowing you to choose the perfect presentation style for your feed.

Additionally, you have the ability to display customizable caption for each post, adding depth and context to your content.

The Instagram Feed widget features the following controls:

Content

Profile

  • Refresh Cache: Click the option to refresh the generated cache.
  • Token: Enter the Instagram access token. Learn more: “Generate an Instagram access token.
  • Post Count: Specify the desired number of posts you would like to be displayed.
  • Image: Enable the option to display posts that include images.
  • Video: Enable the option to display posts that include videos.
  • Album: Enable the option to show posts that include albums.
  • Profile Link: Enable the option to show your profile link.
  • Cache Timeout: Specify the time when you want to cache timeout.
Instagram Feed: Profile Content Settings
Instagram Feed: Profile Content Settings

Layout

  • Layout: Select the layout from options available.
    • Grid/Masonry
      • Columns: Specify the number of columns in each row.
      • Column Gap: Specify the gap between columns.
      • Row Gap: Specify the gap between rows.
  • Enable Image Ratio: Enable the option if needed.
    • Image Ratio: Enter the value for ratio.
  • Show Caption:
    • Caption Size: Specify the size for caption.
    • Caption Style: Select from Below, On Hover, or Always.
    • Caption Overlay Full: Enable the option to show caption as overlay.
  • Enable Link: Enable the option if needed.
    • Lightbox: Activate the option If you would like to enable the lightbox feature.
  • Post Icon: Activate the option to display the post icon.
Instagram Feed: Layout Settings
Instagram Feed: Layout Settings

Profile Link

Note: This option is applicable if the Profile Link option is enabled under Profile section.

  • Position: Select either below or above.
  • Text: Enter the text for profile link.
  • Link: Specify the URL to link with profile.
  • Icon: Select the icon.
  • Icon Position: Choose either before or after.
  • Alignment: Select the alignment of icon.
Instagram Feed: Profile Link Settings
Instagram Feed: Profile Link Settings

Flex

Note: This option is applicable if Layout is selected as Flex.

Items

  • Direction: Select the flex direction for post.
  • Justify Content: Specify the justify content property.
  • Align Items: Specify the align items property.
  • Gap: Specify the gap between the posts.
  • Wrap: Select either wrap or No wrap.
Instagram Feed: Flex Layout Settings
Instagram Feed: Flex Layout Settings

Carousel

Note: This option is applicable if Layout is selected as Carousel.

  • Loop: Enable the option to display posts in loop.
  • Effects: Select the effect from the given options.
  • Multirow: Activate the option to display multiple rows (applicable when Loop is disabled).
  • Slide Per View: Specify the number of slides to display per view.
  • Slide Per Group: Specify the number of slides to display per group.
Instagram Feed: Carousel Layout Settings
Instagram Feed: Carousel Layout Settings

Setting

  • Speed: Set the speed.
  • Autoplay: Enable the option to play the carousel automatically.
    • Duration: Set the duration.
  • Space Between Slides: Specify the space between slides.
  • Auto Height: Enable the option if needed.
  • Pause On Hover: Activate the option to pause slides on hover.
Instagram Feed: Carousel Settings
Instagram Feed: Carousel Settings

Pagination

  • Pagination Type: Select the type of pagination from bullets, Progress Bar, and Fraction.
  • Clickable: Enable the option to make pagination clickable(applicable for Bullets Pagination type).
  • Keyboard Control: Activate the option to enable keyboard control on pagination.
  • Scroll Bar: Enable the option to display scroll bar.
Instagram Feed: Pagination Settings
Instagram Feed: Pagination Settings

Prev/Next Navigation

  • Enable: Enable the option if needed.
    • Position: Select either inside or outside.
    • Icon Prev: Select the icon for previous navigation.
    • Icon Next: Select the icon for Next navigation.
    • Horizontal Position: Select the horizontal position of navigation(applicable if navigation position is selected as inside).
    • Vertical Position: Select the horizontal position of navigation(applicable if navigation position is selected as inside).
Instagram Feed: Prev/Next Navigation Settings
Instagram Feed: Prev/Next Navigation Settings

LightBox

Note: This option is applicable if Lightbox is enabled in Layout Section.

Slide Show

  • Loop: Enable the option to display posts in loop upon the lightbox.
  • Speed: Set the speed.
  • Slide Delay: Specify the value to delay the slide.
  • Arrows: Enable the option to display arrows.
  • Full Screen: Activate the option to display lightbox in fullscreen.
  • Zoom: Enable the option to show lighbox in zoom mode upon page load.
  • Counter: Enable the option to display counter.
  • Download: Activate the option to enable download.
  • Media Overlap: Activate the option to enable the overlap.
  • Close On Tap: Enable the option to close the gallery while tap on black area.
  • Hide Bar Delay: Set the hide delay duration.
Instagram Feed: LightBox Settings
Instagram Feed: LightBox Settings

Video

  • Autoplay: Enable the option to autoplay the video on slide change.
Instagram Feed: LightBox Video Settings
Instagram Feed: LightBox Video Settings

Navigation

  • Enable Drag: Activate the option to enable dragging.
  • Enable Swipe: Activate the option to enable swipe(only for screen touch devices).
  • Keyboard: Activate the option to enable keyboard control.
  • Mouse Wheel: Activate the option to enable mouse wheel feature.
  • Esc: Enable the option to close the lightbox gallery by pressing Esc key.
  • Next HTML: Enter the HTML for navigation next icon.
  • Previous HTML: Enter the HTML for navigation previous icon.
Instagram Feed: LightBox Navigation Settings
Instagram Feed: LightBox Navigation Settings

Rotate

  • Speed: Set the speed of rotation.
  • Rotate Left: Activate the option to displayed in Lightbox.
  • Rotate Right: Activate the option to displayed in Lightbox.
  • Flip Horizontal: Activate the option to displayed in Lightbox.
  • Flip Vertical: Activate the option to displayed in Lightbox.
Instagram Feed: LightBox Rotate Settings
Instagram Feed: LightBox Rotate Settings

Thumbnail

  • Alignment: Select the alignment of thumbnail.
  • Toggle Thumb: Enable the option if needed(not applicable if Media Overlap is false).
  • Width: Set the width of thumbnail.
  • Height: Set the height of thumbnail.
  • Margin: Set the margin.
Instagram Feed: LightBox Thumbnail Settings
Instagram Feed: LightBox Thumbnail Settings

Hash URL

Note: Custom Slider Name will work as url if Hash Url plugin is installed.

  • Custom Slider Name: Enable the option to give unique name.
    • Gallery ID: Enter the unique id.
Instagram Feed: LightBox Hash URL Settings
Instagram Feed: LightBox Hash URL Settings

Share

  • Facebook
    • Facebook Text: Enter the text for facebook share option.
  • Twitter
    • Twitter Text: Enter the text for Twitter share option.
  • Pinterest
    • Pinterest Text: Enter the text for Pinterest share option.
Instagram Feed: LightBox Sharing Settings
Instagram Feed: LightBox Sharing Settings

Style

Profile Link

Note: This option is applicable if the Profile Link option is enabled under Profile section.

  • Typography: Set the typography.
    • Normal
    • Text Color: Select the text color of profile text.
    • Background Color: Select the background color of profile link.
    • Border Type: Select the border type.
      • Width: Enter the width of border.
      • Color: Enter the color of border.
    • Border Radius: Set the border radius.
Instagram Feed: Profile Link Style Settings(Normal)
Instagram Feed: Profile Link Style Settings

Hover

Styling for hover state are available under this section. It will be applied when someone hovers the profile link button.

Instagram Feed: Profile Link Style Settings(Hover)
Instagram Feed: Profile Link Style Settings(Hover)
  • Padding: Set the padding.
  • Margin: Set the margin.

Icon

  • Spacing: Set the spacing between icon and text.
Instagram Feed: Profile Link Icon Style Settings
Instagram Feed: Profile Link Icon Style Settings

Images

  • Normal
    • Background Type: Select either classic or gradient.
    • GrayScale: Enable the option to display images in grayscale mode.
    • Border Type: Select the border type.
      • Width: Enter the width of border.
      • Color: Enter the color of border.
Instagram Feed: Images Style Settings(Normal)
Instagram Feed: Images Style Settings(Normal)

Hover

Styling for hover state are available under this section. It will be applied when someone hovers the image.

Instagram Feed: Images Style Settings(Hover)
Instagram Feed: Images Style Settings(Hover)
  • Border Radius: Set the border radius properties.
  • Box Shadow: Set the box shadow properties.
  • Padding: Set the padding.
  • Icon Color: Select the color for post icon(applicable if Post icon option is enabled).
Instagram Feed: Images Style Settings
Instagram Feed: Images Style Settings

Caption

Note: This option is applicable if Show Caption option is enabled in Layout Section.

  • Background Type: Select either classic or gradient.
  • Typography: Set the typography.
  • Color: Select the color of caption.
  • Horizontal Align: Select the horizontal alignment.
  • Padding: Set the padding.

Overlay

  • Entrance Animation: Select the animation from available options.
    • Animation Duration: Select the duration of animation.
Instagram Feed: Caption Style Settings
Instagram Feed: Caption Style Settings

Carousel

Note: This option is applicable if Layout is selected as Carousel.

Prev/Next Navigation

  • Normal
    • Color: Select the color of navigation.
    • Background Color: Select the background color of navigation.
    • Border Type: Select the border type.
    • Border Radius: Set the border radius.
Instagram Feed: Carousel Prev/Next Navigation Style Settings(Normal)
Instagram Feed: Carousel Prev/Next Navigation Style Settings(Normal)

Hover

Styling for hover state are available under this section. It will be applied when someone hovers the navigation.

Instagram Feed: Carousel Prev/Next Navigation Style Settings(Hover)
Instagram Feed: Carousel Prev/Next Navigation Style Settings(Hover)
  • Arrow Size: Set the size of arrow.
  • Arrow Gap: Set the gap between navigation icon and post.
  • Padding: Set the padding.
Instagram Feed: Carousel Prev/Next Navigation Style Settings
Instagram Feed: Carousel Prev/Next Navigation Style Settings

Scrollbar

Note: Only applicable when enabling Scroll bar Type in Slider Options section.

  • Scrollbar Size: Set the size of scrollbar.
  • Scrollbar Drag Color: Select the color for scrollbar drag.
  • Scrollbar Color: Select the scrollbar color.
Instagram Feed: Carousel Scrollbar Style Settings
Instagram Feed: Carousel Scrollbar Style Settings

Note: Only applicable when selecting Pagination Type in Carousel section. Section name and features vary based on the selected Pagination Type.

Fraction

  • Background Color: Select the background color of pagination.
  • Color: Select the color of pagination.
  • Typography: Set the typography.
  • Padding: Set the padding.
Instagram Feed: Carousel Pagination Style Settings(Fraction)
Instagram Feed: Carousel Pagination Style Settings(Fraction)

Dots

  • Dot Size: Set the bullet dot size.
  • Top Offset: Set the offset from the Top.
  • Active Dot Color: Select the color for active state.
  • Inactive Dot Color: Select the color for inactive state.
  • Margin: Set the margin.
Instagram Feed: Carousel Pagination Style Settings(Dots)
Instagram Feed: Carousel Pagination Style Settings(Dots)

Progress Bar

  • Progress Bar Color: Select the color of progress bar.
  • Progress Color: Select the color of progress.
  • Progress Bar Size: Enter the size of progress bar.
  • Margin: Set the margin.
Instagram Feed: Carousel Pagination Style Settings(Progress Bar)
Instagram Feed: Carousel Pagination Style Settings(Progress Bar)

Check out the Demo page of Instagram Feed.

Share this Doc

Instagram Feed

Or copy link

CONTENTS