Adding Instagram feeds to client websites: a workflow for web designers and agencies

The workflow at a glance

Most client feed projects follow the same five phases. The table shows who does what, so you can paste it into a proposal or a project plan.

Phase 1: scoping questions to ask the client

A few questions in the kickoff call prevent most surprises later. They also tell you which plan the project needs before you quote.

1. Which Instagram account? Get the exact username. Businesses sometimes have an old account, a personal account and the “real” business account.
2. Is it a professional account? Social Feed works with Instagram Business and Creator accounts. A personal account must be switched first, and a private personal account becomes public when it is switched. See why you need a professional account.
3. Who can sign in to it? The person who knows the Instagram password, and has access to any login confirmation, needs to be available for the connection step. Often that is not your main contact but a marketing assistant or the owner.
4. Where should feeds appear? Homepage only, or also a footer, an About page, product or service pages? Each placement with different settings is a separate widget, which affects the plan.
5. Should every post appear? Many accounts mix portfolio work with hiring posts, giveaways and holiday notices. If the client wants only some posts, plan a caption keyword or date range filter.
6. How much traffic does the site get? Monthly views are counted each time a widget is displayed. A busy site with feeds on several pages can need a bigger plan than the widget count suggests.
7. Who looks after it after launch? This decides who owns the Social Feed account.

For placement ideas you can show the client, see where to put an Instagram feed on your website. For filtering, see filtering a feed by caption keyword and showing only recent posts.

How the connection works (and why there is no invite link)

Agencies used to other tools often look for an “invite client” link to email. Social Feed does not have one. Here is how connecting actually works:

1. Someone signed in to a Social Feed dashboard clicks + Connect Instagram account.
2. Instagram’s own sign-in page opens. Social Feed asks Instagram to show the sign-in step every time, so you are not silently connected to whatever Instagram account the browser happens to be logged in to.
3. The account owner signs in on Instagram’s page and approves read access. Social Feed never sees the Instagram password.
4. The account appears in the dashboard that started the connection, with its first widget already created.

So the connection always lands in the Social Feed account where the button was clicked. That leaves two set-ups: the client creates their own Social Feed account and connects there, or the client signs in to Instagram during a connection you start in your agency account, on a call or in person. Meta’s documentation describes Instagram Login as working with professional accounts without a Facebook Page, which keeps this step simple for small businesses.

The full comparison of the two set-ups, including who pays and what happens when a project ends, is in the agency section of our article on showing someone else’s feed. The short version: choose the client’s own account for one-off builds, and your agency account when you sell an ongoing care plan.

Choosing a plan per client

Plans belong to a Social Feed account, not to a website. Two things are counted across the whole account: the number of widgets (for every connected Instagram account together) and the monthly views (for every widget together).

Some typical project shapes and the plan that fits:

Why the last row matters: when monthly views go over the plan limit two months in a row, the widgets in that Social Feed account pause for the following month. In an agency account, that means one client’s traffic spike can affect every other client in the same account. Standard has no view limit, so the question never comes up. The rule is explained with examples in what happens when your widget reaches its monthly view limit. Current prices are always in the pricing section.

Phase 2: running the connection session

Treat the connection as a short scheduled task rather than something you email about. A calendar invite titled “Connect Instagram to the website (10 min)” works well.

1. Before the call: confirm the account is a professional account, and ask the client to make sure they can sign in to Instagram on a computer. If they normally only use the phone app, they may need their password reset first, which is much easier the day before than during the call.
2. If the client owns the Social Feed account: ask them to sign up with an email address the business will keep (not a departing employee’s), then click Connect while sharing their screen with you.
3. If your agency owns it: start the connection from your dashboard and let the client type their own credentials on Instagram’s page. On a video call, use remote control or have them open the link on their side; in person, hand over the keyboard.
4. Finish in one go. The connection request does not wait indefinitely. If the client gets interrupted and it times out, simply click Connect again.
5. Confirm the right account. Check the username shown in the dashboard. Clients with several accounts sometimes sign in to the wrong one.
6. Clean up. If the client signed in on your computer, sign out of Instagram in that browser afterwards.

A useful line for nervous clients: the permission Social Feed asks for is read-only. It reads the profile and posts so they can be shown on the website. It cannot post, comment or read messages.

Phase 3: building on the staging site

The embed code is a single script tag. It draws the feed exactly where it is placed, so it works on a staging site, a local preview that can load external scripts, or the live site, without any domain settings. Paste it into whatever your platform offers for custom HTML: a Custom HTML block, an Embed element, a Code module.

Platform guides cover the details: WordPress, Shopify, Wix, Squarespace, Webflow and plain HTML, plus blog posts for Elementor, Divi, Duda and Framer. If you build with a JavaScript framework, see React, Next.js and Vue.

Three things agencies run into on staging:

1. Page builder editors may not run the script. Many editors show a placeholder instead of the feed. Check the preview or the published staging page. See feed not showing in your page builder editor.
2. Staging views count. Views are counted wherever the widget is displayed, staging included. On the Free plan, heavy testing, automated screenshot tools and repeated reloads all add up. Known bots and crawlers are not counted, but your own browsing is.
3. Security headers can block it. If the client’s site sends a Content Security Policy, the widget’s script and Instagram’s image servers must be allowed. See Content Security Policy and Instagram feed widgets.

Matching the client’s design

Everything visual is set in the dashboard under Settings & preview, and changes apply to the embedded feed without touching the website. That is convenient during design reviews: you can adjust columns or spacing while the client watches the preview.

For deeper design advice, see making the widget match your website, grid or slider and lightbox or link to Instagram.

Several feeds for one client: duplicate, then rename

When a client needs feeds on more than one page, design the first widget completely, then use Duplicate on its card in the dashboard. The copy keeps every setting, so you only change what differs, such as the layout for the footer or a caption keyword for a service page. Each widget has its own embed code.

Use the Widget name field from the start. A naming pattern like “Client – Page – layout” (for example “Northside Dental – Footer – slider”) makes the dashboard readable, especially in an agency account with several clients, and it makes your handover notes match what the client sees.

More on this in showing different Instagram feeds on different pages. Remember that each widget counts toward the plan’s widget limit.

Phase 4: launching without surprises

Every widget has a Published switch. When a widget is switched off (Unpublished), its embed code shows nothing at all, on every page where it is placed. That gives you a clean way to place the code on templates before launch and turn the feed on at the moment you choose.

Note that the switch applies to the widget everywhere. If the same embed code is on both staging and live, switching it off hides it in both places. If you need the feed visible on staging but hidden on a live site, use a duplicate widget for staging, or simply do not paste the code on the live page yet.

On launch day, run through this list on the live site:

1. The widget is switched to Published and the feed appears on every intended page, once each. If it appears twice, see feed showing twice.
2. The posts are the right ones: filters show what the client expects, and nothing old or off-brand slips through. See old posts showing in your feed.
3. On a phone, the tiles are a sensible size and the feed does not push important buttons far down. See feed wrong size on mobile.
4. Clicking a tile does what was agreed. With the lightbox, videos play and carousels can be browsed if that option is on.
5. The feed can be used with a keyboard: tiles can be reached with Tab and opened with Enter or Space, and Escape closes the lightbox.
6. The page speed has not changed noticeably. Run PageSpeed Insights before and after. See will an Instagram feed slow down your website?
7. The site’s caching or optimization plugin has not altered the script tag. See WordPress removed your embed code.
8. If the site is not in English, the widget’s small texts follow the page language. See widget in the wrong language.

Accessibility you can mention to clients

Clients increasingly ask whether third-party widgets are accessible. Here is what the feed does today, so you can answer accurately:

1. Image descriptions: each image uses the alt text written on Instagram if there is one; otherwise the first part of the caption; otherwise “Instagram post by @username”. Encourage the client to add alt text when posting. See how to add alt text to Instagram posts.
2. Keyboard: tiles are focusable and open with Enter or Space. The lightbox is a dialog that keeps focus inside while open, closes with Escape and returns focus to the tile.
3. Slider buttons: the previous and next arrows have text labels for screen readers.

For a broader checklist that covers any embed, see making social media embeds more accessible.

Phase 5: the handover document

Clients forget how things were set up within weeks. A one-page note, saved wherever you keep project documentation, saves a support call later. Here is a template:

Instagram feed — handover notes for <Client name>

Instagram account shown:   @clientaccount (Business account)
Social Feed account owner:  <client or agency> — login email: <email>
Plan:                       <Free / Light / Standard>, paid by <client or agency>

Widgets
  1. "Client – Home – grid"     → homepage, below the services section
  2. "Client – Footer – slider" → site-wide footer template

If the feed stops showing posts:
  - Instagram password changed?  → sign in to Social Feed and click
    "Reconnect Instagram account" (no need to disconnect)
  - Widget switched to Unpublished? → switch it back to Published
  - Contact: <agency name, email>

Walk the client through three points in person, because they are the ones that cause support requests:

1. Changing the Instagram password can disconnect the feed. The fix is to sign in to Social Feed and click Reconnect Instagram account, then sign in with the same Instagram account. There is no need to disconnect first; the widgets and embed codes keep working. This works on every plan. Details: changed your Instagram password?
2. Removing Social Feed from Instagram’s app permissions stops the feed. Instagram lists connected apps and websites under Website permissions in its settings. See how to see and remove apps connected to Instagram.
3. Disconnect is permanent; Unpublished is not. In the dashboard, disconnecting an account deletes all of its widgets and embed codes. Deleting a widget removes that widget only. To hide the feed for a while, switch the widget to Unpublished instead. See hiding a feed temporarily.

A username change, by contrast, needs no action: the connection follows the account, not the name. See changed your Instagram username?

Ongoing care: a monthly five-minute check

If you sell care plans, the feed fits neatly into a monthly routine. Each widget card in the dashboard shows the views over the last 30 days with a small chart, the account’s post count and, when available, the date the current Instagram access token expires.

1. Look at the widget cards. A sudden drop to zero views usually means the feed stopped showing or the page was changed. A big jump may mean the feed was added to a busy template.
2. Check the connection. Social Feed renews access tokens automatically while the feed is in use. If the settings preview says the connection has expired, use Reconnect with the client. Background: Instagram access token expired.
3. Check the account’s views against the plan. Especially in an agency account holding several clients on Light or Free.
4. Open the live pages. A quick look on a phone catches theme updates that squeezed the feed into a narrow column.
5. Review filters with the client occasionally. Seasonal keywords and date ranges that made sense at launch may need updating.

The view numbers are a simple measure of how often the feed was displayed. They are not engagement analytics, so present them that way. If the feed stops updating, why your Instagram feed isn’t updating and feed not showing on your website cover the usual causes.

Common mistakes on client projects

1. Asking the client for their Instagram password. Never necessary, and a liability for you. The client signs in on Instagram’s page.
2. Signing up with a personal email. If the Social Feed account belongs to the client, use an address the business will keep.
3. Underestimating views. A feed in a site-wide footer is displayed on every page view, not just the homepage.
4. Disconnecting to fix an expired connection. That deletes the widgets and embed codes. Use Reconnect.
5. Promising features the feed does not have. It shows one connected account’s own posts. It does not show hashtag feeds, tagged posts, Stories or several accounts mixed in one feed.
6. No owner after launch. Decide who answers when the client says “the Instagram thing is gone”.

Frequently asked questions

Can I manage several clients from one Social Feed account?
Yes. You can connect several Instagram accounts to one Social Feed account, and each account has its own widgets. Widget and view limits apply to the Social Feed account as a whole, so plan accordingly.

Can one widget show the client’s account and a sister brand’s account together?
No. Each widget shows one Instagram account. Place two widgets next to each other if both are needed.

Can I send the client a link to connect without being on a call?
There is no invite link. The client can sign up for their own Social Feed account and connect there, then send you the embed code.

Does the embed code change when I change settings?
No. You can adjust settings after launch without editing the website.

Does the client need a Facebook Page?
No. A professional Instagram account (Business or Creator) is enough.

Can the client’s feed run on Free?
Yes, for one widget with up to 16 posts and 3,000 views a month. The feed updates once a day and shows the “Powered by Social Feed” credit. See what the free plan includes.

New to the product? Read what Social Feed by grip space is, or create a free account and set up a test widget with your own agency’s Instagram before your next client project.

Sources

1. Meta for Developers, “Overview of the Instagram API”: https://developers.facebook.com/docs/instagram-platform/overview/
2. Instagram Help Center, “Set up a professional account on Instagram”: https://www.facebook.com/help/instagram/502981923235522
3. Instagram Help Center, “Manage apps and websites connected to Instagram”: https://www.facebook.com/help/instagram/1144624522593085
4. Google, PageSpeed Insights: https://pagespeed.web.dev/