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

Troubleshooting the issue: Node.js application unable to utilize Mongodb's $addToSet functionality

I'm having an issue with mongo's $addToSet function not properly adding a Store to my stores array (where I have commented out seemed to work), resulting in duplicate IDs. Can anyone help me identify my mistake and suggest a solution? Thank you. ...

I encountered a problem with routing in my MERN project while trying to implement a feature I learned from a YouTube tutorial

My first question on stackoverflow. To summarize: I followed a YouTube video and downloaded the course code from the GitHub link provided, but I'm encountering routing issues despite reading similar questions on stackoverflow. I've been followi ...

I must only assign the result to "value" if the condition of the map is true

I am looking to set the variable "value" to only contain the value that meets the condition in the map function const arr= [1,2,3,4,5]; value = arr.map(item => item > 4 && item) console.log(value); The resulting value is currently [false, false, fa ...

Using JQuery, you can toggle a newly created DIV element by linking it to `$(this)` instead of `$(this).closest()`

In the comment section, there is a link called "Reply" that triggers a pop-up comment box when clicked. However, I want the comment box to disappear if the "reply" button is clicked again, as it currently keeps opening more comment boxes. $('.replyli ...

Using AngularJS in combination with a Flask backend to visualize the data being sent from the backend

I am currently developing a Single Page Application using Angular with a Python/Flask backend that connects to MongoDB. The challenge I'm facing is that, although I can retrieve data from the backend using a $http get request in Angular as an object ...

"Troubleshooting the slow loading of PDF files when using React's render-pdf feature

After creating a table with the ability for each row to generate and download a PDF using render-pdf npm, I encountered an issue. When the user clicks the download button, the PDF preview opens on a new page. However, there are problems with rendering as a ...

What is the best way to ensure the initial item in an accordion group remains open by default when using NextJS?

I've successfully developed an accordion feature in NextJS from scratch and it's functioning flawlessly. However, I am looking to have the first item of the accordion open automatically when the page loads. Can anyone guide me on how to make this ...

Creating collections in a Hashtable style using JavaScript

Creating a collection in JavaScript can be done in the following way: Start by initializing an empty collection with var c = {}; Next, you can add items to it. After addition, it will look like: { 'buttonSubmit': function() { /* do some work * ...

Retrieving data sent through an AJAX post request

My current project involves making a POST call from a basic HTML page to a Node.js and Express server that will then save the input values to a MongoDB collection. The issue I am facing is that when passing two POST parameters, namely 'name' and ...

retrieving identifiers from a separate table for an array of values

As a newcomer to node and noSQL databases, I am facing challenges in grasping the concept of passing an array of IDs and retrieving the corresponding values from another table. I have 'users' and 'products' tables in my database. The st ...

Storing cookies is not supported when using jQuery for authentication with Passport.JS

My software setup includes an Electron app for the frontend and a Node backend. After clicking the login button, the app sends an Ajax POST request to the backend, which confirms successful authentication. However, when checking if the user is authentica ...

Invalid content detected in React child element - specifically, a [object Promise] was found. This issue has been identified in next js

Why am I encountering an error when I convert my page into an async function? Everything runs smoothly when it's not an async function. The only change is that it returns a pending object, which is not the desired outcome. This is how data is being f ...

Ways to avoid caching statically generated pages without having to enable ISR in Next.js

I'm currently exploring ways to tailor the Cache-Control headers for my NextJS server when delivering pages generated at build time (SSG). The objective is straightforward: since every CDN caches server responses based on their headers, and I want sta ...

vue-router: error encountered while attempting to load asynchronous component for rendering

I'm new to vue-router and having trouble getting it to work. When I try to start my app, these errors pop up: [vue-router] Failed to resolve async component render: TypeError: _vm is undefined 49:16:39 [vue-router] uncaught error during route navigat ...

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

I have been successfully using the TableDnD plugin for drag and drop functionality on table rows. However, I am now facing an issue with dynamically generated tables via AJAX. The code doesn't seem to work as expected when it comes to drag and droppin ...

How can I locate and substitute a specific script line in the header using Jquery?

I need to update an outdated version of JQuery that I have no control over, as it's managed externally through a CMS and I can't make changes to it. But I want to switch to a newer version of JQuery. Here is the old code: <script type="text/ ...

How to set a mandatory dynamic dropdown field in Contact Form 7 for WordPress

I am currently working on a Contact Form 7 with a dynamic dropdown feature that queries the database for available free trial classes. My goal is to make this dropdown a required field for form validation upon submission. I have successfully added the shor ...

Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

Could use some assistance with converting HTML into a PDF report. In particular, I want the footer to always appear at the bottom of the last page, even if there is minimal content on that page. Any suggestions? I've been utilizing the wkhtmltopdf to ...

"An error has occurred stating that the function Factory.function() in AngularJS

I'm a beginner with AngularJS and could use some assistance! My issue involves retrieving JSON data from a URL in a factory function and returning it to the controller. However, I keep getting an error stating that the function doesn't exist. Wh ...

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...