0

I've recently taken over the management of a website, and I have set up a local test instance of the website so that I can make changes slowly, test them etc, and then move them over. Without having to risk the integrity of the live version. I had to convert a few hrefs etc for it to work locally, but the problem I am having is that the facebook like buttons are no longer displaying.

I've read that there are some issues with the way that facebook caches our sites that can sometimes cause this issue, but the answer has been to use the facebook dubugger to test the site. I can't do that because the site is local, and the like button is working fine on the live hosted version.

Edit: To clarify, I have run social media buttons on local sites before, so this isn't the problem. The buttons are not even displaying on the local test version.

Below is the script I am using and the div (I am using facebook's HTML5 version);

<div id="fb-root"></div>
<script type="text/javascript">
(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>

And here is one of the divs I am using to mark the buttons' position.

<div class="fb-like" data-href="http://www.4siteconsulting.co.uk/case-study-1.html" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>

The divs are obviously linked to the live site, because people can't like a local version.

Anyone have any thoughts?

Rudi Kershaw
  • 12,332
  • 7
  • 52
  • 77
  • Have a read at this, might help understand the problem http://stackoverflow.com/questions/7595989/how-do-i-test-the-facebook-like-button-on-localhost – Reyno Jul 18 '13 at 09:22
  • Thanks for the help Reyno, except the like button can be run on a local host. I know because I've done it before. I have it working on multiple different local test version of other sites. The hobbie site I am currently making is being built locally and it is using the like button, and it works fine both local and hosted. – Rudi Kershaw Jul 18 '13 at 09:33

2 Answers2

1

Although it's hardly a satisfactory answer, I have switched from using the HTML5 version from the facebook developers to their iframe version. The iframe has fewer customization features, but it runs locally without issue after a small adjustment.

I had to append "http://" to the beginning of the iframe href address for it to work locally, but it's all working now. The following code is what now works on a local site (Not hosted);

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.4siteconsulting.co.uk%2Fcase-study-2.html&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
Rudi Kershaw
  • 12,332
  • 7
  • 52
  • 77
0

It is working, you are however missing a > in the last line of code right before </div>

Nader Alexan
  • 2,127
  • 22
  • 36
  • Apologies, looks like that ">" was lost copying the code over to SO. It's there in the test instance. Also, it's definately not working. The buttons aren't even displaying. – Rudi Kershaw Jul 18 '13 at 08:42
  • I can see that it's working, because the live version of the site is using the same code and that is working fine. The problem I have, is that it isn't working on my local (not hosted online) version. – Rudi Kershaw Jul 18 '13 at 09:01
  • Well, if you mean that you need to use it without an internet connection then you better just copy an image of the button and use it until you want to deploy. – Nader Alexan Jul 18 '13 at 09:39
  • "The divs are obviously linked to the live site, because people can't like a local version." was in the original question. They run on a local html page, but are linked to a live site. I've managed to get it working by switching to the Facebook Like iframe version. But I am not happy with it because the damn frame is near impossible to position correctly. – Rudi Kershaw Jul 18 '13 at 11:18