facebook and gofresh and itsmy integrating an html5 game into facebook world
DESCRIPTION
Presentation at http://www.mobile-monday.de/events/kick-ass-m2d2-developing-facebook-html5-mobile-games-appsTRANSCRIPT
The MoMo Battle Pokerhttp://m.itsmy.com/poker/
Integration steps
• Register and configure a Facebook Application– http://developer.facebook.com/apps
• Implement Facebook Javascript SDK
• Authentication & permissions
• Graph API – get some data from Facebook
Integration steps
• Integrate Social Channels– Invite friends
– Post Highscores
– Timeline achievements with Open Graph
• Payment Integration– Application settings
– Backend
– Frontend FB calls
URLs
All documentatios & demos
https://developers.facebook.com/docs/guides/mobile/web/
MoMo battle poker
http://m.itsmy.com/poker/
Register & configure Facebook App
https://developers.facebook.com/apps
Implement Javascript SDK
<div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
</script>
Login & Authentication
function handleStatusChange(response)
{
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse)
{
console.log(response);
updateUserInfo(response);
}
}
Login button
<div id="login"><div class="round_button gameButton play"><a class="poker activeLink" href="#" onClick="loginUser();">Connect to Facebook</a></div>
</div><script>function loginUser(){FB.login(function(response) { }, {scope:'email'});
}</script>
Successful login – Show user
<script>function updateUserInfo(response){//Graph APIFB.api('/me', function(response){document.getElementById('user-info-box').style.display = '';document.getElementById('user-info').innerHTML = '<img class="round_button" src="https://graph.facebook.com/' + response.id + '/picture">';document.getElementById('user-info-name').innerHTML = response.first_name;document.getElementById('fbuid').innerHTML = response.id;
});}</script>
Invite
<div class="round_button gameButton play"><a class="poker activeLink" href="#" onclick="invite();return false;">Invite</a>
</div><script>function invite(){FB.ui({method: 'apprequests',message: 'Challenge: Play 10 hands of poker and beat my highscore',}, function(response){console.log('sendRequest response: ', response);});
}</script>
Highscore
Server Side Graph API call
CURL -F access_token=xxxxyyyyy-F new_high_score=3400‚-F game=http://samples.ogp.me/163382137069945https://graph.facebook.com/me/games.high_score
Open GraphAchievements @ timeline
Open Graph – Object
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# momopoker: http://ogp.me/ns/apps/momopoker#"><title>ACHIEVEMENT NAME</title><meta property="fb:app_id" content="407286962618956" /><meta property="og:type" content="momopoker:trophy"/><meta property="og:title" content=“ACHIEVEMENT NAME"/><meta property="og:image" content="http://m.itsmy.com/images/trophy.png"/><meta property="og:description" content=“ACHIEVEMENT DESCRIPTION"/><meta property="og:url" content="http://m.itsmy.com/poker/fb_achievements.php?16"/></head><body><script type="text/javascript">window.location='/poker/index.php';
</script></body></html>
Open GraphAchievements @ timeline
Graph API – Call
FB.api('/me/momopoker:achieve?trophy=http://m.itsmy.com/poker/fb_achievements.php?21,'post',function(response) {if (!response || response.error) {
console.log(response);
} else {alert('achievement was successful! Action ID: ' + response.id);
}});
ITSMY GamesGofresh GmbH
handcrafted since
2010Lilienstrasse 1 81669 Munich / GermanyTel. +49 89 6230 3730