This article will help you:
  • Add social sharing buttons to your site through experiments, such as Facebook "Like" buttons, Twitter "Follow" buttons, or Google "+1" buttons
  • Track Facebook likes (and un-likes) and Twitter follow events in an Optimizely experiment

Optimizely allows you to add social media elements to your pages such as Facebook "Like" buttons, Twitter "Follow" buttons, and Google "+1" buttons. This guide will show you how.

Adding a Facebook "Like" Button

To add a Facebook "Like" button using Optimizely, first go to the Facebook Page that lets you generate the necessary embed code.

Once there, you can create the button in your desired style and retrieve the necessary code. Make sure your Facebook account is verified. To verify an account follow the instructions found here.

The Facebook tool should generate a line of HTML5 code (marked as "A" below). The code you will need to use for your Facebook Like button is at the bottom of the Plugin Code modal (marked as “B”). Copy this code to your clipboard.

Once you have this code, it's as simple as creating an experiment on your page, selecting where you want to add the button, clicking Edit HTML from Settings and pasting the embed code from your clipboard.
 

Tracking Facebook Likes or Comments

The instructions above guide you to add a Facebook "Like" button to variations in your Optimizely experiment. To actually track likes on a Facebook "Like" button for an Optimizely experiment, you'll need to complete a couple of additional steps:

After adding the "Like" button as described above, you'll need to add some code directly within Optimizely, using Experiment JavaScript. This code will install the Facebook SDK to your experiment and make the "Like" Custom Event Goals accessible to every variation in the experiment. Paste the following code into Experiment JavaScript, which is found under Options in the Visual Editor:

// Optimizely Custom Event Goals

var facebookCallbackInterval = setInterval(function() {

	if ($(".fb-like iframe[src*='facebook.com']").length > 0) {

		// Triggers the 'fb_like' Custom Event Goal when 'Like' is clicked 
		FB.Event.subscribe('edge.create', function(url, html_element) {
				window['optimizely'] = window['optimizely'] || [];
				window.optimizely.push(["trackEvent", "fb_like"]);
		});

		// Triggers the 'fb_unLike' Custom Event Goal when the 'Like' is removed
		FB.Event.subscribe('edge.remove', function(url, html_element) {
				window['optimizely'] = window['optimizely'] || [];
				window.optimizely.push(["trackEvent", "fb_unLike"]);
		});

		// Clears the Interval
		clearInterval(facebookCallbackInterval);
	} 

}, 1000);

// Optional placeholder for Optimizely Editor - this won't be added to your live site

/* _optimizely_evaluate=editor_only */
var likeEditorPlaceholder = setInterval(function() {
	if ($(".fb-like").length > 0) {
		$(".fb-like").addClass("likeEditorPlaceholder");
		$(".likeEditorPlaceholder").css({"display":"inline-block","background-color":"none","width":"0","height":"0","border-top":"7px solid #384CA6","border-left":"7px solid #384CA6","border-right":"7px solid transparent","border-bottom":"7px solid transparent"});
	clearInterval(likeEditorPlaceholder);
	}
}, 50);
/* _optimizely_evaluate=end_editor_only */

Next, in order to actually track the "Like" or "Unlike" clicks, you'll need to add "fb_like" and/or "fb_unlike" as a Custom Event Goal in your Goals panel.
 

 
Note:

When viewing the Facebook button in the Visual Editor, you may see only a small, right-angled isoceles triangle in the top-left corner of the location where the Facebook like button should be visible. Don't worry--on your actual page, the full "Like" button will appear. This small triangle appears because the editor can sometimes have a hard time loading the actual Facebook button when switching variations. You can use the corner triangle to help you more precisely position the Facebook button. See the image below to compare what is shown in the Visual Editor to what will appear on your live site.


And that's it! Now Optimizely will track Facebook "Likes" for the experiment. You can view the results of this Custom Goal, like any other goal, on your Results Page.

To track Facebook Comments as a goal, go through the same process above, but use this code in your Experiment JavaScript and name your Custom Goal accordingly, like fb_comment_create and fb_comment_like:

$(document).ready(function() {
    FB.Event.subscribe('comment.create', function(response){ 
        window['optimizely'] = window['optimizely'] || [];
        window.optimizely.push(["trackEvent", "fb_comment_create"]); 
    });
 
    FB.Event.subscribe('edge.create', function(response) { 
        window['optimizely'] = window['optimizely'] || [];
        window.optimizely.push(["trackEvent", "fb_comment_like"]); 
    });
});

Adding a Twitter "Follow" Button

To add a Twitter "Follow" button using Optimizely, first go to the Twitter Developer Page and determine what button style you want to add.

Once that's settled, you should have the code for the button ready to paste. Take that code, select where you want to add the button, click the element in the Editor, click Edit HTML, and paste the code where necessary.

Tracking Twitter "Follow" Events

To track Twitter follow events in an Optimizely experiment, follow the steps below:

First, add the following code to your Experiment JavaScript:

twttr.events.bind
('follow',
 function (event) {
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "twttr_follow"]);
  }
);
 
 
Note:

Depending on how long it takes for your Twitter iframe to append to the page it might be necessary to wrap the above function in a polling function, described in this Developer Docs article.

 

After adding this code to your experiment, you'll need to create a new custom event goal and add “twttr_follow” as the “Custom Event to track,” as shown below:

Adding a Google "+1" Button

To add a Google "+1" button using Optimizely, first go to the Google +1 Button Page.

Change the options that you want to modify, and you'll be able to generate a line of code. Select the element on your page that you want to add the button to, click Edit HTML, and paste the first part of the code in that adds the placeholder for the button to the page.



Now you need to add the external JavaScript file to the page to get the button to show up properly. The easiest way to do that is to click Options > Experiment Javascript. The code that you put in here is available to all variations so you can create multiple variations putting the +1 button in different places on the page.



Click Apply, and you should see the button appear on the page where you added your placeholder.