Facebook

Monkey Archive Forums/Monkey Discussion/Facebook

EdzUp(Posted 2011) [#1]
one simple question, has anyone managed to get a Monkey game on facebook?

If so how did they integrate facebook into the monkey app?


wmaass(Posted 2011) [#2]
Posting my reply at bb here:

I gave it a shot with limited success.

www.maasscreativelabs.com/html5test/

The problem I am having is getting the user info into the monkey app when the monkey app loads. I have a javascript function on the webpage that calls a function in the monkey app to do this but it does not always work. Press the confirmation button at the bottom of the webpage to see that work. I can post some code if you like but it's pretty hideous.


Indiepath(Posted 2011) [#3]
If you look at my AJAX module for Monkey you'll see how you can create callback-like functions in Monkey - and hence callback from the Facebook Javascript API. Once you've got the callbacks working it should be a sinch.


slenkar(Posted 2011) [#4]
hey wmass i tried out your link in firefox and it displayed my name above the golf course pic


wmaass(Posted 2011) [#5]
Do you mean it showed up when the app loaded with the gradient font or it just showed as "Hi, name" above the app?

Indiepath, it has been a while since I looked at this again. I think the problem I had ultimately when using your AJAX module was that I got an undefined result in Mozilla and Chrome. Same thing happens with Xaron's Mnet. I'll have to look again.


wmaass(Posted 2011) [#6]
Edzup,

I assume you know how to go about getting your app id and secret from FB.

As for getting FB data into the monkey app, here is my not ideal solution. I have not looked at this for a while and never took it any further.

I have a function in my monkey app that takes the FB username and id and sets some variables so that I can display the FB user name in the monkey app:



Function setPlayerName(name:String,fbid:String)
	
	myPlayerName = name
	myPlayerFBID = fbid
	
End





There is an index.php that handles all the FB initialization and that hosts the monkey app. On this page I call the monkey function above with a button. This inserts the FB data into the monkey app. Note that the function the button calls can be found in main.js, it is the monkey function above prefixed with "bbMyTest".

At one time I had this working such that the FB data was inserted when the page loaded. For whatever reason I can not get that to work anymore so I took it out.



<!DOCTYPE html>

<?php

require_once '../facebook-php-sdk/src/facebook.php';

// Create our Application instance.
$facebook = new Facebook(array(
  'appId' => 'yourID',
  'secret' => 'yourSecret',
  'cookie' => true,
));

$session = $facebook->getSession();

if (!$session) {
   
    $url = $facebook->getLoginUrl(array(
        'canvas' => 1,
        'fbconnect' => 0
    ));

    echo "<script type='text/javascript'>top.location.href = '$url';</script>";

   

} else {

    try {

        $uid = $facebook->getUser();
        $me = $facebook->api('/me');
	  
	
	  //this works but some reason breaks my button at the bottom...
	  //echo "<img src='http://graph.facebook.com/$uid/picture' alt='some_text'/>";
        $updated = date("l, F j, Y", strtotime($me['updated_time']));

        echo "Hello " . $me['name'] . "<br />";
	  $vname = $me['name'];
	  $myvar = $vname;

        //echo "You last updated your profile on " . $updated;



    } catch (FacebookApiException $e) {

        echo "Error:" . print_r($e, true);

    }
}
?>



<html>
<head>
<style type="text/css">
body{
	width : 600px;
	margin-right: auto;
	margin-left: auto;
	
	overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #fff;

}
canvas:focus{
	outline:none;
}

</style>

<script language ="Javascript" src="main.js"></script>

</head>

<body>


<script type="text/javascript">
	var myname = <?= json_encode($myvar); ?>.toUpperCase();
	var myuid = <?= json_encode($uid); ?>;
</script>

<canvas id="GameCanvas" onclick="javascript:this.focus();" width=600 height=600 tabindex=1></canvas><br>
<textarea id="GameConsole" style="width:640px;height:240px;border:0;padding:0;margin:0" readonly></textarea><br>
<script language="javascript" src="main.js">Javascript not supported!</script>

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
	appId : 'yer id here',
	status : true, // check login status
	cookie : true, // enable cookies to allow the server to access the session
	xfbml : true // parse XFBML
});
</script>

<script type="text/javascript">

window.fbAsyncInit = function() {
	FB.Canvas.setSize();
}
	
</script>

<form>
	<input type="button" onclick="bbMyTestsetPlayerName(myname,myuid)" value="Confirmation Alert">
</form>

</body>
</html>






Note that Mark does not reccomend calling the monkey function in this manner. He suggests: http://www.monkeycoder.co.nz/Community/posts.php?topic=773#6202

Also note that the prefix for your monkey function in main.js will be different depending on which monkey version you compiled with. I was using 38 in this case. Good luck, I hope you find a better way to do this.


EdzUp(Posted 2011) [#7]
thanks wmaass this will help a lot :D


slenkar(Posted 2011) [#8]
it just says "hi"+ my name above the app


wmaass(Posted 2011) [#9]
slenkar if you scroll down and press the confirmation button your name will be shown in the app as well.


slenkar(Posted 2011) [#10]
ah yes that works,:)

my name appeared in orange letters


wmaass(Posted 2011) [#11]
Yes, that is what I want it to do automatically when I get a chance to look at it again.