> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Instagram Feed

> Show your latest Instagram posts as a scrolling strip, a grid or a photo wall, with an on-site viewer.

The Instagram Feed shows your latest Instagram posts as a wall of photo tiles. Visitors open any post in a viewer on your site, so they keep browsing instead of leaving for Instagram.

&#x20;**Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners. Connecting your Instagram account is for Admins and Owners.

![Parker's Instagram Feed as visitors see it: eyebrow "Instagram", heading "From the feed", and a scrolling strip of square photo tiles with faded ends, video tiles marked with a play button, and the pause button under the strip's right end.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-overview-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=9a92d9161532300d41e7e27f171fc5f9)

Your latest posts in a gently scrolling strip.

## When to use it

* To show that your business is active and loved, with real photos from your account.
* To bring fresh pictures to your home page without updating it yourself.
* To invite visitors to follow you, with an optional button to your profile.

## Where the posts come from

The section shows the posts in **Instagram Posts**. They arrive in 2 ways, and you can mix them:

* **From your Instagram account.** Once an Admin connects it in **Connections** → **Instagram**, new posts arrive on their own. See [Instagram](https://docs.fetchski-attract.com/guides/connections/instagram.md).
* **Added by hand.** Create a post in **Instagram Posts** with a picture, a caption and its Instagram link. See [Instagram posts](https://docs.fetchski-attract.com/guides/content/instagram-posts.md).

If there are no posts yet, the section doesn't appear on the page, even while you edit. Connect Instagram or add a post before you add the section.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Social proof** → **Instagram Feed**. It's a full-width section, so it isn't offered inside a column or a blog post.

![The Add Content menu open on the Social proof group, with the Instagram Feed tile ringed.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-add-menu-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=cf6c0caa9b5ec10bff8a4350f02d8643)

The Instagram Feed lives in the Social proof group.

## What you can change

Select the section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has 8 tabs.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Instagram Feed editor open on the Feed tab beside the live feed, with the eight tabs (Header, Feed, Caption, Lightbox, Background, Fonts, Button, CSS) ringed and the Layout list open on Carousel, Grid, Masonry and Mosaic Photo Wall.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-editor-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=6225b4db8f9377d17527aa21bd70bd13)

The Instagram Feed editor, with the feed updating beside it.

> [accordion] Header
>
> * **Eyebrow**: it starts as "Instagram".
> * **Heading**: it starts as "From the feed". Leave it empty to hide the heading. To show just the posts, clear the eyebrow and intro line too.
> * **Intro line**: an optional short sentence under the heading.
> * **Header alignment**: **Center** or **Left**.
> * Set the heading's weight and color, and the intro's weight, size and color.

> [accordion] Feed
>
> **Which posts**
>
> * **Featured posts only**: show only the posts you marked **Featured** in **Instagram Posts**, so you choose exactly which appear.
> * **Maximum posts**: 1 to 30, newest first. It starts at 8.
> * **Show**: **Photos & videos (all)**, **Photos only** or **Videos & reels only**. It changes this feed only, not which posts arrive from Instagram.
>
> **Layout**
>
> * **Layout**: **Carousel (animated strip)** scrolls on its own. **Grid (multi-row)** is a tidy grid. **Masonry** staggers tiles of different heights. **Mosaic Photo Wall** fits photos into neat rows.
> * **Columns**: **Auto (fit to width)** or 2 to 5, for the grid and masonry.
> * **Row height** and **Vary photo shapes**: for the Mosaic Photo Wall. **Vary photo shapes** gives a feed of same-shaped photos a more natural mix.
> * **Scroll speed** and **Scroll direction**: for the carousel.
> * **Gap between tiles**: **Tight**, **Normal** or **Roomy**.
>
> **Tiles**
>
> * **Tile shape**: **Square (1:1)**, **Portrait (4:5)**, **Landscape (4:3)** or **Original**. **Original** looks best with **Masonry**.
> * **Tile width**, **Corner radius** (how rounded the tile corners are) and **Hover effect**. The hover starts as **Lift — rises, shadow deepens**.
> * **Show video / reel badge**: marks videos, reels and albums.
> * **Show Instagram glyph**: a small Instagram icon on each tile. It is the only link on the tile that opens the post on Instagram, in a new tab. The viewer's **View on Instagram** link and the profile button on the **Button** tab are set separately.
> * **Show like count on tiles**: a heart and the like count in a corner of each tile. Off by default.
> * **Glyph & badge size**: **Small**, **Medium** or **Large**.
> * **Show captions** and **Caption placement**: show each caption **Below the image** or as an **Overlay on hover**. Off by default.
> * **Glyph / hover accent** and **Like-heart color**: optional colors for the Instagram icon, the colored tint that covers a tile when a visitor points at it, and the heart.

> [accordion] Caption
>
> Only used when **Show captions** is on.
>
> * **Caption length**: **Full text (no limit)**, or cut off after 1 to 4 lines. It starts at 2 lines. Visitors read the full caption by opening the post in the viewer.
> * **Caption size**, **Caption weight** and **Caption color**.

> [accordion] Lightbox
>
> What the post viewer shows beside the picture.
>
> * **Show like count**: the post's likes. On by default.
> * **Comments in the lightbox**: **Hidden**, **Count only** or **Full list**. It starts at **Count only**.
> * **Show comment authors**: shows each commenter's Instagram name in the **Full list**. Turn it off for an anonymous list.
> * **Show “View on Instagram” link**: a link to the post on Instagram. Turn it off to keep visitors on your site.
>
> **Full list** shows comment text only if an Admin turns on **Fetch post comments** in **Connections** → **Instagram**. Turning that off later stops new comments, but comments already on your site stay. To stop showing them, choose **Count only** or **Hidden** here.

> [accordion] Button
>
> An optional button under the feed, such as "Follow us on Instagram", linking to your profile. It shows only once it has both a label and a link, and it opens in a new tab. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

Colors in these tabs can be set separately for light and dark. Leave a color empty to use your site's colors from **Site design**.

## What visitors see

* **A viewer on your site.** Clicking a tile opens the post in a viewer over the page, with its caption, date, likes and comments. Visitors move between posts with the arrows or the arrow keys, and close it with Esc.
* **Videos.** In the viewer, videos play with sound. In the grid, masonry and photo wall, videos also play silently in their tiles. The carousel shows a play symbol instead.
* **Cookie consent first.** Some photos may load from Instagram's own servers. Where your cookie settings ask visitors first, those tiles wait, and the section shows one notice with a **Load this content** button. See [Cookie consent](https://docs.fetchski-attract.com/guides/site-settings/cookie-consent.md).

![The on-site viewer open over the page: a puppy photo on the left with a 1 / 8 counter, and on the right the Instagram name and date, the caption, the comments area and a View on Instagram link, with previous and next arrows at the sides.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-lightbox-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=29e3e31b9748553798ca9c8bfa95bee4)

Posts open in a viewer on your site, with likes and comments.

## Looks you can make

![A 4-column grid of square tiles with captions below each image, the header aligned left, and a "Follow us on Instagram" button under the grid.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-grid-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=79f6a13946d7708b7215cf507a4b5f7c)

A tidy grid with captions and a follow button.

**A captioned grid.** Set **Layout** to **Grid (multi-row)** with 4 **Columns**, turn on **Show captions**, and add a follow button on the **Button** tab.

![A Mosaic Photo Wall of 12 photos in neat rows of mixed shapes, with no header.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-mosaic-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=7db6375d88ee9889088500d05f79f19f)

A photo wall with no header.

**A photo wall.** Set **Layout** to **Mosaic Photo Wall**, turn on **Vary photo shapes**, and clear the heading and eyebrow.

![A Masonry feed of reels only, tiles in their original shapes, the videos playing silently, with the like count on each tile.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/instagram-feed/guides-sections-instagram-feed-reels-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=91bda47b15f85b974ae16449170b9498)

Reels only, in a masonry layout.

**A reels showcase.** Set **Show** to **Videos & reels only**, **Layout** to **Masonry** and **Tile shape** to **Original**.

## Good to know

* **The carousel needs animations on.** If animations are turned off for the whole site in [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md), the carousel shows as a grid instead. The **Tilt**, **Magnetic** and **Spotlight** hover effects need animations too.
* **Moving content can be paused.** The carousel and videos playing in tiles each get a pause button. Visitors who prefer less motion see them still.
* **Comments are other people's words.** If you show the **Full list**, review the comments in **Instagram Posts**. When you hide a comment on Instagram, it leaves your site at the next update from Instagram, not straight away. To stop showing comments at once, choose **Count only** or **Hidden** under **Comments in the lightbox**.
* **Likes and comments are only as fresh as the last update** from Instagram. A post whose account hides like counts shows none.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Instagram](https://docs.fetchski-attract.com/guides/connections/instagram.md)
>
> connect your account so posts arrive on their own.

> [card] [Manage Instagram posts](https://docs.fetchski-attract.com/guides/content/instagram-posts.md)
>
> feature, add or review posts.

> [card] [Gallery](https://docs.fetchski-attract.com/guides/sections/gallery.md)
>
> show your own photo albums.

> [card] [Testimonials](https://docs.fetchski-attract.com/guides/sections/testimonials.md)
>
> more social proof for your page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.