Monday, September 10, 2012

A Look at Sitecore Social Connected

Social Connected is a free module from Sitecore that allows websites to:
  • Enable visitors to log in with Facebook, Twitter, LinkedIn, or Google+
  • Personalize content based on a visitor's social network profile
  • Post messages to Facebook and Twitter timelines
  • Capture DMS campaign and goal data on social network actions
The module was introduced in October 2011, and has gone through two upgrades, each of which significantly extended its functionality and usability.  The initial release allowed  log in and content related messages, version 1.1 added the ability to send messages directly to users based on DMS goals, and version 1.2, released in July 2012, presents impressive feedback on what happens to those messages, showing share, comment, and retweet activity, and evaluating the engagement value of users who come to site based on Like This and Tweet This links. The rate of introduction of new features shows Sitecore's commitment to the Customer Engagement vision announced at Dreamcore 2011, since it brings this notion of personalization and triggered action into the social networking space.  This post takes a look at how to set up the module, what it can do, and how it can be customized.

Installation and Setup

Figure 1: Social Connected content items
Social Connected requires Sitecore 6.5 or above. The DMS module is optional, but greatly extends its functionality.  In my testing I have found usability bugs when using DMS 2.0.0, so I recommend DMS 2.0.1, which is available with Sitecore 6.5 build 4 and above.  The module is installed as a Sitecore package, and no additional configuration changes are required post installation to get the module working.   In addition to installing DLLs, config files, and sublayouts, the module creates a /sitecore/system/social content tree (see figure 1).
The module is now functional, but to be useful, you need to tie it to a social network.  In this article I will use Facebook as an example, but the process with the other networks is similar, and is documented in the Social Connected Administrator and Developer's Guide.   To set up Facebook, you need a regular Facebook user's account (no special API developer's account is needed). 
At http://developers.facebook.com/apps, click the "Create New App" button, and at the pop up window, give your application a name.  This name can be changed later on, but should be chosen with care, as it will be visible to website visitors at sign on and on timeline posts.  This brings up the screen in figure 2, which displays an Application ID and Application Secret, which are analogous to a user name and password, and will be used by Sitecore to access the application.   You will need to (1) enter the App Domain of your site (this is not documented, but in my testing login did not work without this set up), (2) select the option "Website with Facebook Login", and (3) enter the URL of the website login page.
Now we need to set up this application in Sitecore.  This is done by adding an "Application" item to /sitecore/system/social/applications/default (Figure 3). The Application item has three fields: Application ID and Application Secret, which take the values  from the Facebook App screen (figure 2), and a Network droplist for selecting Facebook, Twitter, LinkedIn, or Google+.  Save, publish, and we are ready to set up Facebook sign in.
Note: You can only add one application for each social network to the default folder.  If you want to enable sign in on multiple sites, you will need to create the additional applications as children of the  /sitecore/system/social/applications item, and you will need to write custom code to wire up your sign-in handler to the proper application item.
Figure 2: Configuring the Facebook App

Figure 3: Adding the App to Sitecore

Login

Once the Facebook app has been set up in Sitecore, wiring up Facebook login is simply a matter of dropping a sublayout on a page.  The control itself requires no configuration.  It automatically uses the application defined the social/applications/default folder to communicate with Facebook.
The sublayout is located in the folder, “/sitecore/layout/Sublayouts/Social/Connector/Login with Facebook,” and appears as a small Facebook button.  For an anonymous user, the button has the tooltip, “Login with Facebook”, and for a logged in user the tooltip states, “Attach Facebook account.”
Adding Login1
Figure 4: Login sublayouts
Figure 5: The Facebook login control.
If a visitor clicks on the button, the following steps occur:
  1. If the user is not logged in to Facebook on the current browser, she is directed to a Facebook log in screen that states, “Login to use your Facebook account with <App Name>”.
  2. She is alerted that the app requires access to a large number of profile properties (“… description, birthday, education history, hometown, interests, likes, location, relationship status, relationship details, religious and political views, website and work history”)   All of this information will be stored into the Sitecore user profile and can be used for personalization.  If you wish to limit this list, you can switch off specific pieces of information in the Sitecore.Social.ProfileMapping.config.
  3. The user is prompted to allow or disallow the application to post to her timeline.  This will come into play with goal-triggered messaging.
  4. The user is logged on to the website.
Note that if the user already has an extranet or sitecore domain account with the same email address, the application will log in that account, rather than creating a new account (if both extranet and sitecore have the email address, the extranet account is selected). In both cases, the new or existing website account will be linked the the visitor’s Facebook account, and the system-requested Facebook profile values will be copied to the local user profile.  If the user is logged in already, the Facebook account will be linked to the current user account.
Figure 6: Google requested field alert.

Note: Sitecore's documentation refers to the login functionality as "Social Connector," which is part of the "Social Connected" module.

Personalization

When an account is linked to Facebook, a rich collection of attributes is pulled into the Sitecore user profile, which opens up a range of personalization possibilities.  These go from the broadly demographic, such as showing targeted content to women over 50, to the finely targeted, such as displaying ads relating to games or movies that the user has expressed an interest in.  To facilitate this, the personalization engine adds the following Rules Editor conditions:
    • where the gender of the current user is value (new with SC 1.2)
    • where the current user is interested in value on any social network (new with SC 1.2)
    • where the current user is connected to the specific social network
    • where the network profile specific field compares to value
facebook_rules
Figure 7: Personalization conditions
The conditions provide a rich and flexible set of profiling actions. For example, the new “interested in any social network” field could be used to tell if Sitecore appeared on a user’s likes and interests in Facebook or on LinkedIn.  The “is a member of a specific social network” could be combined with the “is user authenticated” button to display the Link to Twitter button only to users that are logged in but do not have Twitter linked to their account.

Triggered Messages

Social Connected allows two kinds of messaging:
  • Sending updates to user's Facebook and Twitter timelines when they complete a DMS goal
  • Sending updates to the organization's Facebook and Twitter timelines manually or on content publishing.

Goal Triggered Messages

The steps for making a goal triggered message appear are somewhat complex, so I've included a number of screenshots to help visualize the process. First, you need to have a goal defined, and you need to be able to have it triggered. The simplest way is to directly link the goal to a content item, so that whenever a visitor lands on the item, the goal is achieved. You can do this by selecting the goal on the Analyze ribbon of the content item.  To add the Facebook message, go to the goal item, located under /sitecore/system/marketing center/goals, and click the publish tab.   You will see a new menu item, Messages (Figure 4).   Click this to pull up the messages tab (Figure 5). Note that in Social Connected 1.1, this only worked if you went through the Content Editor, not the Marketing Center application.  This was fixed with 1.2


Figure 8: Adding a message to a goal.
Figure 9: The messages tab.
Clicking on the New Facebook message pulls up a screen (Figure 10)  that prompts you to set the text of the message, and allows you to create a link back to the site.  Especially worth noting is the Campaign field. This allows DMS to identify traffic that comes to the website as a result of the link included in the Facebook message.  The Create Campaign is a nice feature that allows you to create a campaign on the fly to associate with this goal.  The new campaign is created already in a "Deployed" workflow step, allowing you to use it without having to leave this form. 
After saving the message, you will be able to see a preview of what the goal message will look like on the visitor's Facebook wall (figure 7).  Before this will work on the production site, you will need to publish the item, the goal, and the message itself, which is located under /sitecore/system/social/messages.  Figure 8 shows how the message appears on the wall of a Facebook test account:

Figure 10: The message form.
Figure 11: The message preview

Figure 12: The message appears on Facebook
One final point to mention.  When you add a message to a goal, the goal item has this rule automatically added:

Figure 13: Goal rule
Without this rule in place, the message will not be sent, which gives considerable flexibility in tailoring conditions for who will receive the message. For example, you could add a profile value when the message is sent to a user, and only send messages to users who have not received them before, or who have not opted out of receiving social network updates.

Message level Opt-In/Opt-Out

In addition, Social Connected provides a mechanism for allowing visitors to opt out of receiving specific messages.  However, this requires significant developer involvement. The class Sitecore.Social.Security.Managers.PublishPreferenceManager contains a method SetPreference(messageId, user, PublishPreference) which sets a profile property indicating whether the visitor is to receive a given message.  GetPreference(messageId, user) can be used to query the current status (see Social Connected documentation, section 3.3).  You can control how the system interprets messages that do not have a preference set with a config file setting:

<!-- Allows publishing if the message PublishPreference has default value -->
<setting name="Social.AllowPublishByDefault" value="true"/>


Changing this setting from the initial value of "true" will disable sending goal messages unless they have been explicitly enabled for a user. 

Although this mechanism is functional, it presents challenges for the implementor, since there is no straightforward way of obtaining a list of goal messages, and no obvious way of presenting them to a user for action.  


Goal Message Token Replacement


Social Connected provides a mechanism for sending individualized content to users.  If the message includes one or more tokens in the format $field (dollar-sign + fieldname), you can use the method GoalUtil.RegisterEventParameters(string pageEventName, IDictionary parameters) to trigger the goal, and pass the dictionary of parameters to the message.  For example, suppose you want to have an online poll of favorite Beatles, and you want to provide the user an option to post their choice to their Facebook wall.  To implement this you would:
1. Create a goal called "Beatle Poll Completed".
2. Create a goal triggered Facebook message with the "Message" field set to: "My favorite Beatle is $favoriteBeatle."
3. Create a sublayout allowing visitors to make a selection from a drop-down list "ddlBeatle", and a checkbox for sending the message to Facebook.
4. In code behind, if the user has completed the poll and selected the checkbox, do the following:
var parameters = new Dictionary<string, string>();
parameters["favoriteBeatle"] = ddlBeatles.Value;
GoalUtil.RegisterEventParameters("Beatle Poll Completed", parameters);


The user will receive the message with the token replaced by the selected value. It is important to note that while the token is entered in the message with a dollar sign, the dollar sign is omitted when the value is passed to the parameters dictionary.



Content Messages


Content messages are similar to goal-triggered messages, but instead of being tied to a goal, they are tied to a content item, and instead of going to a visitor's Facebook or Twitter timeline, they go to the timeline of a Facebook or Twitter account controlled by the website organization.  A typical use would be to promote new website content on the organization's Facebook page and Twitter feed.

To create a content message, navigate to the content item, and click the Messages button on the Publish ribbon.  This pulls up a screen identical to figure 5, except without the text "These messages will be posted..." The Facebook message form is identical to figure 6, with the following differences:
  • The Link field is set to the related content item.
  • The Campaign field is set to Facebook Content Messages.
  • There is a new checkbox field, "Post when the item is published"
  • There is a new multilist field, "Accounts"

Figure 10: New fields for Content Messages

The "Post when ... published" checkbox will cause the message to be posted whenever the item is published.  Note that an item that is skipped due to a smart publish will not trigger the message, but an unchanged item that is published due to a Republish will generate a new message, leading to duplicate messages.   I have not tested what will happen if there are multiple publishing targets.  One solution to this issue would be to write a pipeline step to set this field to unchecked after the message has been published.  I have not tested how message publishing works in a multi-target environment, but I suspect that publishing to either target will cause the message to be sent to Facebook.  A pipeline modification may be able to handle this as well, by aborting the Facebook message if the production target is not selected.


The Accounts field will require us to take a detour.  Whereas Goal messages are sent to the Context.User's Facebook account, content messages are sent to accounts that are predefined.  These accounts are set up through a wizard that is triggered by inserting an Account item to /sitecore/system/social/accounts.  Accounts allow you to determine where the update is sent to.  The wizard will provide a drop down listing every application created by the owner of the application(s) defined under /sitecore/system/social/applications. 


For example, suppose developer A is an administrator of organization B's application. A also has a fan page for a musical group, and B has Facebook pages for several subsidiaries.  The wizard would provide a drop-down list of all of developer A's Facebook pages and apps and all of organization B's pages.  The developer would create account items for all of organization B's pages, and then would have the option of choosing which one should receive each message in the Accounts field of the content message.


In this example, I've created a "Sitecore Fan Page" with my Facebook account, which allows me to define it as an Account using the Account creation wizard, and to select it in the message's account field.  Sitecore presents the following preview:






Figure 11: Message preview






Figure 12: Close up of Accounts list.
The message lists the targets it will be sent to.  The "Post to all accounts" button allows sending the message before or after the item is published.  We will be prompted with a confirmation dialog box, and after confirming our intention to send the message, it will appear on the Facebook page we selected, and the summary box will now display statistics on comments, shares, and campaigns (visits, engagement value, and value per visit).






Figure 13 : The message appears.






Figure 14: Activity statistics appear under the message.


One additional point to note is that unlike Goal messages, Content messages are issued from the Content Management site. If the URL of the CM site is different domain from the content delivery site, use the configuration setting Social.LinkDomain to correct this. According to the documentation, in a multisite installation, Social connected uses the path of the content item to select the site root, and uses the hostName attribute from the Web.config <sites> section.  It does not appear that Social Connected supports a mutlisite installation with different domains on the CD server, since the LinkDomain attribute only accepts one value:
<!--When this setting is set all links generated by the Social module will contain this hostName-->
<setting name="Social.LinkDomain" value="" />


Support for Analytics








Figure 15: Like Button control settings.
Finally, Social Connected provides sublayouts for Like Button and Tweet Button sublayouts that automatically trigger goals, so that engagement value can be assigned to these actions.  After adding a LikeThis sublayout (/sitecore/layout/sublayouts/social/sharing/Like Button) in presentation details, open up the control properties and you will find a new sharing section, which allows specifying a Goal for the action of clicking Like, and a Campaign to assign to the traffic that comes to the site from the Like backlink to the user's Facebook timeline.  Also, because these buttons are sublayouts, their presentation details (image, text, and so forth) can be customized.


Configuration and Customization


Social Connected follows Sitecore's development practice of making most of the internal workings of the product configurable.  The product works without any changes to initial settings, but you may wish to modify it to, for example, capture off line changes to Facebook user accounts, or to modify what profile fields are captured.  The module also exposes five pipelines:



  • MatchUser: Called when the login button is clicked, you may wish to modify this to change the way existing users are matched.  For example, you could modify this to prevent Sitecore domain users form being linked to a Facebook account.
  • CreateSocialMessage: Called when a message is created, this could be modified to prompt users for meta-data useful in managing opt-in/opt-out interactions with visitors.
  • ReadSocialMessage: Called when Sitecore finds the messages attached to a content item. This could be modified to add custom filtering logic, such as only showing messages created in the last seven days.
  • BuildMessage: This creates the message, and performs token replacement. It can be modified to suppplement customization of messages.
  • PublishMessage: This does the actual transmission to the social network.  This pipeline could be modified to log communication actions, or to implement customized opt-in/opt-out logic.


For more information


The best source of information for Social Connected are the "Administrator's and Developer's Guide" and the "Release Notes" available at http://sdn.sitecore.net/Products/Social%20Connected%20Module.aspx. There is also a Mike Casey blog post introducing the module, and explaining how it can be used in personalization.

There is a wealth of information on the OpenID and OpenAuth protocols that underlie this.  In particular, I recommend two podcasts: http://dotnetrocks.com/default.aspx?showNum=782 on Facebook and authentication, and http://dotnetrocks.com/default.aspx?showNum=789 on how these technologies are being brought into .Net 4.5.  Finally, Facebook has an abundance of well presented information on  how to develop websites that interact with Facebook, which will make you grateful that Sitecore has build this abstraction layer!

Update (September 27, 2014):  Based on the Technical Preview, it looks like Social Connected will come into the main CMS product with Sitecore 8.


11 comments:

  1. Awesome post Dan! And thank you for the awesome presentation last night at the Sitecore User Group! It was really enjoyable and informative. I made a plug for you and for this post on my blog, http://letsdositecore.com.

    Hope to see you at the next Sitecore User Group!

    ReplyDelete
  2. Thanks for the post Dan, good stuff. A question for you. For the simple Like Button and Tweet Button (sublayouts) does the user need to be logged in for those to appear? I see the element in the source but it doesn't appear. I am wondering if the end user needs to login through Facebook for the button to show. And if that is the case then the Sitecore Social Connector wouldn't be a true replacement to ShareThis (sharethis.com) modules right?

    ~james

    ReplyDelete
  3. I'm not seeing this behavior. I added Like Button and Tweet Button sublayouts to a test item, published it, and opened the item in a Chrome Incognito session. The links appeared, and when I clicked them, I was prompted to log in to Facebook or Twitter.

    Have you made sure to publish the "/sitecore/system/Social" and "/sitecore/layout/Sublayouts/Social" hierarchies? Omitting the latter will cause the elements to appear in preview mode but not on the published site.

    ReplyDelete
  4. Great post Dan! You may be interested in the unofficial Sitecore MVC port: https://github.com/herskinduk/Usergroup.SocialConnectedMvc

    ReplyDelete
    Replies
    1. Hi Herskind,
      I've tried using SocialConnectedMvc for my site. I'm getting below error:

      The controller for path '/' was not found or does not implement IController.

      Description: An unhandled exception occurred.

      Exception Details: Sitecore.Mvc.Diagnostics.ExceptionWrapper: The controller for path '/' was not found or does not implement IController.

      Source Error:


      Line 11: }
      Line 12:
      Line 13: @Html.Sitecore().Rendering("{853B9105-DD1C-4163-882E-E5BB8925D87F}", new { Parameters = "NetworkName=Facebook" })


      Please help

      Regards,
      Chandana

      Delete
  5. Same procedure for Twitter account too???

    ReplyDelete
  6. Great article Dan.

    I've read through the Administrator's and Developer's Guide for Social Connected 1.2 and I've implemented the web controls to allow login. However when I attempt to login I'm sent to the social media site (FB or Twitter) and prompted to allow access as expected, but once I login and I'm redirected back to my website the URL shows "authResult=error" and the Sitecore log file lists the following error:


    ----------------------------------------------------------------------------------------
    4172 14:12:55 ERROR The error in ConnectManager occured
    Exception: Sitecore.Social.Exceptions.SocialException
    Message: The username supplied is invalid.

    Nested Exception

    Exception: System.Web.Security.MembershipCreateUserException
    Message: The username supplied is invalid.
    Source: Sitecore.Social
    at Sitecore.Social.Connector.Pipelines.MatchUser.CreateUser.CreateSitecoreUser(String domainUser, String email, String fullName)
    at Sitecore.Social.Connector.Pipelines.MatchUser.CreateUser.Process(SelectUserPipelineArgs args)
    at (Object , Object[] )
    at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args)
    at Sitecore.Social.Users.UserSelector.ChooseUserForNetworkAccount(AccountBasicData accountBasicData)
    at Sitecore.Social.Connector.Managers.ConnectManager.Connect(Account account, Boolean attachAccountToLoggedInUser, Boolean isAsyncProfileUpdate)
    at Sitecore.Social.Connector.ConnectorAuthCompleted.AuthCompleted(AuthCompletedArgs args)


    4172 14:12:55 ERROR Thread was being aborted.
    ----------------------------------------------------------------------------------------

    Is this an issue within Social Connected or is this an issue that I need to resolve with Sitecore User Mgmt??? Any thoughts on how to resolve the error???

    Thanks in advance.

    ReplyDelete
  7. Hi Dan,

    I'm very new to Sitecore and trying to retrieve profile data using Sitecore social connected. Which namespace or methods should I use to retrieve user profile details? Please guide me.

    Thanks,
    Chandana

    ReplyDelete
  8. Hi Dan,
    Adding more clarity on my question here ...
    I've used connectedUserManager.LogOnUser and connectedUserManager.AttachUser method. But, my database doesn't get details of the facebook user updated in it. What might be missing? How to retrieve user information, after I'm successfully logged in using Facebook credentials.

    Thanks,
    Chandana

    ReplyDelete
  9. Hi Dan,

    I have a question.
    If we are managing multiple sites in Sitecore6.6 with Socail Connected 1.2 and we need to use the "LIKE" button of facebook, how do we use different layouts of it in different sites/pages.

    Note : Like button has different layouts('box_count','standard', etc)

    if i change the layout in the like button under sublayouts->social->Share, it affects all the like buttons used. Is there any solution for this or social connected provides only one layout.

    ReplyDelete
  10. Hi Dan,

    How Sitecore Social Connected work with custom membership provider


    Thanks ,
    Jinesh

    ReplyDelete