How to create a pinterest like bookmarklet

This is an article teaching how to make a pinterest like bookmarklet to collect images from other site into your site. I am only talking about javascript part.

1. How bookmarklet works

URL strings can contain Javascript code, when the URL is loaded, the script contained is executed. And the script is executed in the current page context. You can write the following code into your browser URL bar.

javascript:alert(document.title);

So we can put the link starting with "javascript:" into HTML A tag, like this:

<a href="javascript:alert(document.title);">click me</a>

It will look like this: click me. Then we can drag this link into the browser's bookmark bar. Now, we have created a simplest bookmarklet! If you click on the bookmarklet, an alert box will appear showing the current web page's title.

2. Write code to bookmarklet

We have already know how to run a javascript snippet on any web page. Now we need write code into the bookmarklet to make it load an external javascript file into the current web page when it is clicked. The javascript part will be look like this:

(function()
{
    var jsdom = document.createElement('script');
    jsdom.src = 'http://path-to-your-site/bookmarklet-content.js';
    document.body.appendChild(jsdom);
})();

Then we encode the script into URL encoded string:

javascript:%28function%28%29%7Bvar%20jsdom%3Ddocument.createElement%28%27script%27%29%3Bjsdom.src%3D%27http%3A%2F%2Fpath-to-your-site%2Fbookmarklet-content.js%27%3Bdocument.body.appendChild%28jsdom%29%3B%7D%29%28%29%3B

It will look like this: bookmarklet 1

Why we do not write javascript code directly into the bookmarklet?

  1. The URL string saved in bookmark can not have too much characters
  2. If we load an external javascript file, the users do not need update their bookmarklet if we add new feature to the bookmarklet

3. Write code to the external Javascript file

I will not demonstrate how to write the code in the external js file in detail, this should be an easy thing for anyone who knows Javascript. But I can give some steps:

  1. Load external css file if you need
  2. Find all IMG tags, then remove images that are too small
  3. Build an interface to show all found images
  4. Bind events on the images to handle user clicks, then pass the parameters to your server.

4. Some important TIPS

  1. HTTPS web pages can not load javascript file on HTTP servers, so if you want your bookmarklet to support HTTPS pages, your external javascript file must be access by HTTPS. Add code into the bookmarklet: if the current page is under HTTPS, load external js file through HTTPS, otherwise load through HTTP.

  2. Because the external js file is injected into an unknown web page, we could not guess the web page has a good css style. To make sure your bookmarklet interface works stable on all web pages, you must write strong css to style your interface. And please make sure your bookmarklet styles do not affect other elements on the web page.

  3. When encoding the javascript code into URL string, please replace "+" into "%20" after a standard urlencode ( PHP built in function)

5. Live demonstration

http://2pm.co/demo/lockerz/

http://2pm.co/demo/bookmarklet/install.html

If you want a bookmarklet for your site and you don't want to write javascript, I will be happy to be hired by you. Please create an Elance project then invite me. My Elance page is here

-- END --