CODEWITHSUNDEEP
facebookfacebook-like
Vladimir Vaskev
Vladimir Vaskev

Reputation: 1

Facebook Button not showing

so I've tried every solution to add a like button for my facebook page to by website (local, not published). But for some reason none of the solutions have worked. Here's the code I'm trying in a blank html file. And by blank I mean the head, title, and body are empty, other than the below code in the body section.

<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="http://www.facebook.com/ResumeBuildingVolunteering" data-send="false" data-width="450" data-show-faces="true"></div>

Upvotes: 0

Views: 5330

Answers (3)

Chris Frank
Chris Frank

Reputation: 4462

Because you're working on your local system the

//connect.facebook.net/en_US/all.js#xfbml=1

will not work. This is because the link is a "Protocol-relative URL" which takes the current protocol you're using.

So if you're working locally on a Mac, that URL will look for a file at file:///en_US/all.js#xfbml=1 which doesn't bring up anything. You will need to change the url to

http://connect.facebook.net/en_US/all.js%23xfbml=1&status=0

Upvotes: 4

ferret96
ferret96

Reputation: 89

I had the same problem. Try using the actual button div like this first:

<div class="fb-like" href="https://www.facebook.com/mypage"> </div>

Notice the s on https.

It worked for me.

Upvotes: 0

Sagish
Sagish

Reputation: 1065

This script should be put at the bottom of your HTML, just before it's closing </body> tag. Reason being, when it's invoked it parses the page and renders Facebook's elements. If it's invoked prematurely, like in your case, this elements won't be found (because they don't exist yet) and therefore not rendered. Another option is to invoke the script only after the DOM is ready, using jQuery $(function(){...} or by other techniques, or use an async load of the FB page like explain here

Upvotes: 1

Related Questions