Widget Examples

 

Dynamically add share buttons

This example shows how you can dynamically add Share buttons on your website using JavaScript.

Open demo in new window
 
Code
	  
<span class='st_sharethis'></span>

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script>
stLight.options({
	publisher:'insert-your-key-here'
});

stWidget.addEntry({
	"service":"sharethis",
	"element":document.getElementById('button_1'),
	"url":"http://sharethis.com",
	"title":"sharethis",
	"type":"large",
	"text":"ShareThis" ,
	"image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/
png/256/sharethis_hulk.png",
	"summary":"this is description1"   
});
				
stWidget.addEntry({
	"service":"sharethis",
	"element":document.getElementById('button_2'),
	"url":"http://sharethis.com/2",
	"title":"sharethis",
	"type":"large",
	"text":"ShareThis" ,
	"image":"http://farm4.static.flickr.com/3571/3427619794_13dae8e979_o.png",
	"summary":"this is description2"   
});
			
function addMore(){
	stWidget.addEntry({
		"service":"sharethis",
		"element":document.getElementById('button_3'),
		"url":"http://sharethis.com/3",
		"title":"sharethis",
		"type":"large",
		"text":"ShareThis" ,
		"image":"http://icons.iconarchive.com/icons/iconshock/high-detail-social/256/sharethis-icon.png",
		"summary":"this is description3"   
	});
}
</script>
 

Show counts in custom buttons

This is an example to show how you can implement custom buttons and include our counts in those buttons.

Open demo in new window
 
Code
	  
<script type="text/javascript" src="http://wd.sharethis.com/button/buttons.js"></script> 
<script type="text/javascript">
	stLight.options({publisher:'12345'});
	stButtons.getCount("http://sharethis.com","facebook",document.getElementById('fbcount'));
 //(url,service,elemnt)	
	stButtons.getCount("http://sharethis.com","twitter",document.getElementById('twitcount'));
</script>
 

Implement callback on Share Clicks

This example demonstrates how to pass a callback when a user clicks on a service to share.

Open demo in new window
 
Code
	  
<script type="text/javascript">	
	stLight.options({publisher:'6beba854-ee6d-4ae1-a4f3-b69815c8ef63'});
	
	function fun1(event,service){
		alert("event called is:"+event);
		alert("service called is:"+service);
	}
	
	stLight.subscribe("click",fun1);
</script>

 

Sharing shortened urls

This example demonstrates how a publisher can share custom URLs (including shortened URLs) to any service. This option will disable the ShareThis shortening service (shar.es) as well.

Open demo in new window
 
Code  
	<script type="text/javascript">
	stLight.options({publisher:"da51c1fc-d02f-45c3-a0cb-57291f638957",shorten:false});		
</script>


	<span class="st_twitter_large" st_url="http://exm.nr/foo" st_title="Title to share" st_processed="yes"></span>
 

Smart hovering bar

This is an example of a hovering bar which stays on the side of the article and persists through the scroll. When the screen is resized, the vertical hover bar becomes a horizontal bar and places itself on top of the article.

Open demo in new window
 
Code
	 
<script type="text/javascript">
	var switchTo5x=true;
	  (function() {
		var stscr = document.createElement('script'); stscr.type = 'text/javascript'; stscr.async = true;
	    stscr.src ="http://w.sharethis.com/button/buttons.js";
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(stscr, s);
		stscr.onload=stCB;
		stscr.onreadystatechange=function(){if(stscr.readyState=='loaded'){stCB();}};})();
		function stCB(){
			stLight.options({
					publisher:'6beba854-ee6d-4ae1-a4f3-b69815c8ef63'
				});
		}
	</script>
	<script type="text/javascript">
		var timeOut = null;
		var shiftButtons = function() { 
		var sharebox = document.getElementById('sharebox');
		if(document.documentElement.clientWidth<1100){
			document.getElementById('verticalbuttons').style.display='none';
			document.getElementById('horizontalbuttons').style.display='block';	
			sharebox.style.position="relative";
			sharebox.style.left="auto";
			sharebox.style.top="auto";
			sharebox.style.marginBottom="6px";
			sharebox.style.marginLeft="auto";
			sharebox.style.marginRight="auto";
			sharebox.style.width="500px";
		} else {
			sharebox.style.position="fixed";
			sharebox.style.left="50%";
			sharebox.style.marginLeft="-566px";
			sharebox.style.top="20px";
			sharebox.style.width="90px";
			document.getElementById('verticalbuttons').style.display='block';
			document.getElementById('horizontalbuttons').style.display='none';
		}
	};
		
	window.onresize = function(){
	   if(timeOut != null) clearTimeout(timeOut);
	   setTimeout(shiftButtons, 1000);
	};
</script>

 

Different Flavors of Google +1

In this example, we showcase the many different variations of Google +1 that we offer.

Open demo in new window
 
Code
	 
<script type="text/javascript">
	var switchTo5x=true;
	  (function() {
		var stscr = document.createElement('script'); stscr.type = 'text/javascript'; stscr.async = true;
	    stscr.src ="http://w.sharethis.com/button/buttons.js";
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(stscr, s);
		stscr.onload=stCB;
		stscr.onreadystatechange=function(){if(stscr.readyState=='loaded'){stCB();}};})();
		function stCB(){
			stLight.options({
					publisher:'6beba854-ee6d-4ae1-a4f3-b69815c8ef63'
				});
		}
</script>

 

Create Share Buttons on-the-spot on Right Click

In this cool implementation, we create the share button on right click right where the user's mouse is. This is helpful if you don't want the users to scroll to find the sharing button and want them to share from where they are.

Open demo in new window
 
Code
	 
<script type="text/javascript">
	function rclick(e){
		var rightclick;
		if (!e) var e = window.event;
		if (e.which) rightclick = (e.which == 3);
		else if (e.button) rightclick = (e.button == 2);
	//	alert('Rightclick: ' + rightclick); // true or false
		if(rightclick==false){
			hideBox();
			return true;
		}
	//	console.log(e);
		var posx = 0;
			var posy = 0;
			if (e.pageX || e.pageY) 	{
				posx = e.pageX;
				posy = e.pageY;
			}
			else if (e.clientX || e.clientY) 	{
				posx = e.clientX + document.body.scrollLeft
					+ document.documentElement.scrollLeft;
				posy = e.clientY + document.body.scrollTop
					+ document.documentElement.scrollTop;
			}
	//		console.log(posx);
//			console.log(posy);
			var retVal=showBox(posx,posy);
			e.returnValue = retVal; 	// necessary for attachEvent, works with traditional
			
		return retVal;
	}
	
	function showBox(x,y){
		var box=document.getElementById("box");
		if(insideBox(document.getElementById("rclick"))){	
			box.style.display = 'block';
			box.style.top=y+"px";
			box.style.left=x+"px";
			return false;
		}else{
			return true;
		}
	}
	
	function hideBox(){
		document.getElementById("box").style.display="none";
	}
	
	function insideBox(box){
	//	console.log(box);
	//	console.log(getHW(box));
	return true;
	}

	function getHW(elem) {
	//	console.log(elem);
		var retH = 0;
		var retW = 0;
		while (elem != null) {
			retH += elem.offsetTop;
			retW += elem.offsetLeft;
			elem = elem.offsetParent;
		}
		return {
			height : retH,
			width : retW
		};
	}

	document.oncontextmenu=function(event){return rclick(event);};
	document.getElementById("rclick").onmousedown=function(event){rclick(event); return false;};

</script>