Adding facebook like button inside a div is not working

Question

I am trying to add facebook like button inside a div but its not working.

I have included javascript sdk given by facebook. Here is facebook instruction on adding like button https://i.stack.imgur.com/wol2G.jpg and below is my code:

body {
    margin:0px;
    padding:0px;
}
#wrapper {
    width: 100%;
    height: 50px;
    background-color: black;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css" />
</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/sdk.js#xfbml=1&version=v2.3";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div id="wrapper">
        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>
</body>
</html>

Describe exactly what is not working. "Not working" is too broad. — Support Ukraine, May 17 '15 at 18:01
I suggest you go back to facebook developer tools and follow the instructions more carefully — Tatenda, May 17 '15 at 18:08
@Tatenda sorry missed that whie pasting, i am including that, and here is the simple instruction by facebook, that i have already incorporated. http://i.imgur.com/42iLPDy.jpg — Saurabh Chaudhary, May 17 '15 at 18:19

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Because of the following line of code, I think you need to test this on a web server:

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";

*Update: It will NOT work locally, even if you add http: in front of the //. I just uploaded a test page using your code to my hosting account and the buttons appeared just fine.

*Update2: This link explains why Facebook requires the site to be hosted rather than local for this button to work: How do I test the Facebook "Like" button on localhost?

edited May 23 '17 at 12:05

Community

1
1

answered May 17 '15 at 18:11

Thinkstr8

126
4

thanks, it worked when I uploaded it on webserver, locally it didnt work. – Saurabh Chaudhary May 17 '15 at 18:32

score 0 · Answer 2 · answered May 17 '15 at 18:41

i can see you did not do anything wrong. try adding the following before script:

window.fbAsyncInit = function() {
FB.init({
  appId      : 'your fb app id',
  xfbml      : true,
  version    : 'v2.3'
});
};

then this where you want the code to be

  <div
        class="fb-like"
        data-share="false"
        data-width="20"
        data-show-faces="false">
    </div>

Adding facebook like button inside a div is not working

2 Answers2