Facebook Plus Twitter Share Button Using CSS and Javascript

Are you looking for Facebook and Twitter share button like most to the site are using, in today's post i will explain you on how to create a Facebook and Twitter share button using CSS, HTML and Javascript. Most of the top site have already started using this feature to share their post. You need to add just add few lines of code in your template.

CSS Code
Add the CSS Code inside the ]]></b:skin> tag of your blog template.

.facebook-sharing {
background: #3b5998;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 1em 2em;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: sans-serif;
margin: 0;
text-align: center;
}

.twitter-sharing {
background: #57cff4;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 1em 2em;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: sans-serif;
margin: 0;
text-align: center;
}

HTML Code
Now add this code where you want the share button to appear on your blog.

<div class="twitter-sharing" data-tnb="twitter-share">Share on Twitter</div> <div class="facebook-sharing" data-tnb="facebook-share">Share on Facebook</div>

Javascript Code
Add the Javascript Code before the </body> tag of your blog template.

<script type="text/javascript">
var twitterShare = document.querySelector('[data-tnb="twitter-share"]');

twitterShare.onclick = function(e) {
e.preventDefault();
var twitterWindow = window.open('https://twitter.com/share?url=' + document.URL, 'twitter-popup', 'height=350,width=600');
if(twitterWindow.focus) { twitterWindow.focus(); }
return false;
}
</script>
Add the Facebook script after the above script.
<script type="text/javascript">
var facebookShare = document.querySelector('[data-tnb="facebook-share"]');

facebookShare.onclick = function(e) {
e.preventDefault();
var facebookWindow = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=350,width=600');
if(facebookWindow.focus) { facebookWindow.focus(); }
return false;
}
</script>

Note:- You can change the share button color by changing the background color code in CSS.