You are here:Home » HTMLTricks » Facebook Like Button Widget for Blogs and Websites

Facebook Like Button Widget for Blogs and Websites

Facebook has amazing and wonderful features for users. It doesn't matter what kind of user you are, business partner or a simply user. 

If you are the business partner than this feature can boost your Facebook likes and also help increase your sales and interaction on your page as well as your website. 

Lots of people don't know about these simple features of Facebook. They are unknown and they are developing everything from scratch. 

Yes, I know developing apps or widget from scratch is good for knowledge and for ownership but it takes lots of time to code and develop each and every component. That's why it is better to use third party widgets for faster and easy. 

Facebook Like Button Widget for Blogs and Websites

Create Facebook Like Button through Facebook

  • To create Like Button, you have to Click on Social Plugins. It is actually a developer option for Facebook users. 
  • Now Fill-up the form for Like Button. 
  • Choose what kind of like box you wanted.
  • Now click on Get code. 
  • Copy the given code by the social plugin and follow the steps.
  • Go to the template >> edit the template. 
  • Now find <body> tag. Paste the copied code or copy below code and paste it into the body.
<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); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  • Save template and now go for next steps.

Adding Widget to Blogger.

  • Click on Layout tag
  • Click on Add a Gadget.
  • Now Scroll down and go for HTML/Javascript.
  • Copy the another code given by Social plugin or copy below code. Here you have to replace the username = ansmachine with yours. 

<div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
  • Now click on save button. you are done.
That's it... 
You are done...