How to add an Instagram follow button to your website

What an Instagram follow button on a website really does

Before setting anything up, it helps to know what is possible. A follow button on a website is a link to your Instagram profile. When a visitor clicks it, your profile opens, and the visitor taps Instagram’s own Follow button there. A website cannot follow an account on the visitor’s behalf, and that is a good thing: following is the visitor’s decision, made inside Instagram, where they are logged in.

So the job of the button on your website is to be easy to see, clear about where it leads, and placed at a moment when following feels like a natural next step. The rest of this article covers how to do that.

You have three main ways to get a follow link onto your site:

The Follow button in the feed header

Every Social Feed widget can show an account header above the posts. It is one row with your profile picture, your @username, your post count and a Follow button. The posts underneath show that you are active; the button right next to them gives visitors a way to see more.

Here is how the button behaves on your website:

1. Where it leads: your profile on Instagram, at https://www.instagram.com/ followed by your username. The address is built from the username saved when you connected your account.
2. How it opens: in a new browser tab, so your website stays open in the original tab. On phones, depending on the visitor’s settings, the Instagram app may open instead of the browser.
3. How it looks: white text on a colored background, with rounded corners. The text is slightly smaller than the rest of the feed’s text and stays on one line.
4. Where it sits: in the header row, after your profile picture, username and post count.

Turning the header and Follow button on

1. Log in to your dashboard and click “Settings & preview” on the widget’s card.
2. In the display settings, check “Show account info”.
3. Under “Elements to show”, choose any of Profile picture, Username and Post count.
4. Below them, fill in “Follow button text” and pick a “Button color”.
5. Check the preview on the right, then click “Save settings”. The change appears on your website the next time the page loads; the embed code stays the same.

The Follow button belongs to the account header. It is shown whenever “Show account info” is checked, and hidden when it is not. There is no separate switch for the button alone. That gives you three possible looks:

The button-only look is useful in tight spots such as a footer, where the full header would take too much room, but you still want a clear way to follow. If you choose posts only, consider setting clicks on posts to open Instagram, described further below, so visitors still have a path to your profile.

Changing the button text

The “Follow button text” field accepts any text. Whatever you type is shown on the button exactly as written, on every page.

If you leave the field at its default, the button adapts to the language of the page it is on: it reads “Follow” on English pages and the Japanese equivalent on Japanese pages. The widget decides this from the language set in your page’s HTML, falling back to the visitor’s browser language. If your site is in one language, typing your own text is the simplest way to be sure of the wording.

A plain “Follow” works, because the Instagram header around it makes the meaning clear. Text that says what people get often works better, because it gives a reason to click. Some ideas:

Keep these points in mind when writing your own text:

1. Keep it short. The text stays on one line and does not wrap. In a narrow sidebar or on a small phone, a long label takes room away from your username and can make the header look crowded. Two to four words is a safe length. Check the result at narrow widths, as described in the testing section below.
2. Promise only what you post. “Follow for daily specials” only works if you post specials daily. Visitors who follow because of a promise and do not see it may unfollow.
3. Make it clear it leads to Instagram. The header’s @username and profile picture usually do that. If you show the button alone, consider including the word “Instagram”, for example “Follow us on Instagram”, so visitors know the link leaves your site.
4. Match your site’s voice. If the rest of your buttons say “Book now” and “Shop the collection”, a button in the same style feels like part of the page.

Choosing the button color

The “Button color” setting opens your browser’s color picker, where you can choose a color visually or type an exact value from your brand guidelines. The default is a pink in the style of Instagram’s colors. The text on the button is always white, so the color you pick is the background behind white text.

Two things matter when choosing: whether the button fits your site, and whether its text is easy to read.

Fitting your site. There are two good approaches. Use your site’s main button color, so the Follow button looks like the rest of your calls to action, or use a color associated with Instagram, so visitors recognize at a glance where the link goes. Avoid giving the Follow button the same strong color as your most important button on the page, such as “Book now” or “Add to cart”, if both appear close together. One clear main action per section works better than two that compete.

Readability. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 between normal-sized text and its background, and 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold. The Follow button text is small and not bold, so the 4.5:1 level is the one to aim for. Here is how some colors compare with white text:

The default pink is close to the threshold but a little under it. If readability matters to you, and it should, a slightly deeper shade of the same color passes. As a rule of thumb, light and bright colors such as yellow, orange, light green and pastel tones do not work behind white text. If your brand color is one of those, use a darker shade of it, or use your darkest brand color for the button.

Where the Follow button works best

Visitors follow when they like what they have seen and have finished what they came for. That points to a few good spots for a feed with a Follow button:

1. Lower on the homepage, after your main message and main button, so the feed supports your offer instead of competing with it.
2. At the end of blog posts, where readers who enjoyed the article are looking for what is next.
3. On thank-you and confirmation pages, after a booking, order or sign-up, when the visitor’s task is done.
4. On an “About” or “Gallery” page, where visitors are already looking for a sense of who you are.

Avoid putting a prominent Follow button on checkout pages or right next to a booking form, where it can pull people away before they finish. For each placement in detail, with suggested settings, see where to put an Instagram feed on your website.

Other links to your profile inside the feed

The Follow button is not the only way the feed leads to Instagram. A few other settings work together with it:

On most pages, the lightbox plus the Follow button is a good balance: visitors can look at your posts without leaving, and the button is there when they are ready. Our article on choosing a grid or slider layout covers the click and hover options in more detail.

Your own follow link anywhere on your site

You do not need a feed to link to your profile. Menus, footers, contact pages and email signatures can all carry a simple link. Most website builders have a social links block or icon set where you only enter your profile address. If yours does not, or if you are editing HTML directly, a plain link is enough:

<a href="https://www.instagram.com/yourusername/" target="_blank" rel="noopener">Follow us on Instagram</a>

Replace “yourusername” with your Instagram username. The target and rel parts open the link in a new tab, like the Follow button in the feed. Style the link like your other buttons so it fits your site.

To get your exact profile link from the Instagram app, use the Share profile option described in the next section and choose Copy link, then paste it into your site editor.

Instagram’s own sharing options: profile card, link and QR code

Instagram’s app has a built-in way to share your profile, called the profile card. According to Instagram’s Help Center, it is available in the Android and iPhone apps but not on computers. To open it:

1. Tap Profile or your profile picture in the bottom right to go to your profile.
2. Tap Share profile.
3. Below the card, choose an option.

Instagram’s Help Center lists these options:

The card has two sides; swipe it to switch between them. One side carries a QR code that opens your profile when someone scans it. The Help Center also describes customizing the QR code from the same Share profile screen, by tapping the screen or the button at the top to change its color, choose an emoji design, or take a selfie with stickers. You can also change the background photo or color of the side with the QR code. Your bio, profile picture and links on the card come from your Instagram profile, so editing your profile updates the card.

Menu names in apps change over time. If what you see does not match, check Instagram’s Help Center for the current steps.

Should you put a QR code on your website?

Usually not as the main way to follow. A QR code is made to be scanned by a phone camera, and most people who see your website on a phone cannot scan their own screen. For them, a tappable link or button is much easier. On a computer, a visitor could scan a QR code with their phone, but a link they can click works too.

Where a QR code shines is off your website: on menus, receipts, posters, packaging, business cards, event signs and screens in a shop or waiting room. In those places, there is nothing to click, and pointing a phone at a code is the quickest way to reach your profile.

If you still want to show the code on your site, for example on a “Visit us” page that people might print, add a text link next to it so phone visitors are not stuck.

Testing your Follow button

1. Click it on the live page, not only in the preview, and check that it opens the right profile.
2. Check it on a phone. See whether the label fits next to your username without crowding, and whether the button is easy to tap.
3. Check the narrowest placement. If the feed is in a sidebar or a column, make your browser window narrow and see how the header holds up. If it looks crowded, shorten the label or turn off one of the header elements, such as the post count.
4. Look at the color on your page background. A color that looks fine in the color picker can blend into a similar section background.
5. Log out of Instagram and try again, or use a private browser window, to see what a visitor who is not logged in sees. What Instagram shows logged-out visitors is up to Instagram.

Troubleshooting

The Follow button goes to the wrong profile or a page that does not exist. The button uses the username saved when you connected your account. If you changed your Instagram username since then, the button still points to the old address. Our guide to updating the feed after a username change explains how to fix it.

There is no Follow button. Check that “Show account info” is checked in the widget settings and that you clicked “Save settings”. If the whole feed is missing, not just the button, the widget may be unpublished or the code may not be running; see why an Instagram feed is not showing.

The button still says the old text. Make sure you saved the settings, then reload the page on your website. If your website shows several widgets, check that you edited the one on that page.

The button text appears in Japanese on my English site, or the other way around. When the text field is left at its default, the button follows the language set in your page’s HTML. If your site’s language setting is wrong or missing, type the text you want into “Follow button text” and it will appear exactly as written.

Visitors land on Instagram but say they could not follow. The button only opens your profile; the follow itself happens on Instagram, and what Instagram asks of a visitor who is not logged in is up to Instagram. Check that the button opens your profile correctly in a private browser window. If it does, there is nothing to fix on your website.

Frequently asked questions

Can visitors follow me without leaving my website? No. The button opens your Instagram profile in a new tab, and visitors follow you there.

Can I move the button to a different position, or change its shape? No. The settings cover the button text and color, and its size follows the widget’s font size. Its position in the header and its shape are fixed.

Can I hide the post count but keep the Follow button? Yes. Keep “Show account info” checked and uncheck Post count under “Elements to show”.

Is the Follow button available on the Free plan? Yes. All display settings, including the account header and the Follow button, are available on every plan. The plans differ in the number of widgets, posts and monthly views. See the pricing section.

Is the small “Powered by” link under the feed the same as the Follow button? No. On the Free plan, a small credit link to Social Feed is always shown under the feed. It is separate from the Follow button, which always links to your own profile.

Summary

The easiest way to add an Instagram follow button to your website is to turn on the account header in your feed: check “Show account info”, write a short button text that says what followers get, and pick a color that keeps the white text readable. Add plain profile links wherever there is no feed, and use Instagram’s QR code for print and in-store signs.

To set up a feed, see our guides for WordPress, Shopify, Wix, Squarespace, Webflow and plain HTML, or create a free account.

Sources

1. Instagram Help Center, “Edit and share your Instagram profile card”: https://www.facebook.com/help/instagram/550964264146477/?cms_platform=iphone-app
2. Instagram Help Center, “Find and customize the QR code of your Instagram profile”: https://www.facebook.com/help/instagram/925529167647849/?cms_platform=iphone-app
3. Instagram Help Center, “Scan a QR code to find someone’s profile on Instagram”: https://www.facebook.com/help/instagram/2030685476997658/?cms_platform=iphone-app
4. W3C, “Understanding Success Criterion 1.4.3: Contrast (Minimum)”: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html