CODEWITHSUNDEEP
javascriptfacebookfacebook-authentication
pal4life
pal4life

Reputation: 3388

Why does this simple Facebook Javascript SDK code keep failing?

I tried to use some code from the documentation, but it keeps giving me an error: An error occurred. Please try again later. What is wrong with my code?

Relevant JSFiddle: http://jsfiddle.net/AHkXS/

Relevant HTML:

    <html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'YOUR_APP_ID', //I changed this
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
      <div class="fb-login-button" data-scope="email,user_checkins">
        Login with Facebook
      </div>
    </body>
 </html>

Upvotes: 1

Views: 1421

Answers (2)

Danish Iqbal
Danish Iqbal

Reputation: 1464

Below is solution for your problem step by step :)
As I guess your code is not working because you not use javascript properly

You can solve your problem in 4 Steps

Step 1

Create a new facebook app using the link and note its App ID/API Key

Step 2

use your App ID/API Key which you note in Step 1

The following code will load and initialize the JavaScript SDK with all common options. Replace YOUR_APP_ID and WWW.YOUR_DOMAIN.COM with the appropriate values. The best place to put this code is right after the opening <body> tag.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
FB.init({
  appId      : 'YOUR_APP_ID', // App ID
  channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
  status     : true, // check login status
  cookie     : true, // enable cookies to allow the server to access the session
  xfbml      : true  // parse XFBML
  oauth      : true,
});

// Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

Step 3

Create a channel.html file with the below code

  <?php
    $cache_expire = 60*60*24*365;
    header("Pragma: public");
    header("Cache-Control: max-age=".$cache_expire);
    header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
  ?>
  <script src="//connect.facebook.net/en_US/all.js"></script>

Step 4
Add an XML namespace to the <html> tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer.

<html xmlns:fb="http://ogp.me/ns/fb#">

You can read all the above in details where the almost all information is get below is the links

  1. here you can get javascript, channel file details and other details

Thanks...

Upvotes: 2

Mikey G
Mikey G

Reputation: 3491

I think whenever i ran into this problem it was because i was testing it outside of the domain in which my APP ID was valid.

Upvotes: 2

Related Questions