Social Media is very important source to attract many visitors and gain popularity across many social networking sites so it is better to add social media buttons to your website that keeps the user to instantly share and like your content with ease.
In this tutorial we will tell you how to add some Social Networking Sites Share or Like Buttons to your website or in your blog.
facebook Like and Share Button:-
Insert this Script and HTML code anywhere you wanted in your webpage
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); } (document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="URL of Your Webpage" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
To know more visit their official page
Twitter Tweet Button:-
Insert this Script and HTML code anywhere you wanted in your webpage
<script> window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs")); </script> <a class="twitter-share-button" href="https://twitter.com/share" data-url="URL of your webpage"> </a>
To know more visit their official page
Google Plus Share Button:-
Insert this Script and HTML code anywhere you wanted in your webpage
<script src="https://apis.google.com/js/platform.js" async defer></script> <div class="g-plus" data-action="share" data-annotation="bubble" data-href="URL of your Webpage"></div>
To know more visit their official page
LinkedIn Share Button:-
Insert this Script and HTML code anywhere you wanted in your webpage
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script> <script type="IN/Share" data-url="URL of your Webpage" data-counter="right"></script>
To know more visit their official page
StumbleUpon Share Button:-
Insert this Script and HTML code anywhere you wanted in your webpage
<script type="text/javascript"> (function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); </script> <su:badge layout="1"></su:badge>
To know more visit their official page
Thats all, how to add Social Media Buttons to your website and blog. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery