"Failed to load resource" using Facebook's example code

Question

I'm trying to run the first example from the documentation of the Facebook JS SDK. I created a new app, created a blank document called "facebookTest.html", pasted in the code from the example, and plugged in the new app's App ID. Code as follows:

<html>
<head>
<title>Login with facebook</title>
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'my app ID', // App ID from the App Dashboard
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };

  // Load the SDK's source Asynchronously
  // Note that the debug version is being actively developed and might 
  // contain some type checks that are overly strict. 
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     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 = document.location.protocol+"//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>

When I load the page, on the Javascript console I get the following error message:

Failed to load resource

What am I doing wrong?

EDIT: When I add document.location.protocol before the "//connect.facebook.net/...", as suggested here, the screen stays blank, and the console shows the following:

GET file://connect.facebook.net/en_US/all.js

Is that all this code is supposed to do? Or is it still failing?

score 82 · Answer 1 · answered Feb 23 '18 at 18:22

82

just disable adblock, it works for me

answered Feb 23 '18 at 18:22

yawa yawa

1,484
13
7

4

Hey, simple an best answer =) – Met El Idrissi May 24 '19 at 17:02
1

Really is The Adblock chrome extensions blocks it, thanks. – V-SHY Oct 01 '19 at 14:17
1

In firefox, you'll need to disable facebook container and tracking protection – roadev Apr 19 '21 at 16:03
Does this mean facebook login won't work if people have adblock enabled? – workwise Apr 16 '22 at 12:59
@workwise it was true few years ago, idk about current siatuation, but it is possible to be an true. – yawa yawa Apr 17 '22 at 13:04
that's it. add blockers are designed to stop trackers and ad services like facebook and google. – Ali Samie Jan 01 '23 at 10:09

score 41 · Accepted Answer · answered Apr 01 '13 at 17:06

41

There were a couple things wrong here:

needed to change js.src assignment to: js.src="https://connect.facebook.net/en_US/all.js";
Facebook no longer supports JS SDK calls made from a local file, the script has to be run on a file with an http:// or https:// URI, as per this bug report on Facebook. I will need to upload the file to a web server, change the canvas URL accordingly, and retest.

answered Apr 01 '13 at 17:06

sigil

9,370
40
119
199

2

IN explanation to pointer 2. This is because the `js.src` in init code is protocol relative. so if you are accessing a local file. it will try to access fb sdk over file: and the error – Mukul Goel Nov 07 '14 at 09:29
Yes, I found that I can test it on a local web server (e.g. WAMP) if I access the file as, e.g., `localhost/FacebookApp` instead of `file://c:\wamp\www\FacebookApp\index.html`. – sigil Nov 07 '14 at 18:31
1

Yes. That is because your js.src might be pointing to `"//connect.facebok.... ` it is protocol relative. therefore. if you are accessing ur page locally without server i.e. using a `file://` , so facebook init tries to load the javascript sdk from `file://connect.facebook.net.... ` which is not going to happen. So it does not work. Also.. it is best to have js.src point to `//connect.facebook.net/en_US/all.js` so that even http requests are handled. Anyway.. I learned it today, So thought to share. – Mukul Goel Nov 07 '14 at 19:27
1

I had the same problem. But now when it should show the login form I get this error message: "Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings. " Any idea on how to resolve that. I have the correct URL's in there. Thanks in advance. – Ionut Necula Sep 07 '16 at 11:18
1

Remember to check your adblock! ;) – FooBar Mar 07 '18 at 12:57

score 6 · Answer 3 · answered May 02 '14 at 05:27

6

First you need to append http or https to js.src url

Second you need to host you html file on a server.

answered May 02 '14 at 05:27

user3059993

324
1
4
9

score 4 · Answer 4 · answered Aug 22 '19 at 09:16

If your URL contains words such as "advert", "ad", "doubleclick", "click", or something similar…

For example:

GET googleads.g.doubleclick.net/pagead/id
static.doubleclick.net/instream/ad_status.js

…Then ad-blocker will block it.

Ref : Getting "net::ERR_BLOCKED_BY_CLIENT" error on some AJAX calls

score 0 · Answer 5 · answered Sep 05 '17 at 10:25

0

Go To Facebook developer and add your website domain and get the id and paste below:

 appId : 'my app ID', // App ID from the App Dashboard

answered Sep 05 '17 at 10:25

Developerjas

23
1
10

score 0 · Answer 6 · answered Jan 05 '20 at 20:00

0

Adding one more thing I didn't see here: if you are debugging in Firefox, disable Enhanced Tracking Protection and Facebook Container while you are developing.

answered Jan 05 '20 at 20:00

Reza

2,058
3
20
33

score 0 · Answer 7 · answered Oct 03 '22 at 08:54

0

just disable any kind of ad blocker extention you have use then it will be working fine.

answered Oct 03 '22 at 08:54

nitesh

11
2

This should be a comment and not an answer – otejiri Oct 06 '22 at 08:00
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32856286) – kelsny Oct 09 '22 at 04:04

score 0 · Answer 8 · answered Aug 28 '23 at 06:52

Worth to check any kind of ad blocker extension. The error net::ERR_BLOCKED_BY_CLIENT is exactly about it.

There are several solutions you can try to fix this error:

Solution 1: Disable extensions
Solution 2: Whitelist the domain
Solution 3: Debug the issue
Solution 4: Clear browser cache and cookies#
Solution 5: Disable antivirus software
Solution 6: Use Incognito mode

Here is a full article about it: https://www.keycdn.com/support/how-to-solve-err-blocked-by-client

"Failed to load resource" using Facebook's example code

8 Answers8

Linked