In every guide I see for Facebook exports, they go to WEBGL export And not for Facebook export.
Why? What does Facebook exports give us? And why is it not possible to export to Facebook in version 2020?
Another question on the subject. I always export to Facebook with WEBGL And it always gets stuck at 0 percent on loading in facebook. I’ve seen how it can be repair but why not unity fix this export? I see it already from versions of 2018.
In short, exporting to Facebook is not perfect, And I wanted to know how you export to Facebook without all the problems around. Thanks!!!
I still have the same question in october 2020
Since there is no facebook export I am not able to export my game to facebook. Did you managed finally ?
All official documentation is based on the fact that there is the facebook export.
I tried using webgl but keep gettings this error (cf attached file) and there is nothing working on the web to solve it.
And about your % getting stuck at 0 it’s because you have to use the facebook api to tell it to go 100%
I add to reference a js file in my index.html. Here is the content of this file (jsLoader.js)
FBInstant.initializeAsync().then(function () {
//This is where you load the game assets
console.log("Loading to 100")
FBInstant.setLoadingProgress(100)
})
FBInstant.startGameAsync().then(function () {
console.log("starting !")
game.start();
})
The Facebook export likely refers to the now removed “Facebook Gameroom” export, see https://developers.facebook.com/docs/games/gamesonfacebook/unitywebgl/.
Facebook Gameroom support has been dropped.
To export a project to Facebook in a web browser, use a regular WebGL export instead.
The error “Invalid or unexpected token” is due to misconfiguration of compressed content on the Facebook servers.
A quick way to get around that is to remove WebGL Compression (set Compression Format to Disabled in https://docs.unity3d.com/Manual/webgl-deploying.html)
Not sure if Facebook web servers are employing server side compression caches, have not had a chance to deploy projects there to verify. If you get it working and can post an uploaded project here on the forums, someone should be able to help check if it’s using best practices for hosting.
Thank a lot for taking the time to answer. It’s highly appreciated.
I actually have seen the “remove compression workaround” but infortunately it’s not working (maybe it was working before but not anymore it seems)
It gives an error (see the attached image)
Should I concidere going back to Unity 2019 that still have the facebook export feature ? I know that I managed to publish a unity project a year ago.
As you suggest here is my unity project and my facebook app Id 448821476063521
And here is the webgl build (with decompression off) with the 3 files that I added that are necessary to make it work with facebook (index.html, fbLoader.js, and fb-app.json)
If I succeed to publish it, I will make a tutorial for the community.
Thank you for you help
This is not about removing the compression workaround/fallback, but instead, remove the use of WebGL Compression. See the page Unity - Manual: Deploy WebGL application .
Thank you again for you answer.
Maybe I am not understanding correctly but that is what I did, I have set the compression to ‘disabled’ instead of ‘gzip’ for webgl following the documentation and that is what generated the previously attached error.
Are you sure the compression did get disabled? That build is still looking for the gzip-compressed files, as there is a mention of “unity-build.framework.js.gz”. If compression is disabled, there should be a file “unity-build.framework.js” instead.
Hello Jukka_j
Yes that is what I have (cf attached file), maybe it’s what facebook is looking for ? Since I don’t have this message when I don’t disable it.
Are you able to run the build locally? What are the contents of the index.html file of the generated build?
Yes it run well locally I sent a link of the build I used on facebook in my second post of this thread if you wan to check it it out.
The index.html is basically the one that is generated per default
I just added the fbInstant cdn link and a link to a local js file I made (fbLoader.js) that contains the facebook api call for initialization.
Here are the 2 files :
index.html
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Inkit</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
<script src="./fbLoader.js"></script>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">Inkit</div>
</div>
</div>
<script>
var buildUrl = "Build";
var loaderUrl = buildUrl + "/unity-build.loader.js";
var config = {
dataUrl: buildUrl + "/unity-build.data.gz",
frameworkUrl: buildUrl + "/unity-build.framework.js.gz",
codeUrl: buildUrl + "/unity-build.wasm.gz",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "Inkit",
productVersion: "0.2",
};
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>```
**fbLoader.js**
```FBInstant.initializeAsync().then(function () {
//This is where you load the game assets
console.log("Loading to 100")
FBInstant.setLoadingProgress(100)
})
FBInstant.startGameAsync().then(function () {
console.log("starting !")
game.start();
})```That index.html file contains references to .js.gz files:
dataUrl: buildUrl + “/unity-build.data.gz”,
frameworkUrl: buildUrl + “/unity-build.framework.js.gz”,
codeUrl: buildUrl + “/unity-build.wasm.gz”,
Maybe you have somehow mixed build, where the index.html is from the gzip compressed version, but the other files are from the non-compressed version? The files need to match. Try using the index.html that the Unity build produced when building the uncompressed version.
Well done ! That was it ! Thank you 
Also I add to move
FBInstant.startGameAsync().then(function () {
console.log("starting !")
game.start();
})
and call it once the the FB.initializeAsync is done.
Also I am a bit afraid that without the compression the game is taking a lot of time get started the first time ( I will try tomorow)
If Facebook web server hosting is utilizing server side compression to host the game content, then even if the Unity build is made Uncompressed as the compression setting, Facebook servers should handle the compression. Take a look at the Network tab in browser Devtools to verify that the HTTP Response Header “Content-Encoding: gzip” (or “br”) is present.
Hi Dante_,
Did you make the tuto as you said you will do?
I have the same issue than you: I’m not able to load my app, I have the error saying that the SDK should be referenced in the Facebook CDN…
How did you do to solve it?
I tried to add a fbLoader.js, the same than yours, I also add the fbapp-config.json file.
I added the
<script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
<script src="./fbLoader.js"></script>
in my index.html file and I disabled the compression but I still have the issue…
Could you help me?