Like and Share buttons in webpage cause javascript warnings and php error

Question

I have added basic Facebook "Like/Share" buttons to a webpage, using code copied directly from the Facebook Developers page. There are 2 parts to the code: a javascript block and a div tag with a class of "fb-like" Heres the javascript:

<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>

And here's the div tag for where I want the buttons to appear:

<div class="fb-like" data-href="http://www.bethcake.com" data-width="90" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

Here are the problems I'm encountering:

1. When the webpage loads, I get 2 javascript warnings. The warnings refer to the connect.facebook.net source code, line 233, not any code I've written. They are:

   • Invalid App Id: Must be a number or numeric string representing the application id.
   • FB.getLoginStatus() called before calling FB.init().

2. Also on page load, I get a php error (like.php.1:948):

   • Blocked a frame with origin "http://www.facebook.com" from accessing a frame with origin "http://www.bethcake.com". Protocols, domains, and ports must match.

   This error is puzzling. First of all, I'm not using frames. Second, the protocols do match and there is nothing here about ports. Of course the domains don't match: I'm not trying to collect "Likes" for a Facebook page; I want to get "Likes" for an external website page. Am I missing something?

3. I ran the URL through the Facebook Open Graph Object Debugger. It brought up a number of warnings I don't understand. They are:

   • fb:admins and fb:app_id tags are missing.
   • og:title, og:type, and og:image are missing.
   • og:url, go:title, go:description, and go:image properties should be explicitly provided

Okay, fine. But where and how am I supposed to add these? I've looked through the Facebook documentation and searched stackoverflow, without success. If these are supposed to be added to the data-href string in the div tag, please give me an example.

Answer 1

I was getting the same javascript warnings as you mention in your first issue and adding an appId parameter to the URL in facebook code resolved both of them. So just change this line:

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

to

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567891234567";

To get a facebook appId, go to: https://developers.facebook.com/apps

Answer 2

Hope you have already solved this problem.

But if this is help for someone, this answer helps about the "FB.getLoginStatus()" called before calling FB.init()" -> https://stackoverflow.com/a/16593474

Answer 3

As @smohajer pointed above you need to add the appId but with the new SDK you need to do some small changes otherwise you'll see some errors or warnings:

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1234567891234567&version=v2.2";

You'll have to upgrade before April 30, 2015: https://developers.facebook.com/docs/apps/upgrading