Having issues with Facebook's login API for JavaScript?

Apologies for the improper formatting. I am encountering errors in my JavaScript compiler while working with the Facebook Login API...

Error: Invalid App Id - Must be a number or numeric string representing the application id." all.js:53

"FB.getLoginStatus() called before calling FB.init()." all.js:53

Content Security Policy Error: Couldn't parse invalid source chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl

Content Security Policy Error: Failed to parse unrecognized source chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl

GET [HTTP/1.1 200 OK 1072ms] "fb:login_button failed to resize in 45s"

I have verified that I am using the correct URL and app_id, my URL is

If anybody could provide assistance or guidance on this matter...

 <html>

<body>
<div id="fb-root"></div>
<script>
   window.fbAsyncInit = function() {
   FB.init({
   appId      : '{283742071785556}',
   channelUrl : 'http://myimprint.herokuapp.com/',
   status     : true, // check login status
   cookie     : true, // enable cookies to allow the server to access the session
   xfbml      : true  // parse XFBML
     });

  // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
 // for any authentication related change, such as login, logout or session refresh.   This means that
 // whenever someone who was previously logged out tries to log in again, the correct case below 
  // will be handled. 
      FB.Event.subscribe('auth.authResponseChange', function(response) {
   // Here we specify what we do with the response anytime this event occurs. 
      if (response.status === 'connected') {
     // The response object is returned with a status field that lets the app know the current
    // login status of the person. In this case, we're handling the situation where they 
    // have logged in to the app.
  testAPI();
} else if (response.status === 'not_authorized') {
  // In this case, the person is logged into Facebook, but not into the app, so we call
  // FB.login() to prompt them to do so. 
  // In real-life usage, you wouldn't want to immediately prompt someone to login 
  // like this, for two reasons:
  // (1) JavaScript created popup windows are blocked by most browsers unless they 
  // result from direct interaction from people using the app (such as a mouse click)
  // (2) it is a bad experience to be continually prompted to login upon page load.
  FB.login();
} else {
  // In this case, the person is not logged into Facebook, so we call the login() 
  // function to prompt them to do so. Note that at this stage there is no indication
  // of whether they are logged into the app. If they aren't then they'll see the Login
  // dialog right after they log in to Facebook. 
  // The same caveats as above apply to the FB.login() call here.
  FB.login();
          }
        });
      };

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

  // Here we run a very simple test of the Graph API after login is successful. 
  // This testAPI() function is only called in those cases. 
   function testAPI() {
   console.log('Welcome!  Fetching your information.... ');
   FB.api('/me', function(response) {
  console.log('Good to see you, ' + response.name + '.');
   });
  }
  </script>
 <fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
 </body>
 </html>

Answer №1

App Id is not valid: It should be a numeric value or a string containing only numbers representing the application ID.

Please update the following line:

appID      : '{673849201083754}',

to either:

appID      : "673849201083754",   /* numeric string */

or

appID      : 673849201083754,  /* number */

Answer №2

accountId      : '392847584593862',

should address the issue at hand

Answer №3

The main issue lies in the App ID being passed as a string, but there is another crucial factor to consider: it is imperative to utilize FB.login within a mouse event listener. Here's why:

  • When users visit your Website/App for the first time, they prefer not to be immediately bombarded with an authorization/login request. It is essential to initially showcase what your Website/App has to offer and provide a clear "Login" button/link.
  • If FB.login is not triggered within a mouse event listener, popup blockers may prevent the login window from opening. Login popups typically appear as browser popups on external Websites.

Additionally, using FB.login with the JavaScript SDK eliminates the necessity for the "fb:login-button" element.

Answer №4

function initializeFacebookAPI() {  
    // Initializing JS API for Facebook
    FB.init({
    appId  : '{Your-16 digit App ID}',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    oauth  : true // enable OAuth 2.0
    });
};

If you're facing this issue, simply create a new app in the Apps section on Facebook. Then return to the Facebook Social Plugins page, select a plugin, and regenerate the code for it.

Your Facebook plugin code without an App ID:

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

After assigning an App to the plugin

<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&appId=<your-16-digit-app-id>";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Did you notice the highlighted changes in the code? Let me know if this resolves your issue by commenting below.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges arise when attempting to break down an API into separate components rather than consolidating it into a

I've been struggling with this issue for a few days now. Problem Explanation: I am trying to use Axios to fetch data and store it in the state for each individual Pokémon. However, currently all the data is being rendered inside a single component w ...

AngularJS is unable to properly display (parse) data fetched using $http.get from Laravel5

Working on my SPA project, I have integrated Laravel 5 for database management and used AngularJS for the front-end. All Angular files are stored in the public folder. Instead of displaying a list of users when visiting localhost, it shows: {{ user1.name ...

The functionality of window.event.target appears to be malfunctioning in the Firefox browser

I have been working on an angularjs application. We have implemented a functionality to display alerts for unsaved changes using window.event.target. Everything was functioning correctly in all browsers except for <code>Firefox. The error message w ...

What is causing the click function to malfunction after selecting a second item?

I'm struggling to understand why my click function isn't functioning properly. You can view the JSFiddle here: http://jsfiddle.net/adbakke/ve9oewvh/ This is a condensed version of my HTML structure: <div class="projectDisplay"></div&g ...

Unpacking nested objects using dynamically generated property names in a React state - a guide

Having trouble with using setState and figuring out how to destructure the object with a dynamic property name, denoted by id. The state looks like this after computation: { "inputConfig": { "5d4d684cadf8750f7077c739": { "0": "5d4d ...

How can I position text below a ticked checkbox?

Having an issue with my HTML and jQuery code. Everything is working fine, but when I click on a checkbox, the text "FINISHED" appears below all checkboxes instead of just the one I clicked on. This is my html code: $('.label__checkbox').cli ...

Is there a problem with AngularJS $state.go() not emitting $stateChangeSuccess?

In my scenario, I have controllers A and B located in different states. When I trigger $state.go('state_b');, Angular switches to state state_b and loads controller B. However, what surprises me is that I do not receive $stateChangeSuccess in my ...

Using Vue.js to filter a list based on index matches

I need help with synchronizing two lists. The first list is displayed in a carousel format, and the second list contains details corresponding to each card in the carousel. I have successfully implemented logic to track the current index of the displayed c ...

Attempting to call setState (or forceUpdate) on a component that has been unmounted is not permissible in React

Hello everyone! I am facing an error message in my application after unmounting the component: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, canc ...

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

The video attribute in HTML is malfunctioning on the react webpage

Currently working on setting up a basic portfolio layout with a video playing in the background on loop. However, despite making some adjustments and modifications, the video is not showing up as expected. Any insights or suggestions on what might be causi ...

`Incorporating dynamic link filtering in vis.js`

Can links and nodes be filtered in a vis.js network? I have configured a DataSet for both nodes and edges as follows: function drawNetwork(container){ var nodes = new vis.DataSet(); populateNodes(nodes); // implementation details skipped ...

Learn how to utilize a Library such as 'ngx-doc-viewer2' to preview *.docx and *.xlsx files within the application

After 3 days of searching, I finally found a solution to display my *.docx and *.xlxs files in my angular application. The API returns the files as blobs, so my task was to use that blob to show the file rather than just downloading it using window.open(bl ...

Converting lists to JSON format in a C# web form

Utilizing JSON.stringify, I have implemented textbox autocomplete for a web-form that suggests city names based on user input. The goal is to retrieve relevant city names from the database and display them as suggestions in the autocomplete feature after t ...

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

A guide on how to associate data in ng-repeat with varying indices

Here is the data from my JSON file: var jsondata = [{"credit":"a","debit":[{"credit":"a","amount":1},{"credit":"a","amount":2}]}, {"credit":"b","debit":[{"credit":"b","amount":3},{"credit":"b","amount":4},{"credit":"b","amount":5}]}, {"credit":"c","debi ...

React Native: Enhance the background with a vibrant stripe of color

I am trying to incorporate a strip of grey in the middle of my white background, but I am encountering an issue where I am unable to input any text inside it. Below is the code snippet I am working with: container: { flex: 1, justifyContent: "cent ...

Changing return values with Jest mocks in TypeScript

Here I am again with a very straightforward example. In summary, I require a different response from the mocked class. Below is my basic class that returns an object: class Producer { hello() { return { ...

A more efficient method for passing a function as an argument using the keyword "this"

When it comes to passing a function as an argument that uses the this keyword, is there a preferred method or correct way to do so? An example would be helpful in understanding this concept better: For instance, if I want to fade out an object and then r ...

Troubleshooting: React Native and OneSignal notifications not showing up

Currently, I am developing an app in React Native and working on integrating notifications with OneSignal. Although I am able to efficiently receive notifications, I do not want them to be displayed on the screen when they are received. I came across a ` ...