Integrating an HTML5 Mobile Casual Social Game Into The World of Facebook Mobile

cakeexoticInternet and Web Development

Dec 13, 2013 (3 years and 10 months ago)

118 views

Integrating an
HTML5 Mobile Casual Social Game
Into
The World of Facebook Mobile
jukka@itsmy.comThe MoMo Battle Poker
http://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 FacebookIntegration steps
• Integrate Social Channels
– Invite friends
– Post Highscores
– Timeline achievements with Open Graph
• Payment Integration
– Application settings
– Backend
– Frontend FB callsURLs
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/appsImplement 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 API
FB.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/163382137069945
https://graph.facebook.com/me/games.high_scoreOpen Graph
Achievements @ 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 Graph
Achievements @ 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);
}
});Danke!
jukka@itsmy.com
ITSMY Games
Gofresh GmbH
handcrafted since
2010
Lilienstrasse 1
81669 Munich / Germany
Tel. +49 89 6230 3730