Facebook, Twitter, Google - Create large share buttons using JavaScript

This post is not like my other posts (ADF & Java), It is about creating custom large share buttons for Facebook, Twitter and Google+
Actually this share functionality of social networking sites (Facebook, Twitter, Google+ etc) works on a particular url pattern

Let's take example of Facebook , to share any url on Facebook just pass that url as a parameter in this url
http://www.facebook.com/share.php?u=url
See when i open this url on browser (I have passed www.awasthiashish.com in url parameter)
http://www.facebook.com/share.php?u=www.awasthiashish.com , it shows standard Facebook share page

So it means our task is to get current page url and pass that url as parameter in this standard url to make a share button for Facebook
For this i have created a JavaScript function that gets current page url, adds this to standard share url and open it

<!-- Method to share current page on Facebook-->

function invokeFaceookShareFeature(){
//Get Current page url
var webSiteurl=window.location.href;

//Add this url to standard Facebook share url-->
var url="http://www.facebook.com/share.php?u="+webSiteurl;

//Open this url in a new 500x500 window
window.open(url,"Facebook", "width=500,height=500");

}

Now add this function to your html page and call it from an image link like this

<a href="" onclick="invokeFaceookShareFeature()">
<img src="fb_share.png"/>
</a>

All done your Facebook share button is ready , now when you open a page and click on this button it will popup a window to share your content to Facebook. You can use any size of image in this custom link So your large Facebook Share button is ready

Here i am sharing JavaScript function for Twitter and Google+ sharing, in same way both can be used

Share content to Twitter-

//Method to share current page on Twitter

function invokeTwitterShareFeature(){
//Get Current page url
var webSiteurl=window.location.href;

//Get Title of current page
var title=document.title;

// Pass all parameters in standard twitter share url
var url="http://twitter.com/intent/tweet?url="+webSiteurl+"&text="+title.substring(33,title.length)+"&via=ashish__awasthi";
  
  //Open this url in a new 500x500 window
window.open(url,"Twitter", "width=500,height=500");
}

This method shows window like this when user clicks on image link that is using this function. Page url , Title and your twitter handle will be shared on click of button

Share content to Google+

// Method to share current page on Google+

function invokeGoogleShareFeature(){
 
//Get Current page url
var webSiteurl=window.location.href;

//Add this url to standard Google+ share url-->
var url="https://plus.google.com/share?url="+webSiteurl;

//Open this url in a new 500x500 window
window.open(url,"google", "width=500,height=500");

}

This shows Google+ share window , that shares passed url to google

This page uses all three buttons you can check functionality here
Cheers :) Happy Learning