This impossible task of integrating two systems seamlessly is done by Digital Engagement. If Digital Engagement is a new product for you, I would strongly recommend reading my previous post, where I covered it in a little bit more detail.

What do you need to set up Digital Experience?

You would need a business that you want to grow by leaps and bounce, its Facebook Page, Salesforce Service Cloud, and Digital Experience add-on license.

Once you got all these, the first step would be to enable Messaging and for that navigate to Setup | Feature Settings | Service | Messaging Settings and enable Messaging.

If you are a video person, feel free to watch the below video as well

Coming back to a blog post, once Messaging is enabled, click on add new Channel and select the Facebook Messenger option as shown below image.

On the next screen, you would be prompted to authenticate to your company’s Facebook account.

On the next screen, you would be provided with a list of all pages of your Facebook account. Select one or multiple pages and provide consent.

From here, we have two choices. Either create a new queue in Service Cloud or reuse an existing one. In the above video, I have created a new queue and did all the basic Service Cloud Setup.

Now, all that is left out is to make sure your Facebook page has a messenger button and start collecting the highest CSAT score possible for your service cloud call center.

Feel free to leave your feedback and comment in this post.

If you are in need to use Wechat , Yahoo or some other social account like Microsoft, don’t get disappointed. Even if they are not available out of the box as Auth Provider in Salesforce , Salesforce has provided magical box Janrain. Janrain supports vast list of social platform which can be used as Identity provider for your Salesforce instance.

How Janrain is different compared to other SSO solutions for Salesforce

If we configure Identity provider for Salesforce using Single Sign On or Auth Provider, those options will appear on Login Salesforce page as a button (shown in below image).

However, if we use Janrain as Identity provider it would not appear on Salesforce login page. Janrain gives HTML code which needs to be placed on public accessible page. If Login is success, then Janrain redirects to Salesforce SSO endpoint ending up seamless login experience as shown in this animated image.

Click here for demo animated image.

Note in above demo :

• Single Sign On launched from local HTML file
• We can login using Twitter, Yahoo, AOL and other social application using Janrain

Let’s see how Janrain and Salesforce can be configured

Step 1: Create Janrain Application

Create Janrain application by navigating this URL (Its free)

Step 2: Create Auth Provider in Salesforce

In this step, navigate to Salesforce | Setup | Identity | Auth. providers | New | Janrain.

You can keep Name and URL suffix same. Value in Consumer Secret would come from Janrain | Your application | Setting | API Key (secret).

For registration handler , choose auto create on save. We will update this Apex class later in this post.

Select Admin User in Execute Registration As . 

Once setting saved, Salesforce would generate various SSO login URL for internal users and all Communities available in your Salesforce org. We are interested only in internal users, and therefore we are only interested in Single Sign-On Callback URL, we would need it later in Step 5.

Step 3 – Configure providers in Janrain

Now in Janrain application, you can configure Social login providers like Facebook, Twitter, Yahoo etc. It can be configured by navigating to Janrain | Your Application | Provider. Setting up providers are very easy, you just need to follow instructions.

Configuring Facebook Provider in Janrain

I only faced small hiccup in configuring facebook because instruction in Janrain is pretty old. Only missing step was adding callback URL in facebook application. Below image shows format of callback URL, you would only need to replace sfdcilovesso by your Janrain application name in facebook application.

Step 4 – Get Janrain Widget Code

Navigate to your Janrain application ad click on Widgets and SDKs | Sign Ins. Choose providers for widget and get code.

Step 5 – Place Janrain Widget code in Public Site

we would need some public accessible page to place code copied in Step 4. I have used Salesforce public Site. In this code, you would need to update value for variable janrain.settings.tokenUrl. This would be Single Sign-On Callback URL, copied in Step 2. Source Code of Visualforce page is provided at end of this post.

Step 6 – Update Registration Handler Apex class

Registration handler Apex class was auto created in Step 2. It would need to be updated as per your requirement. One user can have multiple social accounts, so I have created custom object to store all unique identifiers of social applications configured in Janrain. This custom object would have lookup relationship with User. This object is used only in createUser() method, that means it would be used only first time when user would attempt to use social login. Every subsequent login attempt would use updateUser() method because link between third party social account and user would be established already. Source code is provided at end of this post.

Question : How Salesforce decides that createUser() or updateUser() method of Apex Registration handler needs to be executed ?

Ans : When user attempts to login first time in Salesforce using registration handler class, createMethod is executed. Salesforce internally saves mapping between user and application against which it is authenticated, in Third-Party Account Links , found in user’s related list. In next login attempt, because of Third-Party Account Links Salesforce is able to determine that user already used Auth provider previously, so reuse that information and execute updateUser method.

Resources :

Official Salesforce and Janrain documentation 

In this article, I will show very simple Hello world program using React framework.

<html>
	<head>
		<script src="http://fb.me/react-0.13.1.min.js"></script>
		<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
	</head>
	<body>
		<div id="main"></div>
		<script type="text/jsx">
			var HelloWorld = React.createClass({
				render : function(){
					return (
						<h1> Hello World</h1>
						);
				}
			});

			React.render(<HelloWorld/> , document.getElementById('main'));
		</script>
	</body>
</html>

Output : Hello World in h1 tag.

Explanation :
As you can see in above code snippet, we have used two javascript files “React” and “JSXTransformer (JSX)”. It is not mandatory to import JSX however recommended to use it so that HTML code can be written very easily inside methods. As it can be seen in return statement, we are creating h1 tag with Hello World content and this representation is possible only because of JSX.

We have created component named “HelloWorld”. it is very important to note that component name should start with uppercase. Internally reacts assumes every lowercase tag as standard HTML component and uppercase tag as custom component.

After creation of “HelloWorld” component, it is rendered in place of div component with id “main”.