CODEWITHSUNDEEP
javascriptfacebookhtmlwebfacebook-like
Rudi Kershaw
Rudi Kershaw

Reputation: 13012

Facebook Like Button on Local Site

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?

Upvotes: 0

Views: 2458

Answers (2)

Rudi Kershaw
Rudi Kershaw

Reputation: 13012

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>

Upvotes: 1

Nader Alexan
Nader Alexan

Reputation: 2222

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

Upvotes: 0

Related Questions