Guides / Your Instagram posts as a feed

Instagram feed

Your Instagram posts as a feed

Connect your Instagram account once, and your posts become a feed on your website that keeps itself up to date: a grid, a mosaic, a row that scrolls, a list with the captions and more, under your profile and a button to follow you. Nothing to paste, and nothing to do when you post. See one running.

Connect your account

Instagram only shares posts from professional accounts. If yours is personal, switch it to a free Creator account in the Instagram app first: Settings, Account type and tools, Switch to professional account. It takes a minute and you can switch back. Which accounts work

  1. Make an Instagram feed widget. In your dashboard (dreamwidget.com/dashboard) press Instagram feed, pick a template or Create from scratch, and name it.
  2. Press "Connect Instagram". It is on the Content tab, under Your Instagram account. You are taken to Instagram's own page. Sign in there if you are not already. We never see your Instagram password.
  3. Approve read access. Instagram asks whether DreamWidget may read your profile and your posts. Press Allow. You land back in the editor and your posts are read at once.
  4. Choose how it looks. Pick a template on the Templates tab, or shape it yourself on the Design tab. Under Posts on the Content tab, switch off any post you would rather not show.
  5. Publish it and paste the code. Press Publish changes at the top right, copy the embed code and paste it on your page. From then on the widget looks after itself: new posts arrive on their own, and you only come back to change how it looks.

Start from a template

The Templates tab shows every Instagram feed template as a picture, grouped by use: feeds and profiles, showcases and galleries, social proof, compact strips, and shop layouts. Each comes in a dark and a light version. Click one and its look goes on your widget at once, live in the preview. A template brings its look and none of its sample posts: the posts shown are always your own. Undo at the top of the editor takes a template back.

The sample pictures in the template previews come from a made up cafe. Some templates are built for a particular kind of post, such as a customer's words in the caption; they show what your own captions say, so pick one that suits what you post.

How it looks

Arrangement, in the Layout section of the Design tab, sets the shape of the feed: an even grid, a mosaic with the newest post large, a pinboard of tilted prints, a row that scrolls sideways, a list with the captions, a fan of posts with the chosen one lifted, posts on a wide arc, or one post at a time with the rest of the feed floating beside it. Show at most, posts on the Content tab caps how many appear, up to 50.

Each post holds the shape of the pictures (square, portrait, landscape or as posted), their corners, and what happens under the pointer. The header above the feed has your picture, name, counts, bio and a Follow button; Follow button text on the Content tab sets its words.

A click on a post

A click on a post, under Each post, has two answers. Opens it on Instagram takes the visitor to that post on Instagram in a new tab. Opens it here opens the post over your page instead: the picture, or an album's pictures with arrows and dots to move between them, the account line, the caption, the number of likes, the number of comments, the date, and links to read the comments and to see the post on Instagram. Every template starts with Opens it here.

The Follow button

No website can follow an account for a visitor: following only happens on Instagram. So The Follow button, at the top of the Profile card section of the Design tab, has two answers. Opens Instagram in a new tab, where every template starts, opens your profile on Instagram straight away, where the visitor can follow you, and your page stays open behind it. Opens the profile here opens your profile card over your page, grown out of the button: your picture, name and @handle, your post and follower counts, your bio and your latest posts. A click on one of those posts opens it here too. The card's own Follow on Instagram button opens your profile on Instagram in a new tab, so your page stays open behind it. The close button, the Escape key or a click beside the card closes it.

The card shows only what Instagram gives us: a count or a bio your account does not have is left out, never made up. Every piece of the card has its own tools in the Profile card sections: the card's background, corners, width and padding, the veil behind it, the close button, the picture's size, each line of words, the Follow on Instagram button (any style from the button library), and how many of the latest posts show and how many across. The card shows open in the preview while you edit it, and a click on any part of it in the preview opens that part's tools.

The Opened post sections on the Design tab style every part of it, and the post shows open in the preview while you edit them.

The opened post shows how many comments there are, not the comments themselves. The access Instagram gives an app like ours includes the like and comment counts but not the words of the comments; showing those would need a further permission from Instagram. The link under the caption takes the visitor to read them on Instagram.

What we can see, and what we cannot

The connection is read only. We can read your profile: username, name, picture, bio, and the post and follower counts; and your posts: pictures, video covers, captions, links, dates, like and comment counts. That is all Instagram gives an app like ours, and all we ask for.

We cannot post, edit, delete, comment, message, follow, see your stories, your drafts, your direct messages, or anything about your followers. Posts you archive or delete leave the widget on the next check.

New posts arrive on their own

Every minute we check your account, and anything new goes on the front of the feed and onto your site within about two minutes. Captions, likes and comment counts on your recent posts are brought up to date at the same time, and the follower and post counts in the header every half hour. You do not need to open the editor. A post you switched off in the editor stays off.

In a hurry? Open the editor and press Refresh the posts now. The widget on your site picks the posts up straight away once it has been published.

Which accounts work

Instagram lets an app like ours read professional accounts: Business or Creator. A personal account is switched to one in the Instagram app in under a minute, free, and nothing about the account changes for your followers: Settings, Account type and tools, Switch to professional account (Instagram's own steps: help.instagram.com/502981923235522).

The connection reads the account that signed in, and only that one: Instagram does not let anyone list another account's posts.

Every two months, renewed for you

Instagram lets a connection last sixty days. We renew it quietly in the background for as long as the widget is in use, so normally you never connect again. If a widget sits unpublished for months and the connection lapses, the editor says so, and one press of Connect Instagram starts it again. The posts already on the widget stay in the meantime; only new ones wait.

Publishing and the embed code

Press Publish changes at the top right, then Copy embed code; the same code is on the Settings tab under Embed code. Paste it once where the feed should sit. New posts and every later publish reach that page on their own, with nothing to paste again. Embedding on your site covers where to paste it on WordPress, Wix, Shopify and other website builders.

The editor has two screens, Desktop and Mobile, chosen above the preview, and every setting on the Design tab is kept once for each, so a phone can have fewer posts across. See both shows the two side by side before you publish.

Disconnect

In the Your Instagram account box on the Content tab, press Disconnect. Your posts and profile header come out of every widget they are in, your published widgets included, and we delete the connection and everything we held from it. You can connect again at any time. You can also remove DreamWidget from inside Instagram: Settings, Website permissions, Apps and websites (instagram.com/accounts/manage_access); Instagram tells us, and we delete the same things. To have the data deleted without disconnecting first, see data deletion.

If something goes wrong

"Connect the account again." The connection lapsed or was removed at Instagram. Press Connect Instagram; nothing else changes.

The feed is empty. Only a professional account can be read; see which accounts work. A brand new account with no posts is read correctly and shows nothing.

A picture is missing. Instagram's own picture links expire, so we keep our own copy of each one. If a picture is still blank after a minute, the post was probably deleted or archived at Instagram.

Anything else: hello@dreamwidget.com, and tell us the widget's name.