lazySocialButtons

===================

A JavaScript plugin to place social buttons on a page on user interaction (mouseover) to spare the initial page load from the 300kb+ download requests for social APIs.

Requires

• jQuery v1.4+

Demo

Please see the demo on jsFiddle.net for usage and implementation. Since this plugin has multiple configurations for loading and usage, the demo is helpful for understanding the order of includes.

Loading

There are two ways to load the plugin on your page:

• using a blocking script include via an HTML script tag
• loading the script non-blocking via dynamically injecting a script tag

Blocking Script Load:

The script tag below should either be placed at the bottom just before the </body> for both the HTML attribute usage and the JavaScript call usage. It could be placed in the head block for the JavaScript call usage, but only if the usage call is within a jQuery document.ready callback.

<script id="LazySocialButtonsScript" src="[your path]/lazySocialButtons.js"></script>

Non-Blocking Script Load:

The main objective for non-blocking is to let the HTML render and other scripts load before loading this script.
The loading block should be placed at the bottom just before the </body> to accomplish this goal.
It is also necessary to place the loading block just before the </body> for the HTML attribute auto wire-up usage to function properly (the HTML must be rendered on the page).

<script>
	function lsbReady() {
		$('#sharemetoo').lazySocialButtons({ shareUrl: 'http://godaddy.com' });
	};
	
	(function (loaded){
		var d = document, 
			id = 'LazySocialButtonsScript', 
			src = '[your path]/lazySocialButtons.js';
		var js, st = d.getElementsByTagName('script')[0];
		if (d.getElementById(id)) { return; }
		js = d.createElement('script');
		js.id = id;
		js.type = "text/javascript";
		js.async = true;
		js.src = src;
		st.parentNode.insertBefore(js, st);
		
		// if we have a callback, execute it
		if (typeof(loaded) === 'function') {
			(function checkLoaded() {
				if (!$.fn.lazySocialButtons) setTimeout(checkLoaded, 100);
				else loaded();
			})();
		}
	})(lsbReady);
</script>

NOTE: The ID of 'LazySocialButtonsScript' must be specified for the automatic image pathing to occur (see below).

Usage

There are two ways the plugin may be initialized against HTML elements:

• via a JavaScript call any time after document ready
• at plugin load time via auto wire-up through HTML attribute decorations

JavaScript call with full options:

Place an element in the HTML body where you want the buttons to appear.

<div id="shareme"></div>

Initialize the plugin against the element any time after the plugin script is loaded and the element is rendered on the page.

<script>
$('#shareme').lazySocialButtons({
	shareUrl: 'http://godaddy.com',
	buttons: { facebook: true, google: true, twitter: true },
	facebook: {
		shareUrl: 'http://facebook.godaddy.com',
		hideCommentFlyout: false,
	},
	twitter: {
		shareUrl: 'http://twitter.godaddy.com',
		defaultText: 'Twitter on GoDaddy.com: ',
		hash: 'HotForTech',
		related: 'GoDaddy',
		via: 'twicodeer',
		reply: '35782000644194304'
	},
	google: {
		shareUrl: 'http://google.godaddy.com'
	},
	height: 20,
	imagePath: '[your image path]/',
	backgroundType: 'light'
});
</script>

Decorated HTML tag with full options:

Place and element with HTML attributes in the HTML body where you want the buttons to appear.

<div 
	class="lazysocialbuttons" 
	data-height="20" 
	data-twshareurl="http://twitter.godaddy.com"
	data-twtext="Twitter on GoDaddy.com: "
	data-twhash="HotForTech"
	data-twrelated="GoDaddy"
	data-twvia="twicodeer"
	data-twreply="35782000644194304"
	data-fbshareurl="http://facebook.godaddy.com"		
	data-gpshareurl="http://google.godaddy.com"
	data-shareurl="http://godaddy.com"
	data-buttons="google,facebook,twitter"
	data-backgroundtype="light">
</div>   

NOTE: class of 'lazysocialbuttons' must be specified.

Any elements with the class will be initialized on plugin load.
If you want to add decorated HTML to the DOM dynamically you can initialize the plugin on the element like so:

<script>
	$('<div>')
		.attr({
			'data-twshareurl': http://twitter.godaddy.com',
			'data-twtext': 'Twitter on GoDaddy.com: ',
			'data-twhash': 'HotForTech',
			'data-twrelated': 'GoDaddy',
			'data-twvia': 'twicodeer',
			/* more attributes */
			'data-buttons': 'google,facebook,twitter' 
		})
		.appendTo(myButtonContainer)
		.lazySocialButtons({});
</script>

Image Path specification

The plugin requires two images: one for a placeholder and a loading spinner. There are three ways to specify the path where these images are located, the most appropriate depending on the type of usage of the plugin.

• If the images are located in the same directory as the plugin script, and the script tag has an id of 'LazySocialButtonsScript' then the path to the images will be derived relative to the script.
• If the images are located somewhere else and the plugin is initialized after page load, the option of imagePath may be specified.
• If the images are located somewhere else and the HTML attribute decorations with auto wire-up is chosen, then the following global variable must be defined prior to the script loading on the page:

<script>
	var lazySocialButtonsImagePath = '[your path to images]/';
</script>

Options

License

The MIT License (MIT)

Copyright (c) 2012 Go Daddy Operating Company, LLC

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.