"Pin It" button source code (pinterest.com)

Question

Does anyone have idea about how to implement something like "PIN IT" button in pinterest.com? From a high-level, I understand what it does but not in detail. You click on "pin it" bookmark, and then you scrape the site source code to find out images with width and height greater than some threshold. The scraping of the page source to find images can happen on the client side or on the server side. What's the best way to achieve something similar?

Could some one throw insight into their implementation?

Answer 1

Actually this kind of bookmarks usually do this:

When you click on Bookmark, then it will run an JavaScript code by redirecting to following URL:

javascript: void((function () { SOME_CODE })());

Then SOME_CODE will execute. In this case Pin it button will run following:

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

Which will end up adding new tag to your document body. Pin It will add "pinmarklet.js" file. Note that "?r=' + Math.random() * 99999999" part is only for get by passing cache from client side by generating new number every time randomly.

If you want to find out exactly what happened next, then you need to take a look at their JavaScript source code. But it's easy to look into DOM and grab what ever you want to grab (Images, Video Links, ...) and apply your logic.

I hope this helps :-)

Answer 2

I create a function on javacript to share custom images with pinterest passing the source of the images that you would like to share.

Code: https://github.com/mustaine/Pinmarklet

I hope that it helps.