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

Monday 26 November 2012

Integrating Google Places API with Wiki Services

Google Places API, Wikitravel & Wikipedia

As you might already know Google Places API is an extremely powerful mechanism to locate the important attractions on earth. If you have not used Google Places API before please go to the Google documentation which is a good place to start  

This API allows you to retrieve all the attractions pertaining to a particular place on earth. Below are some of  attraction types returned by Google APIs per place:  amusement_park , aquarium , art_gallery ,church ,museum , zoo etc


If you are planning to write a tour travel/trip planning application , then using Google APIs would be a natural choice to automatically retrieve all the tourist attractions available at the tour destination. But the challenge here is that we need a very good description of the tourist attraction which is not directly available in search response. From a user standpoint the search is not complete if it does not include additional details related to that attraction. The question is how do we make the search results more user friendly by associating them to an authentic source of information? I faced this challenge myself while writing a travel app and this is how I solved it ...


If you have used Wikipedia ever you would not deny that it is the most trusted source of information for anything in internet. I made an attempt to integrate Google Places API response with Wiki pages.  Below are the two things I wanted to achieve out of this integration


1. When someone is searching a tour destination automatically display a hyper link to the travel guide to that destination from wikitravel

2.For each search result part of Google Places API response display a hyperlink it to the corresponding Wiki page related to that attraction from wikipedia

You can see a live example which I have written: My TripChatBox Planner


This simple integration was possible because I could observe an interesting naming convention followed by the Wiki pages & Google.

1.Automatically Populate Travel Guide Link

Let us assume a customer is searching for Los Angeles in the above trip planner.
It would useful if we are able to guide the user with a travel guide to Los Angeles.

All we need to do to get a travel guide to this place is to generate a URL pointing Wikitravel website.


  • Here the place name is : Los Angeles
  • Now replace the spaces in the place name with underscore : Los_Angeles
  • Append this to the wikitravel URL as below 

Desktop URL

http://wikitravel.org/en/Los_Angeles

Mobile URL

If you want the travel guide in mobile then you need to construct a URL like

http://m.wikitravel.org/en/Los_Angeles

If the place name does not have a space then its more easy , simply append the place name to wikitravel URL

Desktop URL

http://wikitravel.org/en/London

Mobile URL


http://m.wikitravel.org/en/London


2. Automatically populate a Wiki Link to a tourist attraction

The same approach of replacing spaces with underscore character holds good for displaying a Wiki page associated with an attraction part of Google Places API search response - the only difference is that we point to Wikipedia rather than wikitravel 

For example you will get Westminster Cathedral as one of the attraction as part of the attraction search results associated with London from Google Places API. In order to get a wiki page associated with this attraction simply follow the principle above. 

Two example URLs below

Desktop URL


http://en.wikipedia.org/wiki/Westminster_Cathedral


Mobile URL


http://en.m.wikipedia.org/wiki/Westminster_Cathedral


This integration was possible because the naming conventions followed for  attractions between Wiki and Google Places are matching !!


I hope my article helps you to quickly link two powerful sources of information on earth : Google Places API and Wiki.


If you are interested on a step-by-step tutorial  please refer my blog Developing a travel planning app with Google places , Wiki and Panoramio API.

What I have given above is a short-cut , but there are other ways as well to get useful information regarding places. Some references below


1. The Geolocation API for WikiPedia


2. WikiSherpa API

References :
Next >>: Developing a travel planning app with Google places , Wiki and Panoramio API.