Social Sharing

Sharing data via the URL

IGX supports sharing of the URL where the game is hosted along with information about the games state which is encoded into the URL. Any game launched from the shared URL will have access to the data that was shared via the entry point data. Below is an example that shows how to get data that was shared via the games URL:

var shared_data = FBInstant.getEntryPointData();

This returns an object containing the data that was shared via the URL

Setting up sharing

IGX requires that the ShareService has been created during the set up process before sharing can occur. The following options can be set prior to creating the share service to customise what and how things are shared:

FBInstant.options.shareOptions.shareURI = window.location.origin + window.location.pathname; // URL to share
FBInstant.options.shareOptions.dlgWidth = 600; // Default is 600, width of the share dialog popup that will be shown
FBInstant.options.shareOptions.dlgHeight = 400; // Default is 400, height of the share dialog popup that will be shown

Once options are set you should create an instance of the share service module using:

new ShareService("generic");

Note that if you called FBInstant.createDefaultServices() to create the default services then you should not recreate the share service module.

Sharing data

To share data via the URL we can call:

FBInstant.shareAsync({
    intent: "INVITE",
    image: NULL,
    text: "i JUST SCORED 100 POINTS",
    data: { data: my_shared_data },
})
.then(function(){
    // Shared successful
}).catch(function(error) {
    // Sharing error
});

By default sharing takes place via the primary sharing mechanism for whichever sharing service you are using, the default uses Facebook sharing.

Sharing via Facebook

Facebook will scrape the url that you supply and use the OG tags located at the destination to generate a nice looking preview. This is great for static content, but we would like to show game state data in the title and description of the context shared. In order to add this customisation you will need a server side script which can generate the OG tags when the page is requested, an example of such a page is shown below:

<!DOCTYPE html> 
<html>  
<head>  
	<meta charset='utf-8'>  
	<meta name='description' content='Your Game Name'>
	<meta name='keywords' content=''>
	<title>Your Game Name</title>
	<meta property="og:type" content="article" />
	<meta property='og:image' content='https://yourdomain.com/your_nice_image.jpg' />
	<link rel='stylesheet' type='text/css' href='styles.css'>
<?php
	$title = $_GET['t'];
	if ($title != '')
	{
		$title = htmlspecialchars($title);
		echo "    <meta property='og:title' content='" . $title . "' />\n";
	}
	else
	{
		echo "    <meta property='og:title' content='Your Game Name' />";
	}

	$description = $_GET['d'];
	if ($description != '')
	{
		$description = htmlspecialchars(urldecode($description));
		echo "    <meta property='og:description' content='" . $description . "' />\n";
	}
	else
	{
		echo "    <meta property='og:description' content='<Enter a description here>' />";
	}
?>
</head>
<body>
</body>  
</html>

Note that many web portals do not support PHP index files so you will need to add your own generic custom OG tags to your index.html, e.g.:

<meta property="og:type" content="article" />
<meta property='og:image' content='https://yourdomain.com/your_nice_image.jpg' />
<meta property='og:title' content='Your Game Name' />"
<meta property='og:description' content='<Enter a description here>' />"

You do lose the custom title and description but at least you can still have a meaningful share preview image.

Sharing via Twitter

IGX extensions provide sharing via Twitter, using the same set of options. To share data via Twitter we can call:

FBInstant.ext.shareTwitterAsync({
    intent: "INVITE",
    image: NULL,
    text: "i JUST SCORED 100 POINTS",
    data: { data: my_shared_data },
})
.then(function(){
    // Shared successful
}).catch(function(error) {
    // Sharing error
});

Sharing via Kongregate

Kongregate supports 3 types of sharing:

Invite share - Invites a player to play the game on Kongregate
Feed share - Post to a player's wall on behalf of the game on Kongregate
Shout share - Post a shout on the users profile page on Kongregate
Private share - Sends private message to user on Kongregate

A few additional options are available depending upon which method you use to share:

// Invite
FBInstant.shareAsync({
    type: "invite",
    text: "Come and join me",
    filter: "", // Filter can be blank (all players), played (already plays) or not_played (not played before)
    data: { data: my_shared_data }
})
.then(function(){
    // Shared successful
}).catch(function(error) {
    // Sharing error
});

// Feed
FBInstant.shareAsync({
    type: "feed",
    image: "http://www.mydomain.com/awesome_image.jpg",
    text: "I JUST SCORED 1 MILLION POINTS!",
    data: { data: my_shared_data }
})
.then(function(){
    // Shared successful
}).catch(function(error) {
    // Sharing error
});

// Shout
FBInstant.shareAsync({
    type: "shout",
    text: "I JUST COMPLETED THE GAME!"
})
.then(function(){
    // Shared successful
}).catch(function(error) {
    // Sharing error
});

// Private
FBInstant.shareAsync({
    type: "private",
    text: "CONGRATULATIONS YOU JUST BEAT THE GAME!"
})
.then(function(){
    // Shared successful
}).catch(function(error) {
    // Sharing error
});

Help keep this project alive by donating