Hupspot Guide to Adding Pinterest Buttons to Your Website

Using Hubspot style best practices, you can quickly add Pinterest buttons and widgets to your website so visitors can save, share, and discover your visual content more easily. This step-by-step guide shows you how to generate Pinterest code, place it on your pages, and optimize it for engagement.

Why Pinterest Buttons Matter for Hubspot-Style Marketing

Visual content drives clicks, saves, and long-term traffic. When you combine a content strategy similar to Hubspot with Pinterest buttons, you give visitors a simple way to share your images and attract new audiences.

Adding Pinterest tools can help you:

• Increase referral traffic from visual search.
• Encourage visitors to save your content for later.
• Show social proof with follower counts and boards.
• Enhance blog posts, product pages, and landing pages.

The original tutorial on how to set these up lives on the Pinterest button article at this Hubspot blog page. The walkthrough below distills the key steps into a clean implementation flow you can follow on any site.

Core Types of Pinterest Buttons and Widgets

Before you follow the setup steps, decide which Pinterest features you want to use. The original Hubspot example focuses on four core tools that you can activate with a small script and a bit of HTML.

1. Save (Pin It) Button

The Save button, often called the Pin It button, lets visitors save an image from your page directly to Pinterest. This is the most important feature to add if you publish blog posts, product images, or infographics.

Use it when:

• You rely on evergreen visual content for traffic.
• You want each image to be shareable in a single click.
• You follow a Hubspot-like content playbook and need scalable social sharing.

2. Follow Button

The Follow button invites visitors to follow your Pinterest profile. Instead of saving one image, they subscribe to all future Pins from your account.

Use it when:

• You are actively posting new Pins each week.
• You want to grow a long-term audience on Pinterest.
• You promote your brand across channels using a Hubspot-inspired approach.

3. Pin Widget (Single Pin Embed)

The Pin widget lets you embed a single Pinterest Pin into a blog post or landing page. It displays the image, description, and save count.

Use it when:

• You want to feature a specific recipe, design, or product.
• You need social proof to support a promotion.
• You are writing a tutorial similar in depth to a Hubspot how-to guide.

4. Profile or Board Widget

The Profile widget highlights your entire Pinterest profile, while the Board widget highlights one specific board with its latest Pins.

Use it when:

• You want to showcase curated content collections.
• You are promoting themed content hubs.
• You want a visual gallery embedded in a Hubspot-style blog layout.

Step-by-Step: Generate Pinterest Button Code

To add Pinterest tools, you first generate code snippets, then drop them into your site template or post HTML.

Step 1: Open the Pinterest Widget Builder

1. Log into your Pinterest account.
2. Visit the Pinterest widget builder page (the original Hubspot article links to it directly).
3. Choose the type of button or widget you want to create: Save, Follow, Pin, Profile, or Board.

Step 2: Configure Button or Widget Settings

Depending on the option you select, Pinterest will show a small form. Fill in the requested fields:

• URL: The page, profile, or board you want to connect.
• Image URL (for Save button or Pin widget): The image you want pinned.
• Description: A short, keyword-rich description of the Pin.
• Size and layout: Horizontal, vertical, or square, plus height and width options.

Think like a Hubspot content strategist and include clear, benefit-driven wording in your descriptions for better engagement.

Step 3: Copy the Generated HTML

When you finish the configuration, Pinterest shows you a preview and a block of HTML.

1. Copy the button or widget HTML snippet.
2. Leave the window open so you can copy the JavaScript if needed.

Step-by-Step: Add Pinterest Code to Your Website

The original Hubspot tutorial uses simple HTML placement. You do not need advanced coding skills, but you must know how to edit your site templates or blog HTML view.

Step 4: Add the Pinterest JavaScript

Pinterest uses a single JavaScript file to activate all buttons and widgets on a page.

1. Locate the closing </body> tag of your web page or template.
2. Paste the Pinterest JavaScript code right before that tag. The original Hubspot example uses a script similar to:
   <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
3. Save or update your template.

This script should load only once per page, even if you have multiple buttons or widgets.

Step 5: Insert the Button or Widget HTML

Next, place the snippet you generated from the widget builder where you want the button or widget to appear.

1. Open your page, post, or template in HTML or code view.
2. Find the exact spot in the layout for the button (for example, under the post title or at the end of the article).
3. Paste the HTML snippet.
4. Save and preview the page.

If the script tag from Step 4 is correctly installed, your Save button, Follow button, or widget will render automatically.

Hubspot-Style Placement Tips for Higher Engagement

Placement is critical. Following the original Hubspot article logic, your goal is to put Pinterest buttons where visitors naturally interact with content.

Strategic Locations for the Save Button

• Directly below feature images in blog posts.
• On product pages near the main product photo.
• In resource libraries that showcase infographics or templates.

You can use multiple Save buttons on a page if you feature several images. Just ensure your layout remains clean and consistent with Hubspot-inspired UX patterns.

Best Practices for Follow and Profile Widgets

• Place a Follow button in your blog sidebar.
• Add a Profile widget to the footer to highlight your brand visuals.
• Include a Follow button in thank-you pages or email preference centers.

The original Hubspot approach emphasizes giving followers more than one opportunity to connect without overwhelming them, so limit yourself to a few high-impact placements.

Testing and Troubleshooting Your Pinterest Setup

After you embed the code, test thoroughly to make sure everything works the way the original Hubspot tutorial intends.

Quick Checklist

• Buttons display correctly on desktop and mobile.
• Clicking Save opens a Pinterest window with the correct image and description.
• Follow buttons link to the right profile.
• Widgets show live data (images, follower counts, or board content).

If something fails:

• Verify that the JavaScript file is loading once per page.
• Check for typos in URLs or image paths.
• Compare your code with the patterns in the original Hubspot article.
• View the browser console for script loading errors.

Next Steps: Expand Your Visual Strategy

Once the technical setup is complete, integrate Pinterest into your full content workflow. Treat it like any other channel in a Hubspot-inspired marketing plan.

• Plan Pin-ready images for each new blog post.
• Align board names and descriptions with your core keywords.
• Track referral traffic and saves in your analytics platform.

For broader digital strategy, SEO, and analytics help that complements this setup, you can explore expert resources at Consultevo.

By combining clear technical implementation with a thoughtful content strategy, you can use Pinterest buttons and widgets to extend the reach of every piece of visual content on your site, just as the original Hubspot guide demonstrates.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`