Pinterest "Pin It" button secrets
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