How to Add a Pinterest "Pin it" button to Miva Merchant product pages
If you’ve not heard of Pinterest yet, you soon will. Pinterest is an online pin-board which lets user pin, organize and share the stuff they love. It’s growth has been amazing. Here’s a chart from Hitwise which shows it’s current growth rate.
Pinterest is mainly used by women. Since my eCommerce site has an audience that is mainly women, I thought it was time to add the “Pin it” button to my product pages. The “Pin it” button is similar to other social sharing buttons such as Facebook, Google Plus+, etc.
Visitors to my product pages will now be able to click the “Pin it” button and easily pin my products to their boards. While users of Pinterest can use the “Pin it” feature that can be added to a browsers toolbar, I feel it’s best to put the button right in front of the visitor. You can check out the button on one of my product pages.
If you only have one page on a blog or a static non template page you want to add the button to, you can get the code here.
If you want to add the “Pin it” button to a Miva Merchant product page, it too is fairly straight forward, but requires a little different formatting of the code.
The following is a break down of the code I use on my Miva Merchant product page template.
<a href=”http://pinterest.com/pin/create/button/?url=http://www.rainebrooke.com/product/&mvta:product:code;.html&media= http://&mvt:global:domain:name;/mm5/&mvte:product:thumbnail;&description= &mvt:product:name;&mvt:product:customfield_values:customfields:subtitle; at Rainebrooke.com” class=”pin-it-button” count-layout=”horizontal”>Pin It</a>
<script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”></script>
There are three areas above (in bold) that you’ll need to change for your Miva Merchant store. They are the URL to the product page, the URL to the product image, and the description you want to use. Note: there should be no spaces in the href code above.
With simple use of the Miva tags you can have each product page populate the “Pin it” button with the correct information. In my code above you’ll notice the formatting I use for my store. Insert the page and image URL format your store uses and then the description you want shown. For my description I use the product name, a custom field for subtitle (which is sometimes part of my products name) and then I end the description with my domain name “at Rainebrooke.com”.
All that’s left is to insert the code into your Miva product page template in the location that you want it displayed.
If your Miva Merchant store offers products which are very visual, target women or are commonly shared on social networks (most stores will at least fall into one of these)… then you’ll want to consider adding the Pinterest button to your product pages.
Note: Pinterest buttons can be added to any site, but as of this post, having a Pinterest account is only available by invite. If you would like an invite, let me know in a comment below (be sure to include your email address when adding your comment). After you’ve joined, please feel free to follow my personal account or my Rainebrooke account.
UPDATE #2: Pinterest no longer uses Skimlinks and has updated their site with a disclosure… You can read more about this here
UPDATE: I just found out something about the Pinterest button that has me a little upset… Pinterest has a relationship with SkimLinks. When someone clicks on a pinned product, the intial link looks like it’s a normal link going to the merchant site, but if you look closely you’ll notice a very quick redirect. SkimLinks turns these normal looking links into an affiliate link for Pinterest. I completely understand the need for Pinterest to make money, but what bothers me is the fact that the link swap is completely undisclosed by Pinterest. How does this affect merchants? If you have Skimlinks as an affiliate, then you could be sending commissions for sales that you were not even aware of. I personally have pinned many of my own products on my Pinterest board. I also have Skimlinks as an affiliate. This means that each time I pin a product, I’m pinning a link which will send commissions to an affiliate for a potential sale that I’m creating myself. Pinterest needs to seriouly take a look at this undisclosed policy of theirs. I wouldn’t have a problem with it if I was aware of it from the beginning. Since it was hidden from me when I decided to add the Pinterest button, I now have decide how I plan on handling it. You can read more about this here.
Sabine Sharp responded:
Would love an invite – am on the waiting list right now
Steve responded:
Hi Sabine, Invite just sent from my Rainebrooke Pinterest account. Personal account here: http://pinterest.com/safinc/
Steve recently posted..How to add Schema.org microdata to a Miva Merchant product page
Sabine Sharp responded:
thank you, Steve – got it!
Bret responded:
Thanks for the info. Pinterest is definitely cool…and addictive.
(BTW this page is rendering really badly for me in Chrome–the ads and images are all over the place. Works fine in Firefox.)
Steve responded:
Thanks Bret. Good catch on the CSS problem in Chrome. I should have it corrected now.
Krissy responded:
Thanks for sharing that, I have not heard of it but I am a reguilar hitwise user and can recognise that there is a real growth rate there, I will keep an eye on this, Im expecting it to be a household name at this rate.
Krissy recently posted..New driver insurance
Natalia responded:
Hi Steve-
Just found your post. I’d love a Pinterest invite if you’re still up for it.
Thanks!
Steve responded:
Hi Natalia, invite just sent.
Steve recently posted..How to Add a Pinterest “Pin it” button to Miva Merchant product pages
Sophia responded:
That is disappointing that pinterest would do that without prior disclosure… I’d be interested in their traffic trends in the future as their users begin to catch on to this. …A serious mistake on the part of pinterest in my opinion
Sophia recently posted..Five Fantastic Date Movies
Steve responded:
I agree Sophia.
Poppy responded:
Hi – could you please send me an invite to the email address I used to leave this comment if you have one spare as I would love to get involved?
Thanks
Poppy recently posted..Best Internet TV Software
Steve responded:
Invite sent Poppy from http://pinterest.com/rainebrooke/
Virginia responded:
Just found your post. I’d love a Pinterest invite if you are still sending invites. Thanks for Please send me an invite to the email address I used to leave this comment.
Thanks for the information on how to Add a Pinterest “Pin it” button to Miva Merchant product pages.
Steve responded:
Just sent you an invite Virginia, from my Rainebrooke account http://pinterest.com/rainebrooke/
Steve recently posted..How to Add a Pinterest “Pin it” button to Miva Merchant product pages
Javier responded:
Thanks for the post about how we are going to add pinterest. You are a genius. I will apply in to my own website and blog site.
Javier recently posted..Miami Wedding Photography
Steve responded:
Thanks Javier.
Steve recently posted..How to set up conversion tracking with Miva Merchant and Adroll ad retargeting
Karyn18 responded:
Hi Steve! Thanks for this informative post! I love Pinterest as much as I love Facebook. I’m starting to be a Pinterest addict!
Karyn18 recently posted..Distributing personal trainer marketing tasks
Steve responded:
Thanks Karyn
Steve recently posted..How to Add a Pinterest “Pin it” button to Miva Merchant product pages
Will responded:
I’m using the following code but having two issues:
Pin It
Issue 1: Only “Pin-It” is being showing – no image.
Issue 2: When I click on “Pin-It” it resolves to this URL which isn’t working:
http://www.galvestonmerchants.com/mm5/%E2%80%9Dhttp://pinterest.com/pin/create/button/?url=http://www.galvestonmerchants.com/mm5/merchant.mvc?Screen=PROD&Store_Code=GHF&Product_Code=KC30581&media=
Any thoughts would be appreciated. I figure I’m close to getting this but something is stumping me.
Will responded:
Have fixed Issue 2, still unable to view the actual pin-it image or see the number of pins for the product.
Steve responded:
Hi Will,
Did you include class and count-layout (horizontal, vertical, no count)?
class=”pin-it-button” count-layout=”horizontal”
Steve recently posted..5 wasteful things that new online websites DO NOT need
Will responded:
I sure did. What’s happening to me now is that when you click on the Pin It button, the box pops up but the URL that’s being passed to it has become corrupted.
The example page is: http://www.galvestonmerchants.com/mm5/merchant.mvc?Screen=PROD&Store_Code=ADM&Product_Code=KAL&Category_Code=ENTERTAINING
If you’ll look at the URL in the box, it has changed the formatting on some of the URL.
For reference, this is the code that I’m using in my PROD in Miva:
Pin It
Steve responded:
Are you sure you have the class=”pin-it-button”
I didn’t see it.
Will responded:
Sure do.
class=”pin-it-button” count-layout=”horizontal”
What appears to be the issue is that I had to change the code to reflect the ascii characters for part of the code you provided. For example:
a href=”http://pinterest.com/pin/create/button/?url=http%3A%2F%2F&mvte:global:domain:name;%2Fmm5%2Fmerchant.mvc%3FScreen%3DPROD%26Store_Code%3DADM%26Product_Code%3D&mvte:product:code;&media=http%3A%2F%2F&mvt:global:domain:name;%2Fmm5%2F&mvte:product:thumbnail;&description=&mvt:product:name;&mvt:product:customfield_values:customfields:subtitle;” class=”pin-it-button” count-layout=”horizontal”
It’s working now, however when a description has a ” in it, the pinterest box cuts it off at that point. I’m guessing that’s due to the same ascii character issue, wondering what causes this and if there’s an easy fix.
This might not be the right place to ask that though. Also, MANY thanks for your help and feedback. Really appreciated!
Steve responded:
Interesting, I didn’t have to encode like that on my product pages. I too had the problem with the “. I only pull in my product name, so if the product name has a ” in it, then I escape it with "
If you figure out another way, please share it.
And glad to help. I enjoy trying to figure out problems like this