Unable to test facebook like button on localhost (unlike before)

问题

I had developed one small webpage with facebook social plugins (like, recommend and send buttons). I could test the buttons and the click events successfully on localhost till around a month ago; but suddenly the buttons are not working on localhost now. They work only if I deploy the webpage on a public IP through "localtunnel". On localhost, they show the number of likes and names, but don't give a flyout on clicking the button. Also, the subscribed event "edge.create" is not fired.

I have copied all the required javascript from the facebook like button widget page. I also found out that there is some difference in the traffic pattern on localhost and tunneled deployment. The GET oauth request returns 302 status on localhost while 200 on public domain. Also, the deployment on public domain makes many GET requests after clicking the button to fetch some CSS and images. Whereas the localhost page makes only one request and stops there. I am not able to understand why this is happening.

Has facebook recently stopped supporting anything required for testing the buttons on localhost?

回答1:

Complementing on @C-Dan's answer, make sure to have the data-href attribute point to a live site, and not your localhost. That did the trick for me.

回答2:

I can see likes and like on localhost too (the button and count on my site)

Make sure you have

<html xmlns:fb="http://ogp.me/ns/fb#">

in the html tag

and the actual like div wherever you want in the body -

<div class="fb-like" data-font="verdana" data-href="http://facebook.com/CDanArt" data-layout="button_count" data-send="true" data-show-faces="false" data-width="120" style="margin: 0px 0px 0px 0px;"></div>

and

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

right before your body tag ends.

Of course, use you data-href in the like div and appID in the script function.

This code is working perfectly fine for me on localhost. If you copy the code as it is and still can't see the like button on localhost, then check if something else is breaking your like button.

来源：https://stackoverflow.com/questions/10292850/unable-to-test-facebook-like-button-on-localhost-unlike-before

标签

facebook

facebook-like

localhost