DEV Community

Cover image for How to Add a Pinterest Follow Button to Your Website
Krishan Vijayvargiya
Krishan Vijayvargiya

Posted on

How to Add a Pinterest Follow Button to Your Website

Most people who land on your website from Pinterest never come back to Pinterest through you. They read the post, close the tab, and that's the end of the relationship. A follow button fixes a small part of that problem: it gives a visitor who already likes your content one obvious way to keep seeing it.

This guide covers how to generate the official button, where to paste the code on the main website platforms, how to build your own version if you don't want Pinterest's script on your site, and one alternative worth knowing about if a plain button feels too thin for what you're trying to do.

What the follow button actually is

Pinterest now calls its website embeds "add-ons" rather than widgets, though the old widget builder URL still works and most documentation online still says widget. There are five of them: the Save button, the Follow button, the Pin add-on, the Board add-on, and the Profile add-on.

The Follow button is the simplest of the group. It renders a small red button with the Pinterest logo and your profile name. When a logged-in Pinterest user clicks it, they follow your account without leaving your page, and your new pins start appearing in their home feed. Visitors who aren't logged in get sent to Pinterest to sign in first.

That last detail matters more than most tutorials admit. If a large share of your traffic is people who don't use Pinterest, the button will sit there collecting impressions and very few clicks. It works best on sites where the audience overlaps with Pinterest's audience: home décor, food, fashion, weddings, DIY, travel, parenting, and product-heavy ecommerce.

Before you start

You'll need three things:

  1. Your Pinterest profile URL. Open your profile and copy it from the address bar. It looks like https://www.pinterest.com/yourhandle/. Use the handle, not the display name.
  2. A way to insert HTML and JavaScript. A custom HTML block, a code injection field, a theme file, or a tag manager. Free WordPress.com plans and some locked-down builders strip JavaScript, which is why the button renders as a plain text link for some people.
  3. A Pinterest account. A business account is not required for the button to work, but you want one anyway for analytics and rich pins.

Method 1: Generate the code with Pinterest's builder

This is the official path and takes about two minutes.

  1. Go to the Pinterest widget builder at developers.pinterest.com/tools/widget-builder/ and open the Follow tab.
  2. Paste your profile URL into the field.
  3. Type the label you want on the button. This is usually your brand name. Keep it short, because long labels wrap badly on mobile.
  4. Check the live preview on the right side of the builder.
  5. Copy both blocks of code. There are two: the button markup and the script tag.

The output looks like this:

<a data-pin-do="buttonFollow" href="https://www.pinterest.com/yourhandle/">
  Your Brand Name
</a>

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
Enter fullscreen mode Exit fullscreen mode

Paste the first block wherever you want the button to appear. Paste the script tag once per page, as close to the closing </body> tag as you can get it. Pinterest's own documentation is specific about this, and putting the script in the <head> is the single most common reason the button fails to render.

If you already use another Pinterest add-on on the same page, such as a Save button or a board embed, you only need pinit.js once. Loading it twice causes conflicts.

Method 2: Skip the builder and write the code yourself

The builder does nothing you can't do by hand. If you know your handle, paste this and change two values:

<a href="https://www.pinterest.com/yourhandle/" data-pin-do="buttonFollow">
  Your&nbsp;Brand&nbsp;Name
</a>
Enter fullscreen mode Exit fullscreen mode

The non-breaking spaces in the label are a small trick from Pinterest's docs that stops the button text from wrapping onto two lines in narrow columns.

Adding the button on specific platforms

WordPress

For a single post or page, add a Custom HTML block in the block editor and paste the button markup into it. Then add the script tag site-wide rather than in the block, so it loads once.

The cleanest way to add the script site-wide is a code snippet plugin (WPCode, Code Snippets, or Header Footer Code Manager) with the snippet set to load in the footer. If you'd rather not add a plugin, most modern themes have a "Footer scripts" or "Custom code" field in the Customizer or theme options panel.

Avoid editing footer.php directly on a parent theme, since a theme update will wipe it. Use a child theme if you go that route.

For a sidebar or footer button, add a Custom HTML widget in Appearance then Widgets, or place the block in the footer template if your theme uses full site editing.

One warning specific to WordPress: aggressive caching and optimization plugins often defer or combine third-party JavaScript. If the button disappears after you install a performance plugin, add pinit.js to the exclusion list.

Shopify

Go to Online Store, then Themes, then Edit code. Open theme.liquid and paste the script tag right before </body>. Then place the button markup wherever you want it, either in a section file or through a custom Liquid block in the theme editor. The footer social row is the usual spot.

Wix

Use Settings, then Custom Code, and add the script tag to the body end for all pages. For the button itself, drop an Embed HTML element on the page and paste the markup. Wix sandboxes embed elements inside iframes, so if the button behaves strangely, use the site-wide custom code approach for both blocks instead.

Squarespace

Add the script tag under Settings, then Advanced, then Code Injection, in the Footer field. Then add a Code Block on the page and paste the button markup. If your button shows as text instead of a button, delete the code block and create a fresh one rather than editing the existing one. Squarespace's own support notes this quirk.

Webflow

Add the script in Project Settings, then Custom Code, in the Before </body> tag field. Drop an Embed element on the canvas for the button markup. Note that custom code only runs on published sites, not in the Designer preview, so test on the live URL.

Google Tag Manager

If you already run GTM, you can inject both blocks through a Custom HTML tag. Do this only if the button sits in a fixed location like the footer, since GTM injection makes the button harder to position precisely and adds a small delay before it appears.

Method 3: Build your own button and skip Pinterest's script

pinit.js is a third-party request. It's small, but it's still a DNS lookup, a connection, and a render step on every page where it loads. On a site where Core Web Vitals matter, or where a consent banner blocks third-party scripts until the visitor opts in, a plain styled link does the same job with zero external dependencies.

The tradeoff: a plain link sends the visitor to Pinterest instead of letting them follow in place. You lose the in-page follow, and you lose the follower count. For most sites the performance gain is worth more than the convenience.

<a class="pin-follow" href="https://www.pinterest.com/yourhandle/" target="_blank" rel="noopener">
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.08 3.16 9.42 7.62 11.17-.1-.95-.2-2.4.04-3.44.22-.93 1.4-5.94 1.4-5.94s-.36-.72-.36-1.78c0-1.67.97-2.92 2.17-2.92 1.02 0 1.52.77 1.52 1.69 0 1.03-.66 2.57-1 4-.28 1.2.6 2.17 1.78 2.17 2.14 0 3.78-2.25 3.78-5.5 0-2.88-2.07-4.89-5.02-4.89-3.42 0-5.43 2.56-5.43 5.21 0 1.03.4 2.14.9 2.74.1.12.11.22.08.34l-.33 1.37c-.05.22-.17.27-.4.16-1.5-.7-2.44-2.89-2.44-4.65 0-3.79 2.75-7.26 7.93-7.26 4.16 0 7.4 2.97 7.4 6.93 0 4.14-2.6 7.47-6.22 7.47-1.21 0-2.35-.63-2.74-1.38l-.75 2.85c-.27 1.04-1 2.35-1.49 3.15 1.12.35 2.31.53 3.54.53 6.63 0 12-5.37 12-12S18.63 0 12 0z"/>
  </svg>
  Follow on Pinterest
</a>
Enter fullscreen mode Exit fullscreen mode
.pin-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #e60023;
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  text-decoration: none;
}
.pin-follow:hover { background: #ad081b; }
.pin-follow:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
Enter fullscreen mode Exit fullscreen mode

The rel="noopener" is there for security, and the focus outline is there so keyboard users can see where they are. Both get skipped in most tutorials.

Method 4: Show the feed and the follow button together (using Taggbox)

Here's the honest problem with a standalone follow button: it asks a visitor to commit to an account they haven't seen. There is no preview, no sense of what you actually pin, and no reason to say yes.

Embedding your Pinterest feed solves that. The visitor sees the pins, decides whether they like them, and the follow prompt sits right there in the header of the embed. This is where a UGC platform earns its place, because Pinterest's own Profile add-on is fairly rigid in how it looks and behaves.

Taggbox is one option for this. The workflow runs roughly like this:

Step 1: Connect the Pinterest source. In the dashboard, open Content Gallery and click Add feed, then pick Pinterest. You get two ways to pull content: by Handle(@), which brings in the account's pins, or by User Board, which pulls a specific board. There's also a checkbox for manually approving posts before they go public, which is worth turning on if you're pulling in mentions rather than your own account.

Step 2: Moderate what shows. Once the feed builds, you land in the moderation view with every pin listed and a Public or Private toggle on each card. Anything off-brand or seasonal gets flipped to Private and disappears from the embed without you touching Pinterest itself. On ecommerce plans there's also a Tag products option on each pin, which is how you attach a catalog item to a specific image.

Step 3: Set up the channel. Move to Customize and Publish, then Add Channel, and pick Website. Name the channel something you'll recognize later, because these pile up quickly across a team.

Step 4: Style it. The publish screen has three tabs: Theme, Customization, and Product CTA. Theme controls the layout (grid, carousel, single post, and so on). Customization handles colors, spacing, and which elements appear. Product CTA is where you set the button text, font, colors, and click behaviour if you're running shoppable pins. There's a desktop and mobile preview toggle at the top, and the account header with the Follow button sits at the top of the embed in the live preview.

Step 5: Generate and paste. Click Generate code and drop the snippet into your page exactly like you would with any other embed. On WordPress that's a Custom HTML block; on Shopify it's a section or a custom Liquid block.

The tradeoff is worth stating plainly. This is a paid tool with a free tier, it loads its own script, and it's more moving parts than a single anchor tag. If all you want is a small button in your footer, Method 1 or Method 3 is the right answer. If you want the feed working as social proof and the follow prompt as a secondary action, an embed does more work per pixel than a button on its own.

Where to put the button

A few placements that tend to earn clicks:

  • End of blog posts, particularly on visual content like recipes, tutorials, and room tours. The reader has just finished something they liked, which is the best moment to ask.
  • Footer social row, alongside your other network links. Low click rate, but it costs nothing and it's where people look for it.
  • Sidebar on category and archive pages, if your theme still uses a sidebar.
  • About page, where visitors are already looking for ways to keep in touch.

Placements that rarely work: a floating bar that covers content on mobile, anything above the fold before the visitor has read a word, and a follow button on your checkout or cart page, which sends people away at the worst possible moment.

Common problems and how to fix them

The button renders as plain text. Almost always the script didn't load. Check that pinit.js is present in the page source, that it sits before </body>, and that your platform isn't stripping script tags.

The button works locally but not on the live site. Check your Content Security Policy. You need assets.pinterest.com allowed for both script and image sources.

The button vanished after a site speed change. A caching or optimization plugin is deferring, delaying, or combining the script. Add pinit.js to that plugin's JavaScript exclusion list.

The button disappears for some visitors. Ad blockers and privacy extensions block Pinterest's assets domain. There is no fix for this and it's a reasonable argument for the self-hosted version in Method 3.

Nothing loads until someone accepts cookies. Correct behaviour if you have a consent manager configured for third-party scripts under GDPR. Again, the plain link version sidesteps the whole issue.

The follower count doesn't show. Pinterest removed the follower count from the standard button some time ago. If you want the number visible, you'll need to display it yourself or use a third-party embed that pulls it.

You need it on AMP pages. Standard widget code won't run. Use the amp-pinterest component with data-do="buttonFollow" instead.

Set your expectations honestly

A follow button is a low-effort, low-return addition. On a site doing decent traffic in a Pinterest-friendly niche, expect single-digit or low double-digit new followers per month from the button alone. It's worth the ten minutes it takes to add, and it isn't worth building a strategy around.

The things that actually move Pinterest follower counts are pinning consistently, using vertical images sized for the feed, writing pin descriptions that read like search queries, and claiming your website so your pins carry your profile attribution. The button captures demand that already exists. It doesn't create it.

If you want the button to do more, give people a reason next to it. "Follow for weekly recipe boards" outperforms a bare button, because it tells the visitor what they're signing up for.

Quick answers

Do I need a Pinterest business account? No, the button works with any account. Get one anyway for analytics.

Can I change the button colour? Not the official one. Pinterest controls its styling. Build your own if you need it to match your design.

Will it slow my site down? Marginally. One script, loaded async. If you're chasing a perfect performance score, use the plain link version.

Can I add it to multiple pages? Yes. Add the button markup wherever you want it, but include the script only once per page.

Does it work on mobile? Yes, and the in-app follow works if the visitor is logged into Pinterest in the same browser.

Top comments (0)