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

Sharing is Caring

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 the 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 the 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 a 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 pop up a window to share your content to Facebook. You can use any size of the image in this custom link So your large Facebook Share button is ready

large share buttons

Here I am sharing JavaScript function for Twitter and Google+ sharing, in the 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 a window like this when the user clicks on the image link that is using this function. Page URL, Title and your twitter handle will be shared on click of the 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

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *