BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

Instagram templates

You can now integrate your Instagram into Builder! Explore this doc to learn how to integrate your instagram account, use our instagram templates, and how to create your own.

Integrating your Instagram account

To integrate your instagram account, navigate to the organizations setting and select “integrations”, and select “connect”. This will prompt you to allow Builder to access your posts, and then it will direct you back to Builder and confirm you integrated correctly.

Builder Instagram templates

Builder has four instagram templates. You can drag and drop any of these templates onto your page and connect to your instagram:

  • Grid template
  • Grid with modal template
  • Scroll template
  • Carousel template

Adding templates to your pages

To add a template to your page, navigate to the “insert” tab and select “Builder blocks”. You can scroll through the list of templates or search for the template you would like to use. You can choose from the grid, grid with modal, scroll, or carousel instagram templates. Once you have located the template you would like to use, just drag and drop it onto your page. The data should automatically be applied to the template and your instagram posts should appear. You can now style the template to fit your page.

Creating your own template

Setup

To start, drag and drop a box into the editor. Then drag and drop a box into this box, and drag and drop an image (for your instagram images) and text (for your caption) into the inner box.

Dynamic Data

Now, navigate to the data tab. Click the "content CSS/JS" button at the bottom of the tab. In the JavaScript section, paste this code:

  fetch(`https://cdn.builder.io/api/v1/instagram/media?apiKey=${context.apiKey}`)
  .then((res) => res.json())
  .then((data) => {
    state.instagram = data.data;
  })

While still in the data tab, select the inner box containing the image and text and select "instagram" in the repeat for each dropdown menu. This will create a box for each instagram post. Now, select the image. While in the data tab, select "new binding" and choose "image" from "Instagram Item - Media Url". Repeat this step for the text, but select get "text" from "Instagram Item - Caption". Now, your images and captions from instagram will appear! You can now customize and style your instagram template.