CODEWITHSUNDEEP
javascripthtmlfacebookapifacebook-like
user2288958
user2288958

Reputation: 1

Facebook-like button not working

The Facebook-like button I use in my code is not working. I have done everything that was necessary: placed the JavaScript code below the body tag and the other div tag for it was placed where I wanted the button to appear, but I didn't succeed. Here is my code:

<head>
    <meta charset="UTF-8" />
    <title>Riparian Preserve Survey</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-responsive.min.css"type="text/css"/>
    <link rel="stylesheet" href="bootstrap.css" type="text/css"/>
    <script src="jquery-1.9.1.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap.js"></script>

    <style>
        img {
            max-width: 100%;
        }
        body{
            background-color: #A4A4A4 ;
        }
    </style>
</head>
    <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); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>    
...
 <div class="fb-like" data-href="https://www.facebook.com/GilbertTownHall"data-  send="true" data-width="450" data-show-faces="false"></div>

Upvotes: 0

Views: 2158

Answers (2)

jherax
jherax

Reputation: 5267

Try some like this:

window.fbAsyncInit = function () {
    if (FB.init) return;
    // init the FB JS SDK
    FB.init({
        appId: 'YOUR_APP_ID', // App ID from the App
        //channelUrl: '//' + window.location.hostname + '/channel.html',
        //This to get the user details back from Facebook
        //scope: 'id,name,gender,user_birthday,email', etc
        status: true, // check the login status upon init?
        cookie: true, // set sessions cookies to allow your server to access the session?
        xfbml: true  // parse XFBML tags on this page?
    });
}

At the end of HTML Body...

<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.async = true;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));
</script>

Also you can use fb embeded iframe
Facebook Like Button Reference

Upvotes: 0

ShaneTheTech
ShaneTheTech

Reputation: 157

Facebook uses an SDK i believe that is loaded first, this is on their site have you tried this ?

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Upvotes: 1

Related Questions