CODEWITHSUNDEEP
javascripthtmlfacebookcanvas
hanesjw
hanesjw

Reputation: 2584

Why are my assets not being loaded when using facebook web hosting for a canvas page?

I'm using facebook web hosting for my canvas game assets and I keep getting 404 errors when they attempt to get loaded.

My index.html file loads correctly. My assets are all being loaded relative to my index.html file, which resides in the root directory.

The zip file I upload is structured like so:

enter image description here

Here are the errors I receive in the console when I try to load my canvas page in facebook; all 404s:

enter image description here

Here is the index.html file...

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
    <meta charset="utf-8" />
    <title>Title Here</title>
    <link rel="stylesheet" type="text/css" href="/styles/main.css">
    <link rel="stylesheet" href="lib/flexboxgrid.min.css">
</head>
<body>    
    <div id="canvasContainer"></div>
    <script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>    
    <script src="lib/pixi.min.js"></script>        
    <script src="lib/jquery.min.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

It seems like the resources simply aren't being uploaded.

I also noticed my index.html after looking at the dev tools networking tab is being loaded from https://apps-<acc_key>.apps.fbsbx.com/bundle/<randomnumbers>/<more random numbers>/index.html?signed_request=..... location.

However, my other resources don't have 'bundle/<randomnumbers>/<more random numbers>/' apart of their address location. I attempted to load the resources up directly in the browser but I get a 403 Denied error. I even attempted to append the signed_reqeust token but no luck either; same 403 error.

Upvotes: 1

Views: 130

Answers (1)

varren
varren

Reputation: 14731

Most of the the problem is from <base href="/" /> tag.

Web Hosting Documentation

It's very important that the generated index.html file is located at the root of the zip file, as this is the only place we can launch the content. All other URLs need to be a relative path.

Correct Relative urls 

<link href="styles.css" rel="stylesheet"/>  
or
<link href="./styles.css" rel="stylesheet"/>

Result url will be in the following format:

https://apps-<app id>.apps.fbsbx.com/bundle/<another id>/<another id>/styles.css

Incorrect Absolute urls

<link href="/styles.css" rel="stylesheet"/>

https://apps-<app id>.apps.fbsbx.com/styles.css

And when you use <base href="/" /> the HTML element specifies the base URL to use for all relative URLs contained within a document. so basically you use absolute path, when you should rely on facebook web hosting to resolve the path

So change /styles/main.css to styles/main.css and remove <base href="/" />

Upvotes: 1

Related Questions