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

# Instagram

> Connect Instagram to your Rocket.new app - display social feeds, media grids, and social proof sections.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

<Info>
  Connect Instagram to Rocket and describe the social feed layout you want in chat. Rocket generates the media grid, profile sections, and auto-refreshing content automatically  -  no manual API integration needed.
</Info>

<Note>
  Instagram connects via OAuth. You authorize Rocket through Instagram's login flow  -  no API key needed.

  Instagram pairs well with Google Analytics (for tracking engagement), Supabase (for caching media data), and Netlify (for fast CDN delivery).
</Note>

## What you can use it for

<CardGroup cols={2}>
  <Card title="Social proof feed" icon="star">
    Show your latest Instagram posts on any page to build trust and credibility with visitors.
  </Card>

  <Card title="Feed gallery" icon="images">
    Display your latest posts in a visual grid with lightbox viewing, captions, and engagement data.
  </Card>

  <Card title="User-generated content" icon="users">
    Showcase customer photos and community posts by pulling in tagged or hashtagged content.
  </Card>

  <Card title="Media wall" icon="grid-2">
    Display curated Instagram content for events, campaigns, or brand partnerships on a full-screen dynamic media wall.
  </Card>
</CardGroup>

## Quick start

<Steps>
  <Step title="Have your Instagram account ready">
    Log in to [Instagram](https://instagram.com) with the account you want to connect. A Business or Creator account is recommended for full feature access.
  </Step>

  <Step title="Connect in chat">
    Open any Rocket project and type:

    ```plaintext wrap theme={null}
    Add an Instagram feed section to my landing page that displays my latest 6 posts in a 3-column grid with captions and like counts.
    ```

    Rocket prompts you to authorize Instagram, then generates the component automatically.
  </Step>
</Steps>

<Divider />

## Detailed setup

### Connect Instagram to Rocket

<Tabs>
  <Tab title="Web Browser">
    There are two ways to connect Instagram:

    **Method 1: Use Rocket chat (fastest)**

    In any project, open the chat panel and describe the social feed you want:

    * `Display my latest 6 Instagram posts in a 3-column grid on the homepage.`
    * `Add an Instagram profile card in the sidebar with my bio and follower count.`

    Rocket prompts you to authorize and then builds the component.

    **Method 2: From Connectors**

    In the preview toolbar, click the **`...`** button and select **Connectors**. Click the **Instagram** card.

    <Note>
      When you connect Instagram from Connectors, Rocket does not automatically add a feed. After authorizing, describe the feed layout you want in chat.
    </Note>

    Click **Connect**, log in to your Instagram account if prompted, then click **Allow**. A green dot appears next to Instagram when the connection is active.

    **Disconnect**

    Click the **Instagram** integration again and click **Disconnect** to remove the connection.
  </Tab>

  <Tab title="Mobile App">
    There are two ways to connect Instagram:

    **Method 1: Use Rocket chat (fastest)**

    In any project, open the chat panel and describe the social feed you want:

    * `Display my latest 6 Instagram posts in a 3-column grid on the homepage.`
    * `Add an Instagram profile card in the sidebar with my bio and follower count.`

    Rocket prompts you to authorize and then builds the component.

    **Method 2: From project settings**

    Tap the **More** button in the header, then tap **Integrations**. Tap the **Instagram** card.

    <Note>
      When you connect Instagram from project settings, Rocket does not automatically add a feed. After authorizing, describe the feed layout you want in chat.
    </Note>

    Tap **Connect**, log in to Instagram if prompted, then tap **Allow**. A green dot appears next to Instagram when the connection is active.

    **Disconnect**

    Go back to the Instagram section in your project settings. Tap **Disconnect** to remove the connection.
  </Tab>
</Tabs>

## Prompt cookbook

| Use case             | Prompt                                                                                       |
| -------------------- | -------------------------------------------------------------------------------------------- |
| Homepage feed        | `Display my latest 6 Instagram posts in a 3-column grid on the homepage.`                    |
| Masonry feed grid    | `Display my Instagram posts in a masonry grid layout with lightbox viewing.`                 |
| Social proof section | `Add an Instagram feed section below testimonials on my landing page.`                       |
| Media carousel       | `Create a horizontal scrolling carousel of my latest 10 Instagram posts.`                    |
| Profile card         | `Add an Instagram profile card in the sidebar showing my avatar, bio, and follower count.`   |
| Story highlights     | `Display my Instagram story highlights as circular thumbnails at the top of my /about page.` |
| Media wall           | `Build a full-screen auto-scrolling media wall with my latest 20 Instagram posts.`           |
| Footer widget        | `Add a compact Instagram feed widget (4 posts, 2x2 grid) in the site footer.`                |
| Campaign gallery     | `Create a gallery page that shows Instagram posts with the hashtag #MyLaunch.`               |
| Link in bio page     | `Build a link-in-bio page that displays my Instagram avatar, bio, and a list of links.`      |

## Tips and limitations

* **Business or Creator account recommended.** Some features like hashtag search and insights require a Business or Creator Instagram account connected to a Facebook Page.
* **Media types supported.** Rocket can display photos, videos, carousels, and reels from your Instagram feed.
* **Rate limits apply.** Instagram's API has rate limits. For high-traffic sites, consider caching media data in Supabase to avoid hitting limits.
* **Content refreshes periodically.** Instagram feeds refresh automatically, but there may be a short delay between posting and content appearing in your app.

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Google Analytics" icon="chart-line" href="./google-analytics">
    Track how visitors interact with your Instagram feed sections.
  </Card>

  <Card title="Supabase" icon="database" href="./supabase">
    Cache Instagram media data for faster loading and offline access.
  </Card>

  <Card title="Netlify" icon="globe" href="./netlify">
    Deploy your social-powered pages with fast CDN delivery.
  </Card>

  <Card title="Typeform" icon="pen-to-square" href="./typeform">
    Collect leads from visitors who engage with your Instagram content.
  </Card>
</CardGroup>