How do I use JavaScript functions and variables inside events ?

Hello, I'm trying to include the Facebook Instant Games SDK inside a C2 project.

I know basic Html/JavaScript and managed to get it work by editing the index.html file using the following code:

<!-- in head -->
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script> 

<!-- in body -->
<script>
FBInstant.initializeAsync().then(function() {
	FBInstant.setLoadingProgress(100);
	FBInstant.startGameAsync().then(function() {
		var contextId = FBInstant.context.getID();
		var contextType = FBInstant.context.getType();
		var playerName = FBInstant.player.getName();
		var playerPic = FBInstant.player.getPhoto();
		var playerId = FBInstant.player.getID();

})
</script>

If you use the browser object you can load the js library with

$.getScript(url, callback)

Callback is called when the library is loaded.

I like to have it call a construct function when it’s done. So you’d place this instead of callback:

function(){c2_callFunction('c2functionname')}

So then when that function was called you can run basically the js you have in the script tag. Instead of the vars just call a different c2 function.

In that c2 function you now know that everything should be loaded and you can access the stuff the vars in your events did.

Set text to browser.execjs("FBInstant.player.getName()"

tgeorgemihai If you get it working, could you please write a small tutorial and post the source files? (here or in the tutorials section)

There is no good plugin for FB Instant Games and your experience can help many people.

R0J0hound Thank you, I just realized (after 5 years) that Construct has jQuery included. I've seen it included in export folder, but didn't think that I can call functions from Browser.ExecJS .

So I have:

System - On start of layout
	Browser - Execute Javascript "$.getScript( 'https://connect.facebook.net/en_US/fbinstant.6.2.js' , function(){c2_callFunction('apiloaded')} );"
	Or "$.getScript(" & """https://connect.facebook.net/en_US/fbinstant.6.2.js""" & " , function(){c2_callFunction(" & """apiloaded""" & ")} );"
(both versions work, It's just how you want to work with the quote marks inside strings. The good part is that JavaScript also accepts single ' )

Function - On function "apiloaded"
	do stuff here

Yup, got it to load profile data. Thanks again R0J0hound for explaining the function(){c2_callFunction('c2functionname')}. It really helps

The runned script after the Api is loaded is:

"FBInstant.initializeAsync().then(function() {
	FBInstant.setLoadingProgress(100);
	// Finished loading. Start the game
	FBInstant.startGameAsync().then(function() {
		c2_callFunction('getuserdata');
	});
//and after this I can successfully access player's name or photo
//I still need to understand what is with "contextId" and "contextType". Until now I get "SOLO" (it works as intended)
});"

FBInstant.initializeAsync().then(function() {
	FBInstant.setLoadingProgress(100).then(function() {
		// Finished loading. Start the game
		FBInstant.startGameAsync().then(function() {
			c2_callFunction('getuserdata');
		});
	});
});

Best I can tell you just need initializeAsync to finish before calling any other functions.

So in the “then” you could call a c2function and enable a group of events there. In that group you’d update the progress and when it’s 100% call startGameAsync. Only caveat to consider is if your game finishes loading before you enable that group. Probably a trigger once condition in the group comparing loading progress to 100 should do it.

I don’t know if it is it’s own progress bar or what. It doesn’t seem to be a requirement before calling startGameAsync, but its pretty painless to just set progress to 100 before calling that.