Having never dealt with Facebook at a developer level, I’m sure that I’m doing something very obviously wrong here. Anyway, here’s the problem:
I generate the like button code from https://developers.facebook.com/docs/reference/plugins/like/ and then copy it into my page. When I try to view the site I get nothing displaying.
I noticed that the url in the script section fails to include the protocol (it comes out with: “//connect.facebook.net/en_US/all.js#appId=207642302633270&xfbml=1”). When I have a look what’s happening using Firebug I can see that it’s inserting the script tag into the head section – but the URL doesn’t work. I’ve tried modifying it to include “https:” as the protocol and I then see that the script gets loaded and that also it inserts a bunch of CSS into the head section.
But still nothing displays on the site.
The only thing I can think of that could be problematic is that I (or, more specifically, my client) doesn’t have a Facebook company profile of any sort – I can ask them to set one up if required but this would not be the preferred option as they don’t want to maintain a Facebook profile for the business.
Here’s a stripped down sample I’m working with:
<html>
<head>
<title>Testing the Like Button</title>
<meta property="og:title" content="Company FB Test" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://www.domain.com/fb-test.html" />
<meta property="og:image" content="http://www.domain.com/logo.png" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:admins" content="__MY_FB_ID__" />
</head>
<body>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "https://connect.facebook.net/en_US/all.js#appId=207642302633270&xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="67" data-show-faces="false" data-font="arial"></div>
</body>
</html>
A couple of notes:
- The sample includes the protocol “https:” – as mentioned, I’ve tried without as well.
- This has been tested in the latest versions of Chrome 13, Firefox 6 and IE 9
- I’ve tested this in Facebook Lint and it gives me no errors.
Thanks in advance to whoever succeeds in pointing out the obvious to me – and to anyone else who chimes in with any friendly advice.
Cheers,
Zac
You need to make sure to add this code somewhere in your page:
You will see in the chrome debugger tool that there is an error saying it can’t find that div.