Simple jQuery Social Share Buttons

 

With social media being an integral part of the Internet nowadays it's important to allow people to share your content via their social channels. This tutorial is aimed to give you a nice set of unobtrusive social buttons. The main focus of the tutorial is the JavaScript / jQuery rather than the CSS I'm using for my own buttons. With that being said, this is the code I'm using for this website.

jQuery

The code below is using a JavaScript library called jQuery. Libraries are great because they give you numerous features already built in - such as animation.

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML.[4] It was released in January 2006 at BarCamp NYC by John Resig. A team of developers led by Dave Methvin currently develops it. Used by over 65% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. Wikipedia / jQuery

Remember, for the code below to work you need to include the jQuery library on your website.

The Code

To start with we want to create a new jQuery function, I'm going to use the action of clicking a class "social". Additional to this I'm going to use 2 functions included within jQuery to stop any HTML links with class="social" from working.

$('.share', this).bind('click', function(e) {
 e.preventDefault();
   e.stopPropagation();
});
 

Next we need to define our variables. The "loc" variable is the URL of the page, the action is a custom attribute which is defined in the HTML.

var loc = location.href;
var action = $(this).attr('data-action');
 

Next we use a simple IF to work out the button and urls to use (the urls have come from the developer sites). With that all added in our final code should look like this:

$('.share', this).bind('click', function(e) {
 e.preventDefault();
 e.stopPropagation();
 
 var loc = location.href;
 var action = $(this).attr('data-action');
 
 if( action == 'twitter' )
 {
  var title  = $(this).attr('title');
  
  window.open('http://twitter.com/share?url=' + loc + '&text=' + title + ' - ' + loc + ' - via @twitter', 'twitterwindow', 'height=255, width=550, top='+($(window).height()/2 - 225) +', left='+($(window).width()/2 - 275 ) +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
 }
 else if( action == 'facebook' )
 {
  var t = document.title;
 
  window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(loc)+'&t='+encodeURIComponent(t),'sharer','status=0,width=626,height=436, top='+($(window).height()/2 - 225) +', left='+($(window).width()/2 - 313 ) +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
 }
 else if( action == 'google' )
 {
  window.open('https://plus.google.com/share?url='+encodeURIComponent(loc),'Google Share','status=0,width=626,height=436, top='+($(window).height()/2 - 225) +', left='+($(window).width()/2 - 313 ) +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0'); 
 }
});
 

The HTML for our buttons is simply:

<a class="share" data-action="facebook" href="http://www.facebook.com">Facebook</a>
<a class="share" data-action="google" href="http://plus.google.com">Google Plus</a>
<a class="share" data-action="twitter" title="Twitter message goes here" target="_blank">Twitter</a>
 

There you go... a short but sweet tutorial to add Twitter, Facebook and Goggle Plus social buttons to your website using jQuery.