How to publish your HTML5 game on Facebook, using Facebook login, Share and CPMStar ads

If you want to monetize your HTML5 game, Facebook can be a gold mine if you manage to make it viral, as according to the official developer page, every month more than 250 million people play games on Facebook.com and on Facebook-connected devices.

I have a couple of games running on Facebook I won’t talk about at the moment, as I want to do how they perform without promotion, but I am going to show you Risky Steps, which is basically the same game I published around a month ago based on Circle Path prototype.

The main difference is you can play the game directly on Facebook or directly from the secure server where it’s hosted on.

In order to publish your HTML5 game on Facebook, you absolutely need an https page. You can check your hosting provider to see if they feature a secure server plan.

Then if you play the game, you will notive three things:

1) There’s a Facebook login option popping up

2) There’s a CPMStar ad. Why did I choose CPMStar? First, because I am using it since I tried it with my LineBall game six years ago. Second, because is the one I like the most among Facebook Certified Ad Providers.

3) There is a “share” button in the bottom of the game which opens a Facebook share popup.

Time to show you how to develop all these nice things. This is the content of index.html:

As you can see, the whole ad thing is just a javascript counter with a couple of CSS overlays similar to a lightbox. I made it the old way because I did not want to include jQuery.

About Facebook stuff, it’s everything in facebook.js file:

Most of the code is the default code you get from Facebook itself when you upload a game, I just made shareScore function (lines 30-39) which is called from the game itself when share button is pressed. The n argument is the best score.

facebookName variable is ready to be used although I do not use it yet.

Nwxt time, I will show you how to create a leaderboard, and explain more in depth the whole code and monetization strategy

  • mc

    Nice, but how did you implement the facebook features from phaser?

  • Is this valid for Flash too? I see that Facebook blocks in-game ads from CPMStar, if I use this method Javascript + the Flash game embedded it’s fine?

    Thanks

    • Emanuele Feronato

      I am using them in FB and have no problem.

  • Regarding the share button: I started the game with my best score of 22, then I made 66 points and pressed share button immediatelly after game over and got a facebook popup “My best score is 22”.

  • Lochana Wijesundera

    Hi there,

    Do you do a manual redirect upon detecting that the browser is mobile? I entered in my mobile URL in the facebook app settings, but it always goes to m.facebook.com and says “The page you requested was not found”. I noticed that when opening your app in mobile browser, it successfully redirects out of facebook to your website. Can you give details on how you achieved this?

    Cheers,
    Lochana

  • Jorge

    Can anyone tell me another good company for facebook ads in a HTML game? I tried CPMStar but they didn´t accept my game as I don´t have 18000 visitors per day :/

  • Lynn

    This article sucks. He doesn’t tell you how to actually upload your game to Facebook.