> For the complete documentation index, see [llms.txt](https://docs.feedspring.com/introduction/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feedspring.com/introduction/feeds/instagram.md).

# Instagram

## Instagram

Use FeedSpring to display Instagram content on your site, posts, captions, engagement data, and profile information, available as structured data across every delivery method.

Feed ID prefix: `inst_...`

### Render Instagram with

* [Attributes](https://claude.ai/delivery-methods/attributes), add Instagram to any HTML page
* [React](https://claude.ai/delivery-methods/react), drop a component into your React app
* [Framer](https://claude.ai/delivery-methods/framer), use the Instagram component in Framer
* [API](https://claude.ai/delivery-methods/api), fetch Instagram data directly

### Post fields

| Attribute                    | JSON key       | Type      | Description                                                                                                            |
| ---------------------------- | -------------- | --------- | ---------------------------------------------------------------------------------------------------------------------- |
| `feed-field="img"`           | `mediaUrl`     | image URL | The post media (image or video). Sets the `src` of an `<img>`.                                                         |
| `feed-field="bg"`            | `mediaUrl`     | image URL | Same media URL, but applied as `background-image: url(...)` on any element.                                            |
| `feed-field="link"`          | `permalink`    | URL       | Link to the post on Instagram. Sets the `href` of an `<a>`.                                                            |
| `feed-field="caption"`       | `caption`      | string    | Post caption. Written with `innerHTML`, so HTML in the caption is rendered.                                            |
| `feed-field="like-count"`    | `likeCount`    | number    | Number of likes, formatted with compact locale notation (e.g. `1.2K`).                                                 |
| `feed-field="comment-count"` | `commentCount` | number    | Number of comments, formatted with compact locale notation.                                                            |
| `feed-field="timestamp"`     | `timestamp`    | date-time | When the post was published. See [timestamp formatting](https://claude.ai/delivery-methods/attributes#feed-timestamp). |

### Profile fields

| Attribute                      | JSON key         | Type      | Description                                                      |
| ------------------------------ | ---------------- | --------- | ---------------------------------------------------------------- |
| `feed-field="avatar"`          | `avatar`         | image URL | Profile avatar image.                                            |
| `feed-field="name"`            | `fullName`       | string    | Profile display name.                                            |
| `feed-field="username"`        | `username`       | string    | Profile username (the @-handle).                                 |
| `feed-field="bio"`             | `bio`            | string    | Profile bio text.                                                |
| `feed-field="follower-count"`  | `followersCount` | number    | Total followers, formatted with compact locale notation.         |
| `feed-field="following-count"` | `followingCount` | number    | Total accounts followed, formatted with compact locale notation. |

{% hint style="info" %}
Profile fields like `avatar`, `name`, and `username` can also be placed *inside* a post template — for example, to show the account avatar and handle on every card. They resolve to the same account-level value on every post; they are not per-post data.
{% endhint %}

### Instagram-specific notes

A few things worth knowing when building an Instagram feed:

* **Image aspect ratios vary.** Instagram posts can be 1:1, 4:5 portrait, or 1.91:1 landscape. Your layouts should either crop to a fixed ratio (grid-safe) or allow posts to flow at their native dimensions (masonry-safe).
* **Media renders automatically.** Image posts render as images, video posts render as video. No configuration needed.
* **Captions use `innerHTML`.** HTML in captions is rendered, not escaped. Instagram captions rarely contain HTML in practice, but it's worth knowing if you are sanitising user content.
* **`timestamp` may be empty.** In some responses the `timestamp` field is an empty string. Your layout should handle this case, either by using `feed-timestamp="from-now"` (which handles empty values gracefully) or by wrapping the element in a container that gracefully collapses.

### Example

A basic Instagram grid using the attributes delivery method:

```html
<section feedspring="inst_YOUR-FEED-ID" feed-options="render:dynamic|limit:8">
  <div class="grid">
    <article feedspring="post">
      <img feed-field="img" alt="" />
      <div class="meta">
        <span feed-field="like-count"></span> likes
        <time feed-field="timestamp" feed-timestamp="from-now"></time>
      </div>
      <a feed-field="link" target="_blank" rel="noopener">View on Instagram</a>
    </article>
  </div>
</section>
```

### Typical use cases

* Homepage image grids for brands and creators
* Social proof sections on landing pages
* Product or campaign showcases
* Event highlight feeds

### Next steps

* [Pick a delivery method](https://claude.ai/delivery-methods) to render Instagram
* [Filtering & Limits](https://claude.ai/core-concepts/filtering-and-limits) for limit, skip, and dashboard filters
* [Browse other feed sources](https://claude.ai/feeds)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feedspring.com/introduction/feeds/instagram.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.