Signing up for a new website is a little bit like dating. As a brand, you need to get enough information from the website visitor to make their experience pleasant and useful. If you ask for too much information, however, they click away, never to return.

Social login is a great way to make it easy for visitors to give you their information. You just need to make sure they know what information they are giving you, and what’s in it for them to give you that info.

You can start your relationship off right by following just a few easy, clear steps.

Be Clear About What You Want

Facebook has made it very easy to clearly delineate what permissions you are asking for, and why you want these permissions. In addition to lining up each permission in a bullet point, Facebook gives you the ability to show a custom message for the registrant.

This little-used feature of Facebook registration apps can make a difference in your relationship with your customers. Learn how to customize these fields here.

Don’t Ask for Too Much Too Fast

Facebook supports the notion of progressive profiling. This means you can ask for a limited set of data up front to get the relationship started at registration and then later, when the relationship is ready, you can ask for additional information.

The key is to progressively ask for only the profile data you need, when it’s relevant to the action they want to take. This means you can ask for permission to share on their behalf when the user clicks a Share button, ask for movie interests when they join a ticket sweepstakes, or their friends’ info when its time to invite them to a party. Check out our detailed post on how to tackle progressive profiling, Don’t Be A Data Creeper.

What’s In It for Me?

Just because you know why people should register on your website, that doesn’t mean site visitors know. Lacking a clear call to action with associated benefits is one of the most common mistakes with online registration. Just like in dating, if you want something, you need to be clear about it.

Yamaha does a great job of this on their site, and offer both social login and registration with a Yamaha account identity to get the relationship started.

When the sign-in button is clicked, Yamaha clearly outlines the benefits of an information exchange.

As the web hurtles ever closer to dynamic, relationship based interactions, it is important for brands to become more engaging. Being clear about registration expectations and data exchanges is a small step in that direction.

What are some great permission screens that you have seen?

The style and theme system is complex and powerful. It is used to skin the appearance of Android applications. It provides the default values for the attributes of each View on the screen. These attributes define the bulk of the pixel by pixel appearance of the screen. The remainder is provided by the Android layout system. This post assumes familiarity with the layout system, e.g. the XML files which define View hierarchies.

To get started with themes, it is easiest to begin by extending an existing theme that is similar to your desired appearance. Then you can tweak individual attributes, but let the parent theme take care of attributes out of scope of your customization. Commonly used base themes include the Holo theme, introduced with Honeycomb, and the original Android theme, Theme. Both Holo and Theme come in light and dark variants.

Creating a Custom Android Theme

To implement a custom theme create or edit MyAndroidApp/res/values/themes.xml and add the following:

<resources>
    ...
    <style name="MyCustomTheme" parent="android:style/Theme">
        <item name="android:textColorPrimary">#ffff0000</item>
    </style>
    ...
</resources>

In your AndroidManifest.xml apply the theme to the activities you want to style:

<activity
    android:name="com.myapp.MyActivity"
    ...
    android:theme="@style/MyCustomTheme"
    />

Your new theme will be applied to your activity, and text is now bright red.

Choosing a Theme to Extend

Android themes are rich mediums, and there are many attributes defined that affect the style of the user interface. Many of those attributes must be defined for proper operation. Because there are so many attributes, and many attributes must be defined for proper operation, it is best to extend an existing theme.

The parent attribute of the <style> element controls which theme your custom theme will extend. There are four base Android themes and two Janrain themes that are excellent candidates for extension:

• Theme: This is the base Android theme introduced with the first version of Android. It is a dark theme with light text and works on all versions of Android. It may vary from device to device according to manufacturer or carrier alterations (such as HTC Sense)
• Theme.Light: This is a light variation of Theme. It displays dark text on a light background
• Theme.Holo: This was the new Android theme introduced with Honeycomb. It features more “modern” styling, and it is only available on Android versions 3.0 and above. Theme.Holo cannot be altered by the device manufacturer or carrier. It can still be extended by application themes, however
• Theme.Holo.Light: This is a light variation of Theme.Holo

There are also two themes bundled with the Janrain Engage for Android library which adapt between Theme and Theme.Holo depending on the running version of Android:

• Theme.Janrain:This is a dark theme that selects between Theme and Theme.Holo depending upon the running version of Android
• Theme.Janrain.Light: This is a light variation of Theme.Janrain

Be aware that the Holo theme is not available on Android versions 2.3 and below. If you wish to customize the Holo theme and simultaneously support these lesser versions of Android, you will need to use the theme selector technique to use the appropriate theme one each version of the platform.

Therefore, if you would like to use Theme.Holo theme where available, and fall back to Theme elsewhere then you should extend Theme.Janrain.

Colors

Defining Color Drawable Resources

If you wish to present the Janrain Engage user interface themed with your application’s color, first define your color as an Android resource. To define a custom color, create or edit MyAndroidApp/res/values/colors.xml and add the following:

<resources>
   ...
   <color name="my_custom_color">#ff1a557c</color>
   ...
</resources>

Note: If your custom color has a dark value then you may wish to have your custom theme extend Theme instead of Theme.Light.

Applying Colors to Theme Attributes

Your color resource can then be applied to some theme attributes, such as the window background and the primary text color, by adding <item> elements to your custom theme.  These attributes are defined in your styles.xml file. For example, to apply the custom color to the window background, add the following two <item> elements to your custom theme, defined in MyAndroidApp/res/values/styles.xml file:

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

The first <item> controls the background Drawable of the window (a color is a type of Drawable.) The second <item> sets the cache color hint, used by the provider list screen in the library, and other instances of ListView. The windowBackground attribute also accepts Android Drawable values. Drawables include XML defined gradients, XML defined colors, and images. If you use a non-solid-color Drawable for a background you must set android:colorBackgroundCacheHint to #00000000.

Applying Custom Themes to the Janrain Engage for Android User Interface

Finally, to apply your custom theme with your custom background color to the library user interface, edit your AndroidManifest.xml and change the android:theme attribute of the activity definition that has the attribute android:name=”com.janrain.android.engage.ui.JRFragmentHostActivity$Fullscreen”:

<activity
    android:name="com.janrain.android.engage.ui.JRFragmentHostActivity$Fullscreen"
    android:configChanges="orientation|screenSize"
    android:theme="@style/MyCustomTheme"
    android:windowSoftInputMode="adjustResize|stateHidden"
    />

For proper operation of the library on Android tablets you will also need to provide a dialog variant of your theme. The dialog variant should extend an existing dialog theme. For example:

<resources>
    ...
    <style name="MyCustomThemeDialogVariant" parent="android:Theme.Janrain.Dialog">
        <item name="android:windowBackground"<@color/my_custom_color</item>
        <item name="android:colorBackgroundCacheHint">?android:windowBackground</item>
    </style>
    ...
</resources>

The dialog variant should be applied to the activity element of your Android manifest with the attribute android:name=”com.janrain.android.engage.ui.JRFragmentHostActivity”:

<activity
    android:name="com.janrain.android.engage.ui.JRFragmentHostActivity"
    android:configChanges="orientation|screenSize"
    android:theme="@style/MyCustomThemeDialogVariant"
    android:windowSoftInputMode="adjustResize|stateHidden"
    />

Using a Custom Nine-Patch With Buttons

A nine-patch drawable is a special kind of image which can be scaled in width and height while maintaining its visual integrity. Nine-patches are the most common way to specify the appearance of Android buttons, though any drawable type can be used.

Example nine-patch PNG.

Notice the one pixel black lines around the edge, they control the scaling of the image.

1. Save this bitmap as MyApplication/res/drawable/my_nine_patch.9.png
2. Define a new style (you can define the new style in the same file that you defined your custom theme from Creating a Custom Android Theme above) …:

   <resources>
      ...
          <style name="MyCustomButton" parent="android:Widget.Button">
              <item name="android:background">@drawable/my_nine_patch</item>
          </style>
      ...
   </resources>
   

3. Apply the new button style to the buttonStyle attribute of your custom theme:

4. <resources>
      ...
          <style name="MyCustomTheme" parent=...>
              ...
              <item name="android:buttonStyle">@style/MyCustomButton</item>
          </style>
      ...
   </resources>
   

Now the buttons in the activities your theme is applied to have custom images. However, you may notice that they don’t change appearance when selected. Read Selector Drawables below for an introduction to using multiple drawables to define one drawable that changes based on state.

Other Kinds of Drawables

Drawables are the Android resources used to define the pixels drawn to the screen. (And Android layout resources define what drawables are drawn where.) There are many different kinds of drawable resources.

Selector Drawables

A selector is a drawable which changes based on state. Here is an example selector which switches between the example.9.png nine-patch described above when unselected and your custom color defined above in Defining Color Drawable Resources. For example, create MyApplication/res/drawable/my_custom_selector.xml and add the following:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@color/my_custom_color" android:state_pressed="true"/>
   <item android:drawable="@drawable/example"/>
</selector>

Now you can use this selector as the drawable applied to the buttonStyle attribute in your custom theme and buttons will change appearance based on their state:

<resources>
   ...
           <item name="android:background">@drawable/my_custom_selector</item>
       </style>
   ...
</resources>

Solid flood fill is not the right appearance for selected buttons in your application. You could copy your custom nine-patch and apply a visual affordance for the pressed state and use the altered nine-patch for the pressed state.

Gradient Drawables

Gradients are a great way to polish the appearance of an application and they are very easy to define and use in an Android theme. For example, create MyApplication/res/drawable/my_gradient.xml and add the following:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
 
   <gradient
       android:angle="270"
       android:startColor="#1a557c"
       android:endColor="#62c4e9"
       />
 
</shape>

Then, apply the gradient to the windowBackground attribute of your custom theme:

<resources>
   ...
       <style name="MyCustomTheme" parent=...>
           ...
           <item name="android:windowBackground">@drawable/my_gradient</item>
           <item name="android:colorBackgroundCacheHint">#00000000</item>
       </style>
   ...
</resources>

Note: Because you are using a gradient as the background you must set the cache color hint to #00000000 for the proper operation of ListView.

Theme Attributes

Themes offer a wide variety of attributes with which you can control the appearance of an Android activities user interface. For more information see the Android Styles and Themes guide, the Android theme.xml source, and the Android attrs.xml source. Here is a short list of commonly used and otherwise useful Theme attributes you may wish to specify:

(From the Android platform data/res/valus/attrs.xml)

• colorBackgroundCacheHint
  This is a hint for a solid color that can be used for caching rendered views.  This should be the color of the background when there is a solid background color; it should be null when the background is a texture or translucent.  When a device is able to use accelerated drawing (thus setting state_accelerated), the cache hint is ignored and always assumed to be transparent.
• textAppearance
  Default appearance of text: color, typeface, size, and style.
• textColorPrimary
  The most prominent text color.
• textAppearanceLarge
  Text color, typeface, size, and style for “large” text. Defaults to primary text color.
• textAppearanceMedium
  Text color, typeface, size, and style for “medium” text. Defaults to primary text color.
• textAppearanceSmall
  Text color, typeface, size, and style for “small” text. Defaults to secondary text color.
• buttonStyle
  Normal Button style.
• listDivider
  The drawable for the list divider.
• windowBackground
  Drawable to use as the overall window background.  As of Honeycomb, this may be a selector that uses state_accelerated to pick a non-solid color when running on devices that can draw such a bitmap with complex compositing on top at 60fps.
  There are a few special considerations to use when setting this drawable:
  • This information will be used to infer the pixel format for your window’s surface.  If the drawable has any non-opaque pixels, your window will be translucent (32 bpp).
  • If you want to draw the entire background yourself, you should set this drawable to some solid color that closely matches that background (so the system’s preview of your window will match), and then in code manually set your window’s background to null so it will not be drawn.
• windowFrame
  Drawable to use as a frame around the window.
• windowActionBar
  Flag indicating whether this window should have an Action Bar in place of the usual title bar.
• alertDialogTheme
  Theme to use for alert dialogs spawned from this theme
• progressBarStyle
  Default ProgressBar style. This is a medium circular progress bar.
• actionBarStyle
  Reference to a style for the Action Bar.

Similar to prior analyses, we have taken a sampling of sites in prominent industry verticals to measure trends in consumer login preferences. While the overall story arc is similar across these verticals, there are disparate preferences within each segment that merit attention.

On media websites, Facebook leads in popularity with 43% of users preferring to register or login using their Facebook profile. Yahoo! and Google are running strong as the second and third most popular providers at roughly 19% apiece. Despite a modest decline over the past two quarters, Yahoo! continues to perform best in this vertical – perhaps as a result of its realignment as a content network during the past several years. Twitter’s share within this segment has yet to accelerate, but its potential for future growth makes it worth keeping an eye on, particularly given its focus as a network for content discovery.

For marketers and digital strategists managing these types of sites, effective engagement with readers begins by offering incentives for registration. Whether it is to comment on news articles, join a vibrant community, or unlock premium content, visitors need a compelling reason to share their personal information and create an account on your site. Bicycling Magazine, which is a property of Rodale, makes the benefits of registering clear to its visitors. And because registration is offered with a social identity, the process is a breeze, requiring only two clicks. Goodbye lengthy forms and struggling conversion rates.

Similarly, The Sun, one of the largest daily newspapers in the United Kingdom, prompts readers to easily register or login with a Facebook or Twitter identity in order to post comments on articles.

Social login implementations such as these generate tangible business results for content and community sites. For example, lifestyle magazine Divine Caroline, a Meredith property, saw a nearly immediate 12% increase in registrations after adding social login to its registration flow.

On entertainment and gaming sites, which tend to be more community-oriented, Facebook again leads the pack by a wide margin. But 57% of users prefer to login with a different social identity. Within this vertical, Google earns 23% share as the second most popular network. It’s also worth noting that while Windows Live (Hotmail/MSN) maintains an 8% share of social logins on entertainment and gaming websites, this is a 6% decrease from the previous quarter.

More than ever, people are using their social networks to share interesting news articles and content with their friends. On media sites, it is now common to be presented with the option to share an article comment with Facebook friends, Twitter followers or LinkedIn connections.

Across the websites of all Janrain Engage customers, Facebook and Twitter are far and away the most popular sharing destinations, but Yahoo!, LinkedIn and MySpace maintain preference on niche sites that are catered to their audience (B2B sites for LinkedIn and music sites for MySpace).

Creating a viral loop of referral traffic between your site and the social networks requires more than just dropping a few generic share buttons on various pages. Social sharing needs to be contextually integrated into the user experience on your site. For example, VH1, an MTV property, lets music fans share videos and their reactions to them after posting comments.

When implemented strategically, social sharing can become a steady and valuable source of qualified traffic to your site. Citysearch, for example, generates an average of 28 referral visits to its site each time a member shares his or her review of a local business to a social network stream.

Social login and sharing open the door to collecting a rich amount of profile data from a user’s social network account, and each social network provides a different set of profile data on their users. This information can be used to speed registration, create community by leveraging a user’s social graph (friends), and enable personalization of content or email campaigns based on a user’s demographics or interests. Here is a look at the profile data that users can choose to share with your site from their social network:

Social login has achieved significant adoption on media and entertainment websites during the past several years. Understanding how consumers leverage their social identities to connect and interact on these sites helps you tailor content your audience, improve engagement and drive higher CPMs from advertisers.

Janrain Engage for Sonny

WordPress 3.3 Sonny, launched earlier this month and we have since released a new version of our Janrain Engage for WordPress plugin including our latest social login widget and some cool new features.

Highlighted new features

• Supports WordPress version 3.3
• Updated with latest Janrain Social Login Widget
• See which Social Providers people are logging in with on your site. This information is included in the Users section of your WordPress Dashboard.
• Added new WordPress shortcodes to easily personalize content that is different for visitors that are and aren’t logged into the site.

Janrain Capture for Magento Extension Released

Now it is even easier to integrate Janrain’s hosted registration into your sites built using the Magento platform. Our latest Janrain Capture for Magento Extension integrates seamlessly with the Janrain Engage plugin (social login and social sharing) we released earlier in 2011.

• Centralized and hosted user profile database
• Integrated with Janrain Engage to sign in with a variety of social identity providers
• Supports single sign-on

Please note that you need to license Janrain Capture to use this extension.

Perhaps the most persuasive evidence that Facebook and Twitter augment search rankings comes from SEOmoz. In April, they published some insightful correlation data demonstrating the degree to which links shared on social networks correspond with improved search engine rankings.

Source: SEOmoz

This analysis uses the Pearson product-moment correlation coefficient to measure how strongly Google rankings are associated with quantity and types of links on social channels. The data represented in green is most germane to this topic because it controls for exogenous factors, such as the possibility that pages frequently shared on social networks rank well simply because they are good predictors of pages with lots of quality backlinks from the rest of the web.

SEOmoz found that Facebook shares are more strongly correlated with high search engine rankings than Facebook Likes or Twitter shares. While a correlation coefficient of 0.17 isn’t usually considered strong in a statistical analysis, it is noteworthy here given the number of exogenous variables at play that also influence search rankings. The data confirms that shares on Facebook likely have a positive influence on SEO, and Facebook shares are more influential than Likes or shares on Twitter.

For search marketers and social media strategists seeking to translate these findings into business strategies, consider these takeaways:

1. Expect social feeds to continue to exert greater influence on search engine rankings.
   As social networks become a more prominent channel for information discovery on the web, search engine algorithms will adapt to reflect the evolving ways in which people find and consume content. Google and Bing have already experimented with incorporating social feeds into search results, but their next evolution may involve significant algorithm changes to mirror rankings with trending content on social channels.
2. Prioritize user-generated contextual social sharing ahead of Likes.
   The Like button is a valuable tool to extend your brand reach on Facebook, but user-generated social shares produce better engagement rates and correlate more strongly with high search engine rankings. To drive more backlinks to your site and increased utilization of social sharing, ensure that the option to share is strategically integrated across multiple user touch points – from comments, to purchases or published reviews, and event-based triggers such as achieving a game high score.
3. Make your content discoverable within social feeds as well as search.
   Even if your brand boasts a large stable of fans and followers, your Facebook posts may not be achieving as many impressions as expected due to EdgeRank, Facebook’s news feed algorithm. Because consumers interact with their friends more often than with brands on Facebook, shared content from peers yields more impressions and clicks than posts from your brand page. To maximize click-through rates on shared content, ensure that your social sharing tool incorporates rich media such as thumbnail images into the activity object, and enable users to personalize the message shared to their stream.

mixi is a Social Networking Service that launched in  2004. It allows friends to connect and make new acquaintances in a fun, and convenient way. At this time mixi has over 25 million users world wide.

The mixi identity provider is now available to all Janrain customer’s and is ready for configuration in their Janrain dashboard.

How to Add mixi to Your Social Login Widget

If you are an existing Janrain customer, simply log into your application dashboard to configure mixi as a login provider for your social login widget.

Learn More About Janrain Engage

Don’t have Janrain Engage yet? Visit our Janrain Engage product page to learn more about how our solution can help you increase online registration rates and improve user engagement with our social login and sharing tools.

In our recorded webinar, you’ll learn about the potential Viral Loop that Jeremiah describes as what occurs when you integrate social media on your brand site and the community grows participation and engagement for you. Beyond frameworks, Jeremiah will give you an actionable roadmap to evolve your site into the ultimate social brand site that is utilizing social media to drive traffic to and activities on your own site.

Real world examples showcase leading brands who have successfully added a social layer to their site to acquire new users, increase on site engagement and leverage rich social profile data to improve marketing programs. Stay tuned for the bonus material toward the end where Jeremiah shares his predictions for social media marketing in the coming year.

Tips to Extend Your Social Strategy to Your Site from Janrain on Vimeo.

Coupled with increasing reluctance from consumers to maintain distinct usernames and passwords on each frequently visited site, brands are rapidly seeking ways to leverage social network identities within their own properties. Through a secure process known as social login, these identities can be used to speed up registration on sites across the web. But which identities do people prefer both for sign-in and content sharing?

Each quarter, we seek to answer these questions by analyzing social login and social sharing preferences for online users across the 365,000 websites using Janrain Engage.  Today, MediaPost published an update of our quarterly social login and sharing data.

Download full PDF here.

What do these findings mean for your business? As you work to add a social layer to your site to improve engagement and drive conversions, social login and sharing should be fully integrated. We hope these findings provide a useful benchmark as you optimize your on-site social media strategy.

For Marketers:

Social login helps solve the challenge of how to collect more accurate data on your users without sacrificing registration conversion rates. Social login shortens the registration process to a single click and gives you instant access to rich demographic, psychographic and social graph data on your users. This social profile data can be leveraged for content personalization or product recommendations and more tailored segmentation and targeting. Social sharing lets your users broadcast content and activities from your site to their social networks, increasing brand advocacy and creating an effective channel to drive qualified referral traffic to your site.

For Developers and Technologists:

It can be a big headache to implement the plumbing to each social network API on your own. These networks use different protocols under the hood, such as OpenID, OAuth, hybrids and proprietary technologies. As a result, coding social login on your own requires a significant investment of time, engineering expertise and ongoing maintenance as the networks change their APIs, often without advanced notice. Your social login and sharing solution should allow you to easily connect to all the social networks by writing once to a single API. By cutting deployment times from weeks or months to a couple days, you can focus on your core competency while trusting that the social and user management tools on your site just work.

By offering a social login opportunity early in a user’s visit you not only remove any friction but the information you receive during that exchange can help you improve that very visit. If a user logs in using their Facebook profile, for example, you’ll know by their interests, activities and other “Likes” that she’s probably interested in buying diapers, bottles or toys for her baby. Why is this important?

Our research shows that the majority of users prefer to use existing profiles like Facebook, Google, Twitter or LinkedIn to login to websites rather than set up new accounts or face a lengthy registration form at checkout. People are also starting to realize that the experience on your site can be improved and personalized when they give you access to some of their personal information. So the user in the above example would prefer to see offers for diapers rather than men’s cologne, and is likely to provide access to her profile data that allows you to customize messages or ads to her.

Driving Registrations

Many of our customers see an immediate increase in registrations and a decrease of site or cart abandonment when they implement our Janrain Engage Social Login widget, with some claiming up to 80% increases in site sign-in.

Interscope Records witnessed an immediate 10% increase in site registration when they implemented Janrain Engage Social Login. With social login as an option at over 125 of their artist websites, Interscope Records is making it easy for fans to connect with the artists and other fans, and share content they discover on the site without having to fill out a long form.

Savings.com has doubled its sign-up rate since implementing the Janrain Engage Social Login feature on their site.  According to Pete Mauro, head of product management at Savings.com “It really lowers the barriers for a lot of people.”

Getting Results

Offering site visitors a choice of login providers when they’re ready to sign in certainly removes hurdles, giving users an easy process that allows them to avoid setting up and remembering yet another password. Another critical component to increasing site registrations is to give users compelling reasons to log into your site to begin with. Whether it’s exclusive content or offers, access to the community area, or personalized product recommendations, setting up a new account is a bit of a “give and get” game where users will give you personal information based on what they can expect to get in return.

Every site owner understands and appreciates the value of registered users and is seeking new ways to encourage site sign-in. Sometimes overlooked is an approach that removes the friction and makes the actual login process simple, easy and fast for your users. Social login achieves those goals by letting them use something they already have: a social profile.

Ready to increase registrations on your site? See Janrain Engage in action during this short video.