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

cakeexoticInternet και Εφαρμογές Web

13 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

110 εμφανίσεις

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