Thursday 29 November 2012

"Pin It" button secrets - The Javascript Bookmarklet

Pinterest "Pin It" button secrets

Have you ever used Pinterest and wondered how the "Pin It" button works? 


I'm a big fan of Pinterest and I really like the underlying concept of pinning and the way they do it. In this article I'm going to explain the technology secrets behind the powerful "Pin It" button. You should be able to develop your own pinning buttons if you understand the concept involved here.

Once installed in your browser, the Pinterest “Pin It” button lets you grab an image from any website and add it to one of your pinboards. 

Dissecting "Pin It" button

"Pin It" button is a classic example of JavaScript Bookmarklets : refer to the Wiki page for more details on writing a bookmarklet in JavasScript. In simple terms a bookmarklet is a very simple piece of JavaScript designed to add one-click functionality to a browser or web page. In our case , if you click the "Pin It" button while browsing any webpage , it automatically grabs all the pinnable images and pops up a window from which user can choose any image and attach it as a thumbnail to the bookmark being added to the Pinboard.

Now let us have a close look at the Pin it button. If you right click on the "Pin It" button and copy the link address you will find a script as below 

javascript:void((function(d){var e=d.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e)})(document)
);

This is what happens when you click on the "Pin It" button internally
  • What we have above is a  Javascript anonymous function to download another JavaScript from the server
  • Initially it creates a script element, type text/javascript.
  • Next it sets the source of the script as another Javascript sitting in the server - In this case assets.pinterest.com/js/pinmarklet.js
  • A random number is passed as a parameter to the above JS 
  • Next it adds the script element to the current page - Now we are all set to download and execute the JS file sitting on the server.
  • A popup window appears with all the pinnable thumbnail images - this is the output of the smart work performed by the JS file when it gets invoked.  It is smart enough to hold any complex logic to influence the behavior of the page being browsed.

Question : Why are we downloading another JavaScript file from the server? Can't we write all the JavaScript logic in-line?

The answer is very simple , there is a limit on the number of characters which can be part of the anonymous function above - you cannot have more than 2000 characters in your bookmarklet , hence all the complex logic is delegated to the JavaScript file sitting in the server. The other elements part of the anonymous function invokes this JS file.

So if you want to understand more logic behind the "Pin It" button you don't require further help : simply go through the source of above JS file.

There are many smart things you can do using bookmarklets. I have given some very useful references below which gives you a very good feel of the usage and logic behind some smart Bookmarklets like Pinterest "Pin It" button. 

Even though Bookmarklets existed for quite sometime now , I don't think developers have really used its power to reap all the possible benefits in our real world applications. That is why "Pinterest" has become a real trend setter - and all the credit goes to the smart "Pin It" button. 

References

3 comments:

  1. Nice post! Do you know if it's possible to exclude images from showing up on the page after pressing a button with the js behind it? (I have a preloader I don't want to be pinned)

    ReplyDelete
    Replies
    1. Sorry , not sure if I understood your question correctly..Are you trying to customize pinmarklet.js for your own purpose?

      Yes, you should be able to introduce any logic in the underlying JS file. For example the Pin It button does not allow to Pin if the image size is less than a specified dimension , which is programmed in the pinmarklet.js

      Delete
  2. http://zodiacaffinity.blogspot.co.uk/

    Affinity is a unique facebook application for sun sign(zodiac sign) compatibility check(affinity match) between you & friends. It allows people to compare sun sign predictions with real word evidence. It's capability for endorsing/badging people's qualities makes it unique from other applications. Affinity is the first application of its kind designed to seek the real truth behind sun signs by allowing people to match sun sign predictions with ratings from friends.

    ReplyDelete