Internet Marketing Driver

  • GSQi Home
  • About Glenn Gabe
  • SEO Services
    • Algorithm Update Recovery
    • Technical SEO Audits
    • Website Redesigns and Site Migrations
    • SEO Training
  • Blog
    • Web Stories
  • Contact GSQi

How To Add The Pinterest “Pin It” Button to a Website, WordPress Blog, or ecommerce CMS

February 13, 2012 By Glenn Gabe

Share
Tweet
Share
Email
16 Shares

Pinterest

There’s a good chance you’ve heard of Pinterest lately. It has been all over the news, as it’s growing like mad, and driving a lot of traffic to ecommerce retailers. If you’re not familiar with Pinterest, it’s a new social network/application that enables users to pin photos to virtual pinboards, organized by topic. Once pinned, other users can view your photos and pinboards, “repin” photos to their own pinboards, comment on photos, and like them. This had led to an explosion of traffic for some websites, especially ecommerce retailers. Many people use Pinterest when researching new purchases, to organize ideas, etc. For example, I just created a pinboard containing the top golf drivers I’m researching for the 2012 season. That’s if I get to play this year. :)

Based on the rapid growth of Pinterest, and all the buzz associated with that growth, I’ve received a lot of questions recently about how ecommerce retailers could get more involved. Also, website owners want to know the best ways to make it easier for Pinterest users to pin photos that are located on their respective websites. So, I decided to write this post to explain various ways to include the “Pin It” button on a website. I will include instructions and information below for how to include a “Pin It” button on a webpage, on a WordPress blog or website, and how to address adding the “Pin It” button to an ecommerce CMS (which is the most challenging of the three).

What is the “Pin It” Button?
Before we hop into the instructions, I’ll quickly cover what the “Pin It” button is. You have inevitably seen Like buttons, Tweet buttons, +1 buttons, etc. as you travel the web. Those social plugins make it easier for users to share content to Facebook, Twitter, and Google+ from websites across the web. Well, Pinterest also wants to make it easier for users to quickly pin content. So, they created the “Pin It” button. In its simplest form, it’s a small button that you can place on a webpage that enables users to quickly pin content to a pinboard, while also showing how many “pins” it has received. You can tailor the code of the “Pin It” button to specify the URL of the webpage, the URL of the image you want users to pin, and the description that populates the “Pin It” form. You can also tailor how the “Pin It” button displays on your webpages.

The “Pin It” button (both horizontal and vertical layout listed below):
Pinterest Pin It Button

Since there are several types of websites, and each brings its own type of installation, I’ll cover a few of the most common methods below. My hope is that the following information and instructions can help you get up and running quickly. Let’s face it, if you make it easier for users to pin content, the greater chance you have of receiving a spike of traffic from Pinterest. Let’s jump in.

Instructions for Adding the Pinterest Button to a Simple Webpage
This is the most basic implementation of the “Pin It” button. Let’s say you have a webpage with a killer photo of your core product. Maybe you don’t have many products, but just sell a handful of core products. If that’s the case, you could use the following instructions to add a “Pin It” button to those product webpages.

Pinterest has created a simple tool on its website to help webmasters create a static “Pin It” button. You can visit http://pinterest.com/about/goodies/ and scroll down to section titled “Pin It” Button for Websites. You will see fields for URL of the webpage the photo is located on, URL of the image located on your servers, and then a description field. The description is optional, but I highly recommend adding that to make it easier for users (since it auto-populates the “pin it” form once the button is clicked). You can also select how the “Pin It” button displays. There is a dropdown that lets you choose if the pin count shows up next to or above the pin button. You can also choose to not show the pin count at all.

Once you enter the required information, Pinterest will generate the code for you below the form. Then you can copy the code and add it to your webpage. There is “Basic” code and “Advanced Code”. The advanced code loads asynchronously, which can help with performance. Also, you should use the advanced code when you want to add several pin buttons to one webpage. You will need to add the resulting code to your webpage (in your html).

Screenshot of what the “Pin It” button form looks like when populated with sample data:
Pinterest Pin It Form

How To Add a Pinterest Button to a WordPress Blog (via a WordPress Plugin)
If you are running a WordPress blog, you are in luck. There are several plugins that you can install that makes it easy to add “Pin It” buttons to your blog posts and pages. I’ll explain two of those plugins below.

The first plugin I’ll cover is called Pinterest Pin It Button, and it provides some great functionality. Using this plugin, you can add “Pin It” buttons to your posts, pages, homepage, archives, etc. In addition, you can choose to show the “Pin It” button either above or below your main content. For even more customization, you can use a shortcode in your post to add the “Pin It” button within your main content. For example, you can use the shortcode [pinit] within your post to add the “Pin It” button within your content (versus just at the top or bottom of the post).

The Pinterest “Pin It” Button plugin settings in WordPress:
Pinterest WordPress Plugin

The second plugin I’ll cover offers basic “Pin It” button functionality. The Pin It on Pinterest plugin adds a “Pin It” button at the end of your posts, and it enables you to select which image should get pinned, as well as what the pre-populated description should be. Once installed, you will see Pinterest options in your post editor within WordPress.

How to Add a Pinterest Button to an eCommerce CMS
I mentioned earlier that adding a “Pin It” button to an ecommerce CMS is the most challenging to address. The reason is simple. When you have hundreds (or thousands) of products being handled dynamically by a content management system (CMS), you can’t simply add a static pin it button like we did earlier in the post. The code needs to be dynamically tailored based on the product at hand. There aren’t separate pages for each product within an ecommerce CMS, but instead, the CMS dynamically handles each product via database-driven code. This means you cannot simply ftp product pages to your server for each product you sell on your website. The underlying code needs to determine the right URL’s and description for the “Pin It” button.

In order to add any code to an ecommerce CMS that addresses the specific URL, images within the post, etc., you will need to understand the specific functions and variables that your CMS uses. By the way, even WordPress works this way. WordPress is a CMS, although many people don’t realize this. For example, there is a function that WordPress uses to determine the current URL, and it looks like this:



In WordPress, the_permalink() returns the current URL, which can be used to populate the “Pin It” button code. This is the approach you would need to use for your own CMS. The good news is that any reputable ecommerce CMS will provide a reference guide that includes the various functions and variables that can be used. Actually, it’s common to use these functions and variables to perform other tasks.

For example, here is a webpage explaining how to add a pin it button to Shopify. You’ll notice that the example includes variables specific to Shopify for determining the current URL, image URL, and description. Again, your own ecommerce CMS provider should provide similar variables you can use when adding the pin it button to your website.

A “Pin It” button on a Shopify ecommerce website:
Pinterest Pin It Button on a Shopify ecommerce Website

My recommendation is to contact your ecommerce CMS provider and track down the necessary code for referencing the current page, images within product pages, and the description you want to use for the image. Once you have that information, you can add the necessary code to your CMS template or theme to handle the “Pin It” button. It will then dynamically pull the correct information for each product page on your website.

Summary – Enable Users to Pin Content Easily
I hope this post helped you understand more about Pinterest, including how to add a “Pin It” button to your website, WordPress blog, or ecommerce CMS. Pinterest is growing rapidly and adding the “Pin It” button to your website can make it easier for users to share your content. This can give you a greater chance of having that content get noticed, shared, etc., which can result in increased traffic, exposure, and sales. And that’s what ecommerce is all about!

I recommend you start thinking about Pinterest today. You should speak with your development team or programmer to see how you can implement the “Pin It” button soon. Pins are waiting. :)

GG

Share
Tweet
Share
Email
16 Shares

Filed Under: cms, ecommerce, small-business, social-media, wordpress

Connect with Glenn Gabe today!

RSS Latest Blog Posts

  • Amazing Search Experiments and New SERP Features In Google Land (2022 Edition)
  • Analysis of Google’s March 2022 Product Reviews Update (PRU) – Findings and observations from the affiliate front lines
  • How NewsGuard’s nutritional labels can help publishers avoid manual actions for medical content violations (Google News and Discover)
  • What Discover’s “More Recommendations”, Journeys in Chrome, and MUM mean for the future of Google Search
  • How to extend a multi-site indexing monitoring system to compare Google-selected and user-selected canonical urls (via the URL Inspection API and Analytics Edge)
  • Favi-gone: 5 Reasons Why Your Favicon Disappeared From The Google Search Results [Case Studies]
  • Google’s Broad Core Updates And The Difference Between Relevancy Adjustments, Intent Shifts, And Overall Site Quality Problems
  • Google’s December 2021 Product Reviews Update – Analysis and Findings Based On An Extended And Volatile Holiday Rollout
  • The Link Authority Gap – How To Compare The Most Authoritative Links Between Websites Using Majestic Solo Links, Semrush Backlink Gap, and ahrefs Link Intersect
  • How to identify ranking gaps in Google’s People Also Ask (PAA) SERP feature using Semrush

Web Stories

  • Google's December 2021 Product Reviews Update - Key Findings
  • Google's April 2021 Product Reviews Update - Key Points For Site Owners and Affiliate Marketers
  • Google's New Page Experience Signal
  • Google's Disqus Indexing Bug
  • Learn more about Web Stories developed by Glenn Gabe

Archives

  • July 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • June 2009
  • May 2009
  • April 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007
  • November 2007
  • October 2007
  • September 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • April 2007
  • November 2006
  • October 2006
  • GSQi Home
  • About Glenn Gabe
  • SEO Services
  • Blog
  • Contact GSQi
Copyright © 2022 G-Squared Interactive LLC. All Rights Reserved. | Privacy Policy

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

Internet Marketing Driver
Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

3rd Party Cookies

This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

This site also uses pixels from Facebook, Twitter, and LinkedIn so we publish content that reaches you on those social networks.

Please enable Strictly Necessary Cookies first so that we can save your preferences!