Talking about Facebook, Game development, HTML5, Javascript, Monetize and Phaser.
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 anhttps 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Risky Steps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
<meta name="HandheldFriendly" content="true" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background: #000;
color: #fff;
overflow: hidden;
-ms-touch-action: none;
}
canvas {
touch-action-delay: none;
touch-action: none;
-ms-touch-action: none;
}
#fbad{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.85);
text-align:center;
position:absolute;
top:0px;
left:0px;
z-index:1000;
}
#closebutton{
cursor:pointer;
background-color:green;
width:280px;
margin:50px auto;
padding:10px;
font:bold 14px arial;
color:white;
text-transform:uppercase;
}
</style>
<script src="phaser.min.js"></script>
<script src = "game.js"></script>
<script src = "facebook.js"></script>
</head>
<body>
<div id = "fbad">
<div style = "margin-top:120px">
<script language="Javascript">
var cpmstar_rnd=Math.round(Math.random()*999999);
var cpmstar_pid=10016;
document.writeln("<SCR"+"IPT language='Javascript' src='//server.cpmstar.com/view.aspx?poolid="+cpmstar_pid+"&script=1&rnd="+cpmstar_rnd+"'></SCR"+"IPT>");
</script>
</div>
<div id = "closebutton" onclick = "removeAd()"></div>
</div>
<script>
var count = 0;
adCounter();
var intervalId = setInterval(adCounter, 1000);
var canClose = false;
function removeAd(){
if(canClose){
document.body.removeChild(document.getElementById("fbad"));
}
}
function adCounter() {
if (count > 9) {
clearInterval(intervalId);
document.getElementById("closebutton").innerHTML = "Close and and play game";
canClose = true;
return;
}
count ++;
document.getElementById("closebutton").innerHTML = "Closing ad in " + (10 - count).toString() + " seconds";
}
</script>
</body>
</html>
var facebookName = "";
window.fbAsyncInit = function() {
FB.init({
appId : "814839665310245",
xfbml : true,
version : "v2.5"
});
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
onLogin(response);
} else {
FB.login(function(response) {
onLogin(response)
}, {scope: "user_friends, email"});
}
});
};
function onLogin(response) {
if (response.status == "connected") {
FB.api("/me?fields=first_name", function(data) {
facebookName = data.first_name;
});
}
}
function shareScore(n){
FB.ui({
method: "feed",
link: "https://apps.facebook.com/risky-steps/",
caption: "Play Risky Steps now!!",
name: "My best score on Risky steps is " + n + "!!!!",
description: "I scored " + n + " points on Risky Steps. Can you beat my score?",
picture: "https://www.feronato.com/facebook/risky-steps/assets/pictures/feedpic.png"
}, function(response){});
}
(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'));
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 Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.