This is a simple Javascript OpenID selector. It has been designed so that users do not even need to know what OpenID is to use it, they simply select their account by a recognisable logo.
See demo.html source
Please remember after you change list of providers, you must run
generate-sprite.js
generate-sprite.js requires ImageMagick to be installed and works only in Windows (non-Windows users must run ./generate-sprite.sh or ./generate-sprite.rb)
Before running generate-sprite.js for the first time, check its source code and correct line 16 (var imagemagick = '<...>';) to point to ImageMagick install dir.
Please also remember that sprites may be reused: if two localizations have the same provider list that differs only in text, it is reasonable to reuse the sprite: for example German localization is reusing sprite from English localization, Ukrainian localization is reusing sprite from Russian localization, etc.
So, if provider list in root localization changes, localizations that reuse the sprite must be also changed, or unlinked or relinked to new root localization.
how to create new (small) provider icon
a. launch web browser, go to http://
how to create new (large) provider image
a. grab provider logo image from its website
b. resize the image not to exceed 90x30 rect
c. save as the image as
how to plug-in facebook provider
put the following code in providers_large or providers_small:
facebook = {
name: 'Facebook',
url: "javascript:facebook_click();"
}
where facebook_click is something like:
function facebook_click() {
$('#
This code is licensed under the New BSD License.