Can you Implement Janrain Social Sharing Faster Than Our VP of Sales?

Paul SalzingerIf you’ve read our blog for the past several months, then it is likely that you have heard us wax poetic about one of the major benefits of Janrain’s social sharing features: they are so easy to implement.  How easy, you ask?  We decided to put Paul Salzinger, Janrain’s VP of Sales, to the test by seeing just how long it takes for someone with no formal programming expertise to implement the feature.  We hooked him up with a Janrain Engage application, set up a localhost environment with a static web page featuring an image and some content, and started the clock.

Here are the steps Paul followed to implement Janrain social sharing:

  1. Sign in to the Janrain Engage product dashboard (if you already have an account; if not, simply sign up), scroll down to the “application info” section, and ensure that your website domain and any development sandboxes have been added to the domain whitelist.  This security feature prevents malicious websites from grabbing your site’s code and using your Janrain social login or sharing application on their site:
  2. On the dashboard home page, click “Social Sharing for Websites” in the Quick Links sidebar:
  3. Change the share mode to “Share + Direct Share” to enable users to share content with selected friends or contacts – we refer to this experience as “targeted sharing”:
  4. Click “Email Providers” and check the box to enable email sharing.  If you haven’t already done so, you will need to follow a few simple steps to configure a Google and Yahoo! developer application for email sharing, which takes about five minutes per provider.
  5. Use the WYSIWYG drag-and drop editor to select the social networks you would like to include within the social sharing widget, and the order in which they appear.  If you haven’t already done so, you will need to follow a few simple steps to configure a developer application for these social networks, which takes about five minutes per provider (does that sound familiar?).
  6. Use the controls to toggle between landscape and portrait orientation for the social sharing widget, and also view how it will look on a mobile device:Social Sharing Widget Mobile Optimization
  7. Use the intuitive styling controls within the dashboard editor to change background colors, font colors and sizes, border, button, tab and link colors, widths, radius, opacity and more:

  8. Once you’ve styled the social sharing widget to your liking, save your changes.  For our test scenario, Paul decided to stick with the default look and feel.  Now it’s time to grab the widget JavaScript code.  Note the editable settings within the widget code to customize the title and description of shared content, pre-populate a user-generated message, and tailor the referral URL.  These settings can be edited from within the dashboard or inline within the JavaScript code.  Once you’re ready, copy the widget code and paste it into the <head> within relevant pages of your site:
  9. We asked Paul to deploy Janrain social sharing on a page featuring this beautiful, majestic photo of Mt. Hood.  Our graphic design team was kind enough to supply the silky share button that appears beneath the photo.  Wrap the <div> tag listed above in the dashboard screenshot around an image, button or call to action in order to initiate the social sharing widget on the page:
  10. Success!  The social sharing widget is now implemented.  Test it out by clicking the share button to render the widget as a modal overlay on top of the page.  The social sharing widget can also be easily embedded into the page if preferred instead of the lightbox UI treatment.

Now, let’s test the social sharing widget to ensure that it functions correctly.  Click to share with Facebook, at which point a permission screen appears in a new browser window asking the user to approve permissions:

After the user approves permissions, he can complete a broadcast share to all of his Facebook friends by sharing this wonderful photo of Mt. Hood to his timeline, or he can choose to share it with selected recipients by browsing a list of friends within the widget.  This targeted sharing experience is also supported for Twitter (via direct messages)), LinkedIn (via inbox messages) and email.

Once the user has selected the recipients, he can edit his shared message within the text box in the widget, and click to share.  Notice that the meta description and photo have been automatically added to the shared message for Facebook (and LinkedIn) within the rich media portion, as designated by the widget code:

When one of the recipients of this shared message accesses her Facebook account, she will notice a message from the user shared directly to her Facebook timeline, which also triggers a notification within Facebook for added visibility:

The user can also share with his email contacts by connecting his Google identity, then browsing a list of his Gmail contacts:

Once a recipient is selected, the user can craft a personal email and send it from within the share widget:

The recipient now receives an email in her inbox with a link to the photo of Mt. Hood.  Because the Janrain social sharing feature uses Gmail and/or Yahoo! as its default mail clients, the email looks as if it was sent directly from the user’s email:

That’s all there is to it!  Using only the setup wizard within the Janrain Engage product dashboard and the quick start guide on our developers site, our VP of Sales was able to get up and running with Janrain social sharing in less than 30 minutes by following these ten simple steps, despite possessing no formal programming experience.  It’s that simple.

The question is, can you beat Paul?  The challenge has been set forth.  Take the test, and let us know how long it takes for you to get up and running with Janrain social sharing.