That’s why we’re excited today to launch a new integration with Google+ Sign-In.  With this product launch, Janrain customers can streamline the registration process for Google users, and gather additional profile data to better engage with and improve their experience.

Here is a run down of what’s new:

Simple, secure login

Google+ Sign-In helps improve registration conversion rates by offering a convenient and secure way for visitors to sign up on your site. We’ve made it really easy for websites to get up and running with Google+ Sign-In via Janrain Engage Social Login.

Gather Additional Public Demographic Information

In addition to a verified email address and a first and last name, users can now choose to share additional information from their Google+ profile when they log in to your site. Collect demographic and psychographic data such as gender, location, birthdate, interests, work history, education history, relationship status, profile photo and any other information made public within the user’s Google+ profile.

Access Google+ Social Graphs

Google+ Sign-In enables users to provide access to their Google+ circles of friends. Utilize this social graph information to let users discover what their friends are up to on your site, interact with friends, and surface content recommended by friends.

Drive Adoption of Android Apps

Let your website users instantly download and install your mobile or tablet app to their Android device.  Your users with Android devices don’t need to visit the Google Play store to install your Android app – instead, you can easily prompt them to do so in a single click when they sign in to your site with their Google identity.

You are invited to check out Google+ Sign-in on NPR, HSN and several Universal Music Group artist websites, including LadyGaga.com, Eminem.com and JustinBieberMusic.com.

The team at Janrain has been hard at work, and we are excited to offer the benefits of Google+ Sign-In to you. As always, your feedback is welcome.

This dynamic creates challenges around getting the right message to the right person across multiple channels, including web, mobile, desktop apps, social media and more. Marketers today need to ask themselves, do I really know who I am marketing to when data exists in multiple silos? The good news is, if that answer is “no,” Janrain offers a user management platform solution that helps solve this pervasive problem.

Connecting Big Data to a Personalized Experience

Let’s translate the concept of big data into a small-town scenario, decades ago, where Susie Q is shopping at the local boutique.  The shopkeeper knows her name, birthday, sizes, favorite brands, favorite colors, overall style and her level of influence amongst other shoppers. And, beyond that, they know she likes to jog, she drinks an occasional martini and loves vacationing at the beach in Florida. They know that if Susie Q likes something (or not), the entire town will know about it within three hours. Before she even walks in the door, they are smiling and waving her in as they cater to her unique attributes based on these “data points” stored in the sales person’s head.

Susie Q doesn’t mind granting information on her likes, wants and needs because she knows in return she will be delivered value in the form of a good shopping experience, including relevant recommendations, products and shopping experiences tuned to her unique needs. A similar scenario applies to consumers today and accessing data on how they prefer to communicate, shop and what they tend to take action on. While technology has changed dramatically over the decades, humans haven’t evolved so much and consumers essentially want a consistent, highly personalized and engaging consumer experience across channels.

The Solution to Cross Channel Marketing

To deliver this experience to millions of Susie Qs today, the connection points across a myriad of channels and input/output modes need to be translated into action. We see many great examples of personalized lifecycle experiences that are greatly enhanced and more impactful via data-driven touch points. Companies such as Gilt Groupe, Netflix, Amazon and more are tuning into data to drive consumer action.  And, Janrain’s JUMP platform is helping marketers at Samsung, Ugg Australia and Macy’s and many more put data into action to build stronger relationships.

Is your organization embracing customer choice and putting data into action to drive a better consumer experience? Our team helps marketers do this every day, leading to more personalized experiences across the channels consumers are taking action in. The phrase, “the customer is always right” is often tossed around. Today, it’s more like “the customer always has the right to choose” and we just need to be tuned into their channels.

Usability Challenges with Mobile Forms

One of the key challenges these organisations face, is the difficulty of creating a usable environment within the constraints of the small screen device.

Whether browsing, shopping or interacting via social channels, customers want a simple, intuitive experience from the moment they arrive at a site. Asking mobile users, therefore, to register by slowly entering details such as name and password or filling in a registration form via small touchscreens or tiny keyboards, is a sure-fire way to put a barrier in the way of online engagement.

So how can brands provide a way of engaging with customers through mobile devices, in a way that will enhance the experience and yet enable a means of gathering personal details beyond the most basic information?

Improve Engagement and Ease with Social Login for Mobile

The easiest way to provide that engagement infrastructure is via the social identities used by millions as a matter of course to keep in touch with communities of friends and family. Offering social login and enabling users to register via an existing social identity such as Facebook, Twitter, Google or LinkedIn not only eases the initial registration process – avoiding the onerous ‘fat finger’ form filling – but it also enables deeper engagement and supports the growing consumer desire to share personal data in order to receive more relevant offers and information from brands.  Indeed, according to recent social login research, as many as 85% of UK consumers think social login should be offered as an alternative when registering for a website.

Futhermore, leveraging this permission-based personal data sharing immediately transforms the revenue generating potential of the mobile channel. Brands not only have up to date information about customers and their interests but can also exploit GPS to deliver time and location based offers. Targeted push marketing can reflect users’ specific profile attributes and adding the time and location dimension can drive new levels of interaction and engagement.

It is by responding to the clear consumer demand for social login on the mobile that brands will not only overcome the current limitations of mobile engagement but also gain immediate access to in depth consumer preference and behaviour information that can drive these critical mobile strategies and underpin significant revenue generating activity.

Get social login for your mobile site and apps

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.

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.

Social Login Trends for Q1 2012

When it comes to social login, people want choice. While Facebook is the most popular option at 45%, a majority would rather use a different social identity, such as Google, Yahoo! or Twitter.

Facebook’s share of social logins has increased considerably over the past two years, mostly at the expense of Google.  But don’t assume that portends Google’s decline in influence.  With Google+ rapidly scaling users and adoption, it will be interesting to see if it eventually overtakes Facebook again in social login popularity.

As with prior reports, we have taken a sampling of sites in four industry verticals to measure trends in consumer login preferences.  While the overall story arc is similar, there are disparate preferences within each vertical that merit consideration.

Facebook’s popularity for social login on eCommerce websites has declined moderately from 49% to 43% during the past two quarters.  Despite the decrease, it still enjoys significant popularity, which can be partially explained by the explosion of social commerce during the past year.  Increasingly, retailers are offering social shopping experiences on their eCommerce sites that leverage a consumer’s Facebook social graph.  We believe that the opportunity to incorporate friends into the online shopping experience will continue to influence the proclivity to choose Facebook when registering on retail sites.  Yahoo!’s share of social logins on retail sites has plummeted since 2009, mostly at the expense of Google and Facebook.

On media websites, Yahoo! and Google are running strong as the second and third most popular providers.  Despite a modest decline during the past several 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.

It’s also worth noting that Windows Live (Hotmail/MSN), historically a strong performer on entertainment and gaming sites, has experienced a notable decline in share of social logins during the past year.

Social Login Trends for Mobile in Q1 2012

On mobile applications, Facebook and Google lead in popularity, followed by Twitter and Yahoo!.  Twitter’s improvement in popularity on mobile devices could be a result of its OAuth integration with Apple iOS 5 for social login, which has further socialized mobile users to rely on Twitter as an authentication mechanism on portable devices.

Social Sharing Trends in Q1 2012

More than ever, people are sharing comments, purchases, reviews and other content from the web to their social networks. 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).  During the past two quarters, Twitter’s popularity as a sharing destination has increased at a more prominent rate than other social networks.

Social Profile Data That Can Be Accessed

Social login opens the door to collecting a rich amount of profile data from a user’s social network account. Each social network provides a different set of profile data on their users, which can help speed registration or enable more data-driven marketing and ROI from personalization and improved segmentation.   Here is a look at the profile data contained within a social profile that users can choose to share with your site:

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 source of 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.