Facebook API & Leaderboard

[Jaspery]

While its not recommended for a newbie to attempt the impossible, but I would really want to get right down to business in getting the Facebook API working in my game. I read there been games manage to implement API with no problem but didnt see much snippet with it.

 

I'm gonna get SSL cert for my server to test the game thru facebook. Is there any advice on implementing Facebook API? 

 

p.s. hopefully it'll be painless :x

[megmut]

I'm a little busy right now, so bare with me and I'll get back to this as quickly as I can.Yes I have implemented Facebook Graph API 2.4 easily. YEs, you need an SSL and it cannot be self assigned. You will also need to go and create yourself a Facebook App. Go here: https://developers.facebook.com/

 

Will get back to you with code later.

[Jaspery]

much oblige!!

 

already got a game running and create an app page for facebook, just waiting on the SSL now

[robocutzu]

For SSL you could go through cloudflare without paying anything(no affiliation).

For the FB api one thing that you have to consider is popups. When the user logs in for the first time, depending on how you implement the FB login, you might have some issues regarding blocked popups. Fb login comes in different flavour: popup on desktop, redirect for mobile, lightbox for facebook canvas app. Test it with different browser configurations to make sure the user can all the time see the login dialog. If you get stuck let me know and I can share some code

[Jaspery]

While I manage to login onto the facebook with their quickstart up on the html level 

 

How to I call a FB function (share/invite) through a button created with phaser's button?

[megmut]

Hey, sorry for the long delay, work's been mental!

 

Here's my index.html code for the facebook api

<script src="phaser.min.js"></script>  <script src="phaser-state-transition-plugin.min.js"></script>  <script src="js/plugins/ScreenShake.js"></script>  <script src="js/plugins/FadePlug.js"></script>  <script src="js/plugins/async.min.js"></script>  <script src="js/plugins/JitterPlug.js"></script>  <!-- build:js main.min.js -->  <script //src="js/states/boot.js"></script>  <script src="js/states/preloader.js"></script>  <script src="js/states/menu.js"></script>  <script src="js/states/game.js"></script>  <script src="js/states/map.js"></script>  <script src="js/states/achievements.js"></script>  <script src="js/states/shop.js"></script>  <script src="js/states/credits.js"></script>  <script src="js/states/gameInit.js"></script>  <script src="js/states/gamePreloader.js"></script>  <script src="js/states/mapPreloader.js"></script>  <script src="js/main.js"></script><script src="js/prefabs/widget.js"></script><script src="js/prefabs/ScoreShow.js"></script><script src="js/prefabs/GemCon.js"></script><script src="js/prefabs/gameoverlay.js"></script><script src="js/prefabs/Overlay.js"></script><script src="js/prefabs/popup.js"></script><script>window.fbAsyncInit = function() {    FB.init({      appId      : '656312314501894',      xfbml      : true,      version    : 'v2.4'    });    function onLogin(response) {  if (response.status == 'connected') {    FB.api('/me?fields=first_name, last_name, birthday, email, hometown, gender', function(data) {    // --------------------- Change the id back to 'data.id' to go live ------------------------------ //    localStorage.setItem('fb_id', data.id);    localStorage.setItem('firstName', data.first_name);    localStorage.setItem('lastName', data.last_name);    localStorage.setItem('birthday', data.birthday);    localStorage.setItem('email', data.email);    localStorage.setItem('hometown', data.hometown);    localStorage.setItem('gender', data.gender);    // ----------------------------------------------------------------------------------------------- //    });  }}FB.getLoginStatus(function(response) {    // Check login status on load, and if the user is    // already logged in, go directly to the welcome message.    if (response.status == 'connected') {      onLogin(response);      gameStart();    } else {      // Otherwise, show Login dialog first.      FB.login(function(response) {        onLogin(response);        gameStart();      }, {scope: 'user_friends, email'});    }  });};function gameStart() {  var game = new Phaser.Game(756, 658, Phaser.AUTO, 'hinterlands-game');  game.state.add('boot', App.Boot);  game.state.add('preloader', App.Preloader);  game.state.add('menu', App.Menu);  game.state.add('map', App.Map);  game.state.add('mapPre', App.MapPreloader);  game.state.add('achievements', App.Achievements);  game.state.add('shop', App.Shop);  game.state.add('credits', App.Credits);  game.state.add('gameInit', App.GameInit);  game.state.add('gamePre', App.GamePreloader);  game.state.add('game', App.Game);  /* yo phaser:state new-state-files-put-here */  game.state.start('boot');}  (function(d, s, id){     var js, fjs = d.getElementsByTagName(s)[0];     if (d.getElementById(id)) {return;}     js = d.createElement(s); js.id = id;     js.src = "//connect.facebook.net/en_US/sdk.js";     fjs.parentNode.insertBefore(js, fjs);   }(document, 'script', 'facebook-jssdk'));</script></body></html>

Using the above code, your phaser game will not start until the user has either accepting the permissions, or if they have done so previously, the data has been retrieved from the Facebook api. Once you have this code down, in a similar fashion, please follow this tutorial to share game invites etc...

 

https://developers.facebook.com/docs/games/invitable-friends/v2.0

 

Hope this helps ya

[Jaspery]

If im using CommonJS, which it uses module.exports, is it possible just place every function right within HTML and get access to it?

[megmut]

I couldn't answer that sorry, I don't use commonJS

[Jaspery]

Been a while, now I'm stuck getting the data from the Graph API

 

How do you extract the data into an variable or array?

        FB.api('/me', {fields: 'id, name'}, function(response){            console.log(response);                       for(var o in response) {                user_data.push.apply(response[o]);            }            console.log(user_data);        })

output:

Object {id: "10153213575322883", name: "Calvin Smith"}

[megmut]

I am storing it in a local storage, however you can use any object / variable you wish in the same. The data returned by Facebook Api Graph 2.4 is as an object, so you can access by simply doing... 

 

var name = data.name;

-- or --

this.name = data.name

-- or --

this.game.global.user.name = data.name

 

Please bare in mind, that the data you are getting is only in the scope of anonymous function accepting a response.

[Jaspery]

thanks! manage to push it into array, but i'll will give your method a try

[megmut]

You could just make it an object instead of an array = more javascripty!

 

just do this.myObject = data;