Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Add Social Media Buttons To Your Website Or Blog.

Tuesday, Apr 4, 2017

Tags:- Social Media


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.

Social Media Buttons


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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email