How to Add Pinterest's Buttons & Widgets to Your Website

by Pamela Vaughan

Date

November 15, 2012 at 2:00 PM

describe the imageintermediate

Didjya hear the news? Yesterday, Pinterest launched business accounts! If you're feeling a little frazzled -- "Ahh! What do I do? How do I get one? I already have a regular profile acting as my business page! Oh, the humanity!" -- take a breather. We've pulled together a brand spankin' new ebook with step-by-step instructions about how to set up your Pinterest business account -- or convert your current profile into one. You can get your free copy here.

But once you've completed the account setup or conversion process, what can you do to promote your business' Pinterest presence outside of Pinterest? First things first: let your audience know you have one! Luckily, yesterday Pinterest also announced some other awesome tools and resources just for businesses, including a couple of brand new widgets that help you promote your business' Pinterest presence through one of your most powerful marketing assets: Your website!

Pinterest's 4 Buttons & Widgets

Pinterest offers four different types of buttons and widgets to add to your website:

  • 'Pin It' Button
  • 'Follow' Button
  • 'Profile' Widget (NEW!)
  • 'Board' Widget (NEW!)

The 'Pin It' and 'Follow' buttons have always been available, but now you have even more options with Pinterest's 'Profile' and 'Board' widgets. This post will teach you exactly what each of these buttons and widgets are, why and how they’re useful, and how to create the embed code you need to make them appear on your website. The code for all of these buttons and widgets can be generated on Pinterest’s Widget Builder page.

Configuring the 'Pin It' Button

The 'Pin It' button lets people pin an image from your website to Pinterest, allowing your site visitors to easily share your site’s visual content on Pinterest. To create the button, first select if you’d like the pin count number (a count of the number of people who have pinned that image) to appear above or beside your 'Pin It' button -- or not at all.

To generate the button for a specific image on a web page, insert the URL of the page that image appears on, and add the URL location for the image you want visitors to pin (right click on the image on your website and click 'Copy Image Location' -- or select ‘View Image Info,’ and copy and paste the URL under the ‘Location’ field). Then write a short, keyword-optimized description of the image. We recommend against including a URL in the description itself, as Pinterest is known to mark these as spam.

pin button setup resized 600

Pinterest will then generate a preview and provide you with your embed code that you can copy and paste into your site HTML wherever you want the button to appear -- preferably next to the image you want visitors to pin.

pin button preview resized 600

 

Recommendations for Use

The 'Pin It' button is great for promoting the visual content you have on your site, particularly the original visuals your business has created. Place these buttons next to concept visualizations, infographics, product screenshots, etc. on blog articles, landing pages, product pages, other website pages, and even within email messages!

Configuring the 'Follow' Button

The Pinterest ‘Follow’ button enables you to promote your overall business presence on Pinterest by encouraging and allowing site visitors to easily follow your business on Pinterest, thus helping you grow your social reach.

To generate the embed code for your website, simply enter your Pinterest page's URL and company/brand name. We recommend turning the button into a call-to-action by adding a verb like "Follow" before your company name, as we've done in the example below.

generate follow button resized 600

Then simply copy and paste the embed code Pinterest provides into your site HTML wherever you want the button to appear.

follow preview resized 600

 

Recommendations for Use

Add the 'Follow' button to the rest of your suite of social media follow buttons on your website and/or email communication. For example, if you promote your Facebook, Twitter, LinkedIn, and Google+ presence using follow buttons on your website's homepage, 'About Us' page, 'Contact Us' page, or in your email messages, add your Pinterest 'Follow' button to the mix there, too! 

Configuring the 'Profile' Widget

Pinterest’s ‘Profile’ widget allows you to display up to 30 of your latest pins anywhere on your website. This widget is valuable for businesses trying to grow their Pinterest following, because it enables you to demonstrate the value of your Pinterest account to your site visitors before they choose to follow you.

To generate the embed code for your own ‘Profile’ widget, simply insert your user URL, which will then pull in the 30 most recent pins from the URL. By clicking on 'Advanced Options,' you can also customize the height and width of your widget, as well as the width of the images it displays within.

profile widget resized 600

Then simply copy and paste the embed code into your site HTML where you want this board to appear.

profile widget preview resized 600

 

Recommendations for Use

Consider pairing this widget with the Pinterest 'Follow' button on your site. If visitors are interested in the pins they see in the widget, you'll want to make it super easy for them to follow you right then and there! Add this widget to the 'About Us' or 'Contact Us' section of your website -- or to a web page dedicated to promoting your social media presence across various social networks.

Configuring the 'Board' Widget

Pinterest’s 'Board' widget is similar to its 'Profile' widget, but it allows you to display up to 30 of your latest pins on a specific board. This widget is useful if you have one particular board that might appeal to visitors of a particular page or section of your site, thus giving you more targeted content options.

To generate the embed code for your own 'Board' widget, simply insert the URL of the Pinterest board you’d like to display on your site. Just as with the 'Profile' widget, by clicking on 'Advanced Options,' you can also customize the height and width of your widget, as well as the width of the images it displays within.

board widget setup resized 600

Pinterest will generate the embed code you need, which you can copy and paste into your site’s HTML wherever you want that board to appear.

board widget preview resized 600

 

Recommendations for Use

Create segmented pinboards that you can use to pin more targeted visual content. Then create targeted web pages appealing to that specific segment, and showcase some of the visual content that caters to them using a widget for that specific pinboard.

How else could you effectively leverage Pinterest's various buttons and widgets to empower your business Pinterest presence? To learn about the other ways you can take advantage of Pinterest's new business accounts, download our new, free ebook, A Guide to Pinterest's New Business Accounts.


Search Inbound Hub

Subscribe to Marketing Articles by Email

Subscribe by RSS

Follow HubSpot

Call Us: 1-888-HUBSPOT