Javascript snippet to change your regular OpenID box for a provider combo box.

• You have total control over the provider list
• There is an inline mode that behaves nicely with your original textbox only layout
• Styles are only used for basic positioning, so it blends into your page.

Based on:

• http://code.google.com/apis/accounts/docs/OpenID.html#loginUI
• http://sites.google.com/site/oauthgoog/UXFedLogin
• http://ma.gnolia.com/signin/

Alternatives:

• IDSelector (http://www.idselector.com/)
• Openid Selector (http://code.google.com/p/openid-selector/)

Depends on:

• JQuery

Works on

• Firefox 3.0
• Safari
• IE6 and 7

Usage

Add this to your signin page:

<script src="/js/open-selector.js" type="text/javascript"></script>
<script type="text/javascript">
    open_selector.openid_form_id = 'openid_form'; // ID for the OpenID login form
    open_selector.openid_box_id = 'openid_url'; // ID for the OpenID URL box
    open_selector.init();
</script>

Screenshots

Plain OpenID box

Open-selector default layout

Inline layout