javascripthtmlfacebookfacebook-like

The Facebook "Like" button doesn't show at all


New to coding, so bear with me if this is really basic! I'm trying to add a FaceBook "like" button to my page. I copied the code exactly as they describe on their instructions site. I entered my page details, the desired width (it fit the limits of what they recommend for the features I selected in the generator), and so on, and then copied/pasted the code into my html. I must be missing something. Their instructions were to paste this into the HTML, preferably just below the opening <body>, so I did:

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

Then they said to copy/paste the following wherever I wanted the button to show up, which I did:

<div class="fb-like" data-href="http://www.facebook.com/musicbyava" data-send="true" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div>

I refresh my page, and there's not a trace of anything in the place where the plugin is supposed to be. Not a dot, not a line, not an error message, nada. What am I missing? Thanks in advance!


Solution

  • Welcome to Stack Overflow.

    There could be an array of problems why the script isn't displaying the like button. Without a url or copy of the outputted html, almost impossible to tell. If you are working on a local network and lose your internet connection, for example, boom, no FB Like box.

    Taking a shot in the dark- This IS a javascript error. Errors in javascript are not displayed to the screen. Instead, they manifest themselves in a near infinite amount of ways, from omitting a single element after page load to loading a white screen.

    If you are working with Chrome or Firefox, you can download an Web Developer extension. I recommend Firebug for Firefox, or Right Click and "Inspect Element" in Chrome (I think this ships with Chrome- otherwise it's the Web Developer Extension)

    Whichever tool you use, all errors with be outputted in the console of these environments.

    And we're just getting started.

    If this sounds like too much work, I recommend trying the above code on a different page to see if the page you are copy&pasting to has malformed html. Then it's back to the above advice.