Dynamic Pinterest button

There are sometimes that you want to update the url or the media url of the Pinterest button dynamically. On Pinterest’s developer website there is nothing about it (weird!). I found a blog that suggests to remove & re-evaluate the pinit.js script, an approach that works but is very inefficient. I then by accident found on Github pinit.js uncompressed code and went through it & found out that it’s possible to update a button! Here is how you do it:

Step 1

You add a data-pin-build attribute to the script element that loads pinit.js and you give it a name, which will be the name of the method that you’ll be using for dynamically building Pinterest buttons (named build_pinterest_button in this example).

<script
  type="text/javascript"
  src="//assets.pinterest.com/js/pinit.js"
  data-pin-build="build_pinterest_button">
</script>

Step 2

Generate the new pinterest button (modifying the existing one might not work out because pinit.js replaces the button with a different one with a background image loaded from Pinterest’s servers). Then call the method you provided above on a parent container of the button (not on the button itself)

var $newButton = $('<div>')... //generate the new button
var $container = $(...)        //a parent container of the new button
build_pinterest_button($container[0]);  //re-build pinterest buttons inside container

And that’s it! You’ll get an update Pinterest button the same way as it does at the first time you load the script 🙂

If you run into any issues feel free to ask me (through comments below).

Advertisements

9 thoughts on “Dynamic Pinterest button

  1. Yeah sure!

    See the sample code below (not tested code) which renders dynamically the example given in http://business.pinterest.com/widget-builder/#do_pin_it_button

    var options = {
        url: 'http://www.flickr.com/photos/kentbrew/6851755809/',
        media: 'http://farm8.staticflickr.com/7027/6851755809_df5b2051c9_z.jpg',
        description: 'Next stop: Pinterest'
    };
    
    var img = $('<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />');
    
    var anchor = $('<a>')
        .attr('href', '//www.pinterest.com/pin/create/button/' + '?' + $.param(options))
        .attr('data-pin-do','buttonPin')
        .attr('data-pin-config','above')
        .append(img);
    
    $container.append(anchor);   // add it to whichever container you want to
    build_pinterest_button($container[0]);
    
  2. Checked on github & it seems like the feature is still there (https://github.com/pinterest/widgets/blob/master/pinit_main.js#L1329).

    Checked also the minified code loaded from pinterest’s servers (http://assets.pinterest.com/js/pinit_main.js) and the feature is there (“string”===typeof d.v.config.build&&(d.w[d.v.config.build]=function(a){d.f.build(a)})).

    So the feature is there. If it doesn’t work for you, check if the pinit.js is not loaded more than once in your code. If it does, pinterest widget will read the config data-pin-* attributes from the first script tag and not from the second one (had that issue before).

    If it still doesn’t work, try loading the un-minified pinit_main.js (https://raw.githubusercontent.com/pinterest/widgets/master/pinit_main.js) and debug it to see what’s going on with the configuration options you pass it.

    If that still doesn’t work, pls send a link to your page (if possible) and I can take a look 🙂 Have a nice weekend!

  3. Thanks so much for your reply. I did get this working finally just generating the link in php. The problem was that I was trying to use an image that wasn’t actually on the page (it was the same picture but a larger size). It would create the pin correctly but the popup didn’t have the image. When I loaded the larger image in javascript, everything worked.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s