Sunday, 28 July 2013

Add a FACEBOOK like button in your website using JQuery

  Sometime we had wonder how the like button is integrated with corresponding Social Networking, if we gave like then the corresponding website like information is posted in the social network.

Now let we see how to add the like button in our website?

Get the Jquery SDK from the Facebook then add the element in DIV tag.

<html xmlns="http://www.w3.org/1999/xhtml">
<title>jQuery Implement on facebook Like button </title>
 <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_US/all.js#xfbml=1&appId=497727420302756";
    fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));

window.onload = function ()
{
  var url = window.location.protocol + "//" + window.location.hostname +
 window.location.pathname;
  document.getElementsByClassName ("fb-like")[0].attributes[4].nodeValue =url;
};
</script>
   
<body>
    <form id="form1" runat="server">
 <div class="fb-like" data-href="" data-send="true" data-width="250"
data-show-faces="true"></div>
    </form>
</body>
</html>





From this article you can see the how to add the Facebook like button in your own website.