person using pinterest app on an ipad

Add Pinterest Buttons to Magento Product Pages

As Pinterest becomes an increasingly valuable source of traffic for retailers, there is naturally going to be an increased demand for integration between online retail sites and Pinterest. At the time of this writing, there are three new extensions in Magento Connect designed to add “Pin It” buttons to a Magento store product page. This article, however, discusses a very straightforward method for manually adding “Pin It” buttons to your product pages without the use of an extension.

Why do this without an extension? If your catalog is very large and you wish to have a¬†“Pin It” button on every product, an extension may be the only practical way to go. There are good reasons to avoid using an extension, however:

  • Extensions can add inefficiency to your store’s code base and slow performance.
  • Extensions rely on your product’s base image and description fields, which may not be the best media to share on Pinterest.
  • Your entire catalog may not be well-suited for the Pinterest audience.
  • Even if you do have a large catalog, the import features of Magento 1.5+ allow you to use the methods described below to deploy highly-customized “Pin It” buttons throughout your website without the drawbacks of an extension.

Adding the buttons manually allows you to craft the best possible image and description of your product to achieve maximum traction among Pinterest users. So, without further adue, let’s begin the tutorial.

1. Create an attribute for the Pinterest code.

The first step is to log-in to the Magento admin and navigate to Catalog > Attributes > Manage Attributes > Add New Attribute. Create a new attribute using the values shown in this screenshot:

pin-attribute

Once the attribute is created, be sure to add it to the attribute set used by the product you’re planning to promote.

Note: Along the way you may receive notices that you have indexes which need to be rebuilt. This is normal. Just go to your index management page and rebuild them.

2. Get Your Pinterest Code & Paste It

Next we’ll head over to the Pinterest “Goodies” page at Pinterest.com where we’ll find a handy tool for generating the code for our buttons. Scroll down until you find the “Pin It” Button for Websites section and simply copy and paste in the URL of your product page and then the URL of the image you want to use to represent the product on Pinterest. Next you’ll write a brief, accurate, and engaging description of the Pin and choose how you’d like your button to be oriented.

pin-tutorial

Once you’ve copied and pasted your URLs, written your description, and chosen your button orientation, you’ll see that Pinterest has generated a snippet of code for your button. Copy the Basic snippet code and you’re ready to head back into Magento. Note: this tutorial covers use of the Basic snippet only. You may use the Advanced snippet as well, but it requires a couple additional steps; feel free to leave a comment if you need assistance with this.

Your clipboard is now loaded with the snippet of your “Pin It” button, so go back into your Magento store admin and navigate to the product you wish to add the button to. Back in Step 1 you created a Pinterest text area attribute and added it to this product’s attribute set. Find the empty text area and paste your snippet. Save the product.

3. Edit Your Magento Template

Now the very last step is to edit your template file to display the custom Pinterest attribute. If you want to place the button on your product detail page, the path to the correct template file is:

/app/design/frontend/default/YOURTHEME/template/catalog/product/view.phtml

Once there, paste the following snippet wherever you would like the button to appear:

<?php echo $_product->getPinterest() ?>

Important: the above snippet assumes that you followed the screenshot from Step 1 and gave your custom attribute the code ‘pinterest’. If you gave it a different code you’ll have to update the php snippet accordingly.

Now save your template file, and that’s it! Your “Pin It” button should now be appearing on your product detail page. Once you get familiar with how Pinterst builds their snippet, you can even see how simple it would be to add the button to your entire catalog using the Import features of Magento CE 1.5+. Doing so may require use of the Advanced snippet, which is really just slightly modified and requires an additional script to be pasted into your header phtml¬†template.

Published by

Brian Lyman

Brian is the founder of Vale Studios, which is really just a stage name for what has been a great experience in freelancing. Brian is currently working under a dedicated contract for a terrific e-commerce retailer, but he uses this space to continue publishing ideas and reflections related to e-commerce, marketing, and Magento.

Leave a Reply

Your email address will not be published. Required fields are marked *