Ten 23 Media

pinterest

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.

Discussion (25)

There are 25 responses to “How to Add a Pinterest “Pin it” button to Miva Merchant product pages”.

  1. Would love an invite – am on the waiting list right now ;)

  2. 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.)

    • Thanks Bret. Good catch on the CSS problem in Chrome. I should have it corrected now.

  3. Krissy responded:

    · Reply

    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 insuranceMy Profile

  4. Hi Steve-
    Just found your post. I’d love a Pinterest invite if you’re still up for it.
    Thanks!

  5. 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 MoviesMy Profile

  6. 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 SoftwareMy Profile

  7. 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.

  8. Javier responded:

    · Reply

    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 PhotographyMy Profile

  9. Karyn18 responded:

    · Reply

    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 tasksMy Profile

  10. 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.

    • Have fixed Issue 2, still unable to view the actual pin-it image or see the number of pins for the product.

      • 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 needMy Profile

        • 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

          • Are you sure you have the class=”pin-it-button”
            I didn’t see it.

          • 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!

            • 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 :-)

Leave a Comment

Your email address will not be published. Required fields are bold.

CommentLuv badge