Ultimate Guide to Add Social Sharing Buttons in HTML Website

Hi everyone, welcome pinepl, in this article we are going to show you how to add social sharing buttons in HTML website, if you are having a website in HTML so this article is very useful for you, if you are running your website or blog in any cms like WordPress so it’s article not for you because WordPress having lots of ready mate plugins to add social sharing buttons in website, so without time wasting let’s start.

Here first thing is you need to download social sharing buttons pack for free, just click on below link and download file and use it.

Download Social Button Pack

After Successfully download social sharing button pack, see below step, here we will show you most popular nine social website sharing code because most of website provides same method to add social sharing button in website.

Button Code

Facebook


//Facebook
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://www.facebook.com/sharer.php?u=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" title="Share on Facebook">
<img src="images/social/facebook.png" alt="Share on Facebook"/>
</a>

Twitter


//Twitter
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://twitter.com/share?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on Twitter">
<img src="images/social/twitter.png" alt="Share on Twitter"/>
</a>

Google+


//Google+
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://plus.google.com/share?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on Google+">
<img src="images/social/google.png" alt="Share on Google+"/>
</a>


//LinkedIn
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://www.linkedin.com/shareArticle?mini=true&amp;url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on LinkedIn">
<img src="images/social/linkedin.png" alt="Share on LinkedIn"/>
</a>

/
//Pinterest
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" title="Pin on Pinterest">
<img src="images/social/pinterest.png" alt="Pin on Pinterest"/>
</a>

StumbleUpon


//StumbleUpon
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://www.stumbleupon.com/submit?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on Stumbleupon">
<img src="images/social/stumbleupon.png" alt="Share on Stumbleupon"/>
</a>

Tumblr


//Tumblr
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://www.tumblr.com/share/link?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on Tumblr">
<img src="images/social/tumblr.png" alt="Share on Tumblr"/>
</a>


//Reddit
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://reddit.com/submit?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on Reddit">
<img src="images/social/reddit.png" alt="Share on Reddit"/>
</a>

Diggit


//Diggit
<a data-placement="bottom" href="javascript:void(0)" onclick="var sTop = window.screen.height/2-(218); var sLeft = window.screen.width/2-(313);window.open('https://www.digg.com/submit?url=' + 'You Current Page URL','sharer','toolbar=0,status=0,width=626,height=456,top='+sTop+',left='+sLeft);return false;" target="_blank" title="Share on Diggit">
<img src="images/social/diggit.png" alt="Share on Diggit"/>
</a>

Implements Above Code

Here first thing is to open your existing HTML file in any text editor like notepad or notepad++, and navigate where you show this sharing button in your page like a top of page or bottom of a page, see below example for better understanding.

Example


//Simple Example
<html>
<head>
     <title>Social Sahre Button Example | Veewom</title>
</head>
<body>
//Content Section
<div>
//Paste Above Code Here
<p>Hey, this is sample content of this page, only for example.</p>
//Paste Above Code Here
</div>
//End Content Section
</body>
</html>

Live Demo

Click Here To See Live Demo

We hope this article helped you learn how to easily Add Social Sharing Buttons in HTML Website. You may also want to see – How To Change The Default WordPress Email Address.

If you liked this article, then please share to social networking site. You can also find us on Twitter,Facebook and Instagram.