✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Add Social Media Buttons To Your Website Or Blog

Last Updated : Apr 15, 2022

IN - 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.

Add Social Media Buttons To Your Website Or 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