Skip to main content
GDPR Kit CIAM Buyer's Guide Contact Us
Janrain respects your privacy and will treat the personal data you choose to share with us in accordance with our privacy statement.
 

We use cookies to give you the best online experience. By using our website you agree to our use of cookies in accordance with our privacy statement

OK

Mobile Menu

Customization Options of the New Janrain Social Login Widget

By Larry Drebes | Posted on July 20, 2011

This is the first in a series of blog posts by Kevin Long, Janrain Technical Product Manager, to introduce the new Janrain Engage Social Login Widget and provide detail on how to use the new enhancements. 

I’m pleased to announce a new release of the Janrain Engage Social Login Widget this month. The release includes multiple customization capabilities easily accessed from your dashboard, performance enhancements and additional support for mobile products. Today will focus on the new style and layout options available to you, but stay tuned for future posts on:

  • Performance Enhancements
  • Enhanced Mobile Support
  • Expanded Javascript API

Style and Substance

The familiar Janrain Engage Social Login widget is a comforting sign that welcomes visitors to a site and delivers a promise of a frictionless sign-up, login, and return experience, but sometimes one size does not fit all. What if you want to develop your own unique brand experience that expresses your site’s identity and unique audience? It’s always been possible, but now it’s so easy, that it’s fun.

Defining Your Style

If you don’t already have a style guide for your site now would be a great time to get started. It should not be a long document with rules and regulations, but rather a concise guide to the facts of life of designing for your site. It should include the things anyone designing new content for your site needs to know to fit in and get along. At the minimum it should include the dimensions of your content areas, along with your palette of colors and selected fonts so that you can maintain your brand identity as your site grows.

A Simple Style Guide for Example.com:
Dimensions:
The example site column Layout with a header and footer.
Site width is 960px wide.
Header and footer are the full width but only 100px tall.
Columns on both sides are 180px wide.
All areas have 10px margin top and bottom and 20px margin left and right.
Colors:
Header and Footer and Sidebar Background: #333 – Charcoal;
Accent Foreground:
Content Background: #EEE – Off White
Content Foreground: #999 – Dark Grey
Fonts:
All: Sans Serif – 10px

From this you can see where you might put the widget and can calculate the dimensions required. A diagram would be nice but this will do for now.

Layout

You could embed the full size widget in its default glory, center of the content area, but that seems a little heavy handed. You could place just a login link in the upper right to launch a modal pop up window, but that adds an extra click and doesn’t clue the user in to the fact that they will have the ease of social login. You decide that the best of both worlds would be to embed the widget into the upper right section of the header.

Do the math to see how to fit your widget: the height should be the header height minus the top and bottom margin (100px-10px-10px = 80px), and the width should line up with the column width below to keep things orderly (180px-10px-10px = 160px). That’s enough room for 3-4 icons or two columns of good-sized buttons. If you know that nine out of ten visitors to your site use Facebook, Google, Twitter and Yahoo, put those up front and allow the user to see more when they click the next page button.

Select:
Type: Embedded
Layout: Two Column Layout

Drag the handle to adjust the width slider:
Width: 160px
Providers Per Page: 4
Action Text: None

Widget 1

Providers

If providers aren’t already configured, it’s easy to do by clicking the gear icon next to each provider and following along with the wizard steps. Drag and drop them onto the multi-page version of the widget layout.

Style

This is where you can set the background color according to your style guide by clicking on the color swatch to invoke the color picker or by entering the RGB hex codes directly. Select your font, and adjust the button style to be square, very round or in-between to match your site’s general style. The widget preview is automatically updated as changes are made.

Widget 2

When you’re satisfied with the look, proceed by clicking the Save button to apply changes. Another option is to select the Embed option instead of Save and click the Generate Code button to proceed to the next tab to cut and paste code that designers can easily modify later to tweak the configuration right on the site without returning to the dashboard.

Trying It Yourself

Both the traditional widget and the new widget are available. To have access to the new widget, please contact your account representative or Janrain technical support.

In this post, we’ve covered how to adjust the layout and style of the new Janrain Engage Social Login Widget. Next week, we’ll cover performance enhancements and some fine tuning tips to facilitate user engagement on your site.

If you have comments or suggestions about the product or its new features please contact me at Kevin@Janrain.com

Popular Posts

About the author

Larry Drebes

CEO and CTO

Larry founded Janrain in 2005 to address the challenge of managing user identity on the Internet. In its early days, Janrain drove the development of the majority of the open source OpenID protocol libraries that continue to be used today by organizations such as Google and Yahoo!, and was a founding member of the OpenID Foundation, a nonprofit governance organization for the industry. Prior to Janrain, Larry was a co-founder of Silicon Valley startups Desktop.com, a web-based service, and Four11 Corporation. At Four11 Corporation, Larry led the development of its RocketMail product, one of the first Internet-based email systems. Four11 was acquired by Yahoo! in 1997, and its RocketMail product became Yahoo! Mail. Earlier in his career, Larry did software development for Raynet, McDonnell Douglas and A.G. Edwards.

View all posts by Larry Drebes