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.

Crapshooter

Well, I've found a partial answer. For (3), the tags mentioned are meta tags with this format: <meta property="og:type" content="website"> This suggests that if I included the fb:app_id meta tag, I'd lose the first javascript warning. As far as I can tell, I'd still get the second warning. Also, I now think what I described as a php error is in fact a javascript error. Oddly enough it shows up in the Safari Web Inspector but not in Google Developer Tools, Opera Dragonfly, or Firebug. – Crapshooter

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

Prosaic

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

Valency

Thanks Marco, this is indeed useful. – Crapshooter

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

Haemophilic

Answer 4

Here is what worked for me (found my answer here http://developwithguru.com/solve-invalid-app-id-must-be-a-number-or-numeric-string-representing-the-application-id/)

Basically, 1)go to developer page 2)create new app 3)get id 4)apply id to your code..e.g(js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=16digIdHere";)

Downcome