✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

Add Social Media Buttons To Your Website Or Blog

Last Updated : Jul 1, 2023

IN - Social Media | Written & Updated By - Dikshita

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

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.

I hope this tutorial on add Social Media Buttons helps you and the steps and method mentioned above are easy to follow and implement.

About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪

RELATED TUTORIALS