Affordable, Professional Websites

How To Add a Pinterest Pin to a Magento Go Website

On a recent little project, I was asked to integrate a Pinterest Pin It button onto a Magento Go e-commerce website. Now most social buttons are very easy to install, and work right out of the box, but Pinterest apparently is still figuring out a few things! They do provide a little place on their website where you can customize the button with your url and image link, and grab the resulting code and paste into your website. But what if you need the url and image link to be dynamically generated on your site?

Generally speaking, it’s not rocket science to dynamically insert a url and image link, unless you’re on managed hosting such as Magento Go. Then you have to get a little creative! Below is how I worked around getting the links inserted dynamically, with the judicious use of a little javascript. Keep in mind that your code may vary a little depending on the html in your particular Magento theme.

Step 1:

I put the following code into a Static Block (CMS -> Static Blocks).

1
2
3
4
5
<p>
   <a id="pinterest" href="http://pinterest.com/pin/create/button/" target="_blank">
      <img title="Pin It" src="//assets.pinterest.com/images/PinExt.png" border="0" alt="" />
   </a>
</p>

Step 2:

I needed to replace the url with a custom url that included an encoded url of the current page, as well as an encoded url of the main image on the page.

First, the current page url. That is easily captured via javascript and encoded via the following code:

1
var url = encodeURI(window.location);

Next, in our theme, the main image was wrapped in a link to the full-size image and had an id of “main-image”. Thus to grab the image url and encode it was simply the following:

1
var image_url = encodeURI(document.getElementById("main-image").getAttribute("href"));

Now that I had the two dynamic bits of info, it was time to merge it into the final link to Pinterest:

1
document.getElementById('pinterest').setAttribute("href", "http://pinterest.com/pin/create/button/?url="+url+"&media="+image_url);

Then I noticed that for some reason the Static Block kept stripping out the custom HTML attribute that Pinterest used to show the pin count, count-layout=”horizontal”. The following code takes care of that:

1
document.getElementById('pinterest').setAttribute('count-layout',"horizontal");

Now, to put it all together, the rest of the code looks like this:

1
2
3
4
5
6
7
<script type="text/javascript">
var url = encodeURI(window.location);
var image_url = encodeURI(document.getElementById("main-image").getAttribute("href"));
document.getElementById('pinterest').setAttribute("href", "http://pinterest.com/pin/create/button/?url="+url+"&media="+image_url);
document.getElementById('pinterest').setAttribute('count-layout',"horizontal");
</script>
<script src="//assets.pinterest.com/js/pinit.js" type="text/javascript"></script>

Where to put it! The Static Block kept stripping out various parts of it, so the place that worked for me was in the footer(System->Configuration->Design->Footer).

That’s it! The above code worked well for me in all the major browsers. Did it work for you? Let me know in the comments below!

Posted in Articles, Code Snippets  
Tagged

25 Comment to How To Add a Pinterest Pin to a Magento Go Website

  1. Joe says:

    Can’t get it to work. I put this code into the misc window under footer.
    Nothing changed. ANy idea how I can get it to work under each product?

  2. Carmen says:

    I am a newbie at this, I tried and tried and followed you step by step , but no pinit button, thank you , it seems that you are the only one that was kind enough to explain it to us, thanks again. wish I could get it to work.
    Blessings!
    -Carmen Webb
    lerivinos.com

  3. Andrew Trivette says:

    Two tips:
    First, remember to put the code from step one into a static block that’s included in the product page. Then put the other bit of code in the footer.
    Second, you’ll have to adapt the code depending on your theme to select the image. Each theme may have a different id attribute around the main image or not have a link to the image wrapped around the main image.

  4. Jason says:

    It’s only working partially. I had to change “&” to “&”. In doing so, the url variable gets set but then it cuts off at “media”.

  5. Jason says:

    ok…figured out what the problem is.

    You have:
    var image_url = encodeURI(document.getElementById(“main-image”).getAttribute(“href”));

    Should be:
    var image_url = encodeURI(document.getElementById(“main-image”).getAttribute(“src”));

    *notice that getAttribute should be “src”. Images don’t have a “href” attribute.

    Thanks for sharing this.

    • Andrew Trivette says:

      Jason,
      In my theme I was pulling the image url from the link wrapped around the image because the link referenced a larger higher quality image for Pinterest’s use. If I was trying to pull from the img itself, then you’re correct, it would have needed to pull the src attribute.
      Because every themes implements images differently, everyone will have to alter the code to match their theme.
      Andrew

  6. Ana says:

    Thanks so much for sharing!
    I applied the static block on a Frontend App and displayed it on “All Product Types” in the “Product View Extra Hint” area and It’s working great!
    Just can’t manage how to position it in a specific place. I’m trying with CSS, but it stays in place and just moves the “Pin it” background image and not the box.
    Any idea on how to move both image and box?
    Thanks again! :)

    • Andrew Trivette says:

      Can you post a link to the site in question? I might be able to help if I can see it.

      • Ana says:

        Thanks for your help but i can’t post the link, as this project is still confidential! I can however post the code that refers to this matter.
        At the moment I have done everything you said, I introduced the code you gave for the static block and the footer. Then I applied the static block on a Frontend App and displayed it on “All Product Types” in the “Product View Extra Hint” area.
        What i need is for the Pin it button to be positioned at these coordinates:
        bottom: -57px;
        left: 237px;
        I put these coordinates on the static block code, when it loads i can see it go to the right place, but then it goes straight back to where it is at now. There seems to be some conflicting code here… I’m a beginner so this is all a bit confusing to me.
        Thanks in advance for any help you can give! :)

        • Andrew Trivette says:

          Ok, if it’s jumping after it finishes loading, then the javascript from Pinterest is probably loading some css style information with the button, which is overriding your css styles.
          Without seeing it, I’d guess that adding !important to your css positions (i.e. bottom: -57px !important;) might override Pinterest’s default styling. If that doesn’t work then wrap the pinterest code in a div and position that div.
          Hope that helps!

          • Ana says:

            Hi Andrew!
            I’ve wrapped the pinterest code in a div and positioned it and It’s working great! :)
            Thank you so much for your help!
            :)

  7. Ana says:

    I’ve tried to place the code here, but just can’t … :( sorry.
    And thanks for your time :)

  8. Sydney says:

    It works! Thanks Andrew.

  9. Kylie says:

    Thanks it worked great :)

  10. Linda says:

    This works like a charm! Thank you so much, Andrew!

  11. Sara says:

    I can’t get this to work either! I created the static block and a widget, and added the code to my footer. The “pin it” button shows up exactly where I want it but when I click it, the image doesn’t show up (just a yellow box) and it won’t actually pin. I’m assuming I needed to tweak the code somehow but I’m too much of a newbie to figure it out!

  12. “In my theme I was pulling the image url from the link wrapped around the image ”

    how i can pull out the variable used in my theme to store the main image ?

  13. Hilary says:

    Hi Andrew,
    I have a weird theme I guess. I have the front-end part working but the script will not grab the picture. I’ve tried all the combinations on this page and devoted hours to it. Any chance you could take a look?

  14. kyle says:

    Does anyone know the specific code for the t shop theme to get the image to appear?

  15. ed says:

    Thanks so much. worked 1st time. appreciate the how-to. sending you good vibes!

  16. Jared says:

    Worked like a charm on the Lace theme. Thank you for sharing the code. The Magento Go examples are few and far between.

  17. Hi Andrew, great tutorial, thank you.

    Question – the button displays correctly on the site and connects with Pinterest. However when you hit Pin It it comes up with this error message – “Whoops! You need to upload an image or provide the “image_url” parameter.

    I think you have covered it in your Q&A but I’m finding it difficult to know what bit of the code I need to modify for the Magento theme I’m using – here’s the site http://www.lookerandbell.co.uk.

    Can you suggest what code change I need to make?

    Many thanks.

    David.

    (for the moment I’ve turned off the button on the site but can quickly reinstate if you need to see it in place.

  18. This worked, although not in the entire store. Recent viewed product pages didn’t. They resulted in 404 by nginx.

  19. The URL (address) of the thumbnail image, or the product image that is shown in product listings.

  20. I’ve got the same problem with magento refusing to display images. Could you please post the lines of code that were causing the problem for you?