Dynamic Pinterest button

Pinterest is the hot new social networking kid on the block and of course they have some goodies you can sprinkle on your website to make it easy to share and link your content with their service. One thing you can’t do easily with their Pin button is dynamically update it to reflect changes to content on your page (ie loading in new content via ajax). A perfect example would be an image slider where as you slide across a list of images you want the user to be able to ‘pin’ the currently highlighted image.

When you use the Pinterest button you go to their goodies page and drop in something like this on your page.

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.dgrigg.com&media=http%3A%2F%2Fwww.dgrigg.com%2Fimages%2Fprofile.jpg&description=DGrigg.com%20specializes%20in%20the%20development%20of%20interactive%20websites%20and%20web%20based%20applications.%20I%20believe%20it's%20not%20what%20you%20know%2C%20it's%20how%20fast%20can%20you%20learn%20it.%20Working%20closely%20with%20my%20clients%20demanding%20projects%20get%20done%20on%20time%20and%20on%20budget." class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>


<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

To get a basic Pinterest button like this

And it gets replaced by an IFRAME to handle all the Pinterest pining. The problem is the javascript file only runs when it is first loaded into the page and there is no built in way to refresh the IFRAME to handle content changes on the page. What you need is dynamic Pinterest button. Thankfully with a little javascript that is exactly what you can have.

refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('div.pin-it').html(html);

    //remove and add pinterest js
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    pinJs.remove();
    js = document.createElement('script');
    js.src = pinJs.attr('src');
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

Essentially what you do is wrap the a tag that Pinterest gives you in a div with a class of ‘pint-it’.

<div class="pin-it"><a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.dgrigg.com&media=http%3A%2F%2Fwww.dgrigg.com%2Fimages%2Fprofile.jpg&description=DGrigg.com%20specializes%20in%20the%20development%20of%20interactive%20websites%20and%20web%20based%20applications.%20I%20believe%20it's%20not%20what%20you%20know%2C%20it's%20how%20fast%20can%20you%20learn%20it.%20Working%20closely%20with%20my%20clients%20demanding%20projects%20get%20done%20on%20time%20and%20on%20budget." class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>

Whenever you want to refresh the Pinterest button, call the javascript function and it creates a new Pinterest button link, replaces the iframe in the div with the new link and then reloads the pinit.js file to get the iframe recreated. Enjoy.

Edit: updated code to include pinJs variable that was left out, thanks Chad for the catch.

For those of you looking for specific steps on how to implement this.

Step 1

Place a Pinterest button on your web page wrapped in a div that has the class pin-it.

<div class="pin-it"><a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.dgrigg.com&media=http%3A%2F%2Fwww.dgrigg.com%2Fimages%2Fprofile.jpg&description=DGrigg.com%20specializes%20in%20the%20development%20of%20interactive%20websites%20and%20web%20based%20applications.%20I%20believe%20it's%20not%20what%20you%20know%2C%20it's%20how%20fast%20can%20you%20learn%20it.%20Working%20closely%20with%20my%20clients%20demanding%20projects%20get%20done%20on%20time%20and%20on%20budget." class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>

Step 2

Include the Pinterest hosted javascript file somewhere on your page, preferably near the closing body tag.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Step 3

Include this javascript somewhere in your page and call it when ever you want to refresh the Pinterest button to point a some new content.

refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>';
    $('div.pin-it').html(html);

    //remove and add pinterest js
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]');
    pinJs.remove();
    js = document.createElement('script');
    js.src = pinJs.attr('src');
    js.type = 'text/javascript';
    document.body.appendChild(js);
}

Any div with the class pin-it will get replaced with a new Pinterest button that will link to the new values passed to the refreshPinterestButton function. You could tweak the refresh function so select only a specific div if you need.

12 Comments

  1. Chad

    pinJs is undefined. Since you’re using jQuery I was able to make it work by adding this:
    var pinJs = js.clone(); before js.remove();

  2. PJ

    Hello,

    I’m not sure I understand how to do this. DO I put the first set of code on the page right before the and the second set of code where I want the button?

    THanks,

  3. Jason

    *Essentially what you do is wrap the a tag that Pinterest gives you in a div with a class of ‘pin-it’.*

  4. Jason

    Also, where does the “pinJs” in

    js.src = pinJs.attr('src');

    come from?

  5. Derrick

    @Jason sorry, that’s a typo see updated code.

  6. PJ

    Thanks Jason. I should just leave this to our programmers.

    So, I do nothing with the code that starts with:

    refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);

  7. Derrick

    @PJ take a look at the 3 steps I have added to show how to implement the dynamic button.

  8. Angela

    Could anyone please show a demo of this method. We have followed the steps, but it isn’t working. I’d like to see it in action to make sure I’m not missing something obvious.

  9. Derrick

    @angela you can see it on this site, http://www.thefabricofourlives.com/closet/ select on of the item in the closet, as you scroll through the items the pinterest button changes based on the selection.

  10. Joe

    When I follow this, I’m getting an error that ‘receiveCount’ isn’t found, and then my pinterest dynamic HTML block is cleared somehow. Any ideas what might be causing this?

  11. Athesia

    Thanks a lot for sharing that! it worked instantly :)

  12. Bastien

    Hi ! Thanks a lot for this article.
    It didn’t work for me because I think that Pinterest updated their script, so that the script tag is removed from the DOM after it finishes executing. Thus, jQuery does not find it. The good thing is that there is no more need to remove the tag. However you now need to specify the url explicitly.
    The updated code would be :

    refreshPinterestButton = function (url, media, description) {
    var js, href, html, pinJs;
    url = escape(url);
    media = escape(media);
    description = escape(description);
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
    html = '';
    $('div.pin-it').html(html);

    //add pinterest js
    js = document.createElement('script');
    js.src = "http://assets.pinterest.com/js/pinit.js";
    js.type = 'text/javascript';
    document.body.appendChild(js);
    }

 

Copyright © 2014 DGrigg Development Inc.