Share This Page – On Your Terms!

Build your own "Share this page" feature!

Not too long ago I added one of the "Share this page" scripts, AddToAny, to our web site.  This seemed like it was going to work fine but this approach had 3 major drawbacks.

1. Most of these services require you to link to their JavaScript file on their servers.  Sure this is fairly reliable but I am not a fan of this approach.
2. Limited tracking / analytic capabilities.
3. Cookies you can not control.

The first two issues are not huge issues, but while we were testing the site, we noticed that the scripts were adding a few of their own cookies to our users.  I understand why this is, but I did not like it and the feature was pulled.  So I tested out another one, Share This, and it did the same thing. Not only do they add cookies to your users, but they are also tracking usage of their tool on your site.  I don't blame them for this, after all they are providing this as a free service but I still do not like it.

After looking at the scripts for a while I decided that it could not be that difficult to write my own "Share this page" feature.

My goal was to create a widget to let users share the current web page without the limitations listed above.  With just a wee bit of research I found the methods needed to be able to share a page via email, Twitter, Facebook, and LinkedIn. And then track the usage of data in Omniture SiteCatalyst.

<ul>
  <li><A onClick="jsFunctionToRecordClick('Email');" HREF="mailto:?subject=#variables.emailSubject#&body=#variables.emailMessage#">Email </a></li>
  <li><a onClick="jsFunctionToRecordClick('Twitter');" href="http://twitter.com/home?status=#variables.twitterLink#" target="_blank">Twitter </a></li>
  <li><a onClick="jsFunctionToRecordClick('LinkedIn');" href="http://www.linkedin.com/shareArticle?mini=true&url=www.rudishumpert.com&title=AmazingArticle&summary=This is the best ever&source=Rudi"  target="_blank">LinkedIn </a></li>
  <li><a onClick="jsFunctionToRecordClick('Facebook');" href="http://www.facebook.com/share.php?src=bm&u=#variables.currentPage#&t=#variables.twitterLink#&v=3" target="_blank">Facebook </a></li>
</ul>

Sample links without the tracking added:

• Email
• Twitter
• LinkedIn
• Facebook

And then the JS Function: Note the JS function is specific to Omniture tracking but this could be leverage for any analytic solution with some minor tweaking.

			function jsFunctionToRecordClick(category){
				var s = s_gi(s_account);
				s.linkTrackVars="events,eVarN,propN,propN";
				s.linkTrackEvents="eventN";
				s.events="eventN";
				s.eVarN=''+category+'';
				s.propN=''+category+'';
				s.propN=''+category+' | '+s.pageName+'';
				s.tl();
				s.events="";
				s.linkTrackEvents="";
				s.linkTrackVars="";
				s.eVarN='';
				s.propN='';
				s.propN='';
			}

The feature is added to the page using a jQuery menu script that creates the same mouse-over drop down effect that the free scripts use, but you can use any sort of presentation approach that fits your web site's style.

And that is it.  You know have your own custom share this web page feature that your can style however you like and maintain complete control over what cookies are used on your site and what level of tracking you would like to get out of the widget.