Post 10: Facebook sharing

Lets add Facebook sharing capacity to our little game. Both the native Facebook plugin and Cranberrygames plugin have a sharing actions but both of them are buggy and neither will work well on mobile devices. Instead, we will use Construct 2's browser object and a little bit of JavaScript magic to produce a great looking sharing function.

We'll start by building in a sharing button into our menu screen

Next lets add the Browser plugin to our project

To make this button work we'll use the browser object to execute a JavaScript action.

This JavaScript action needs to be slightly different for mobile users than for browser users

Mobile:

"facebookConnectPlugin.showDialog({
  method: 'share',
  href: 'http://www.your_domain.com/your_app_page',
}, function(response){});"

Browsers:

"FB.ui({
  method: 'share',
  href: 'http://www.your_domain.com/your_app_page',
}, function(response){});"

Styling

The trick to making your sharing function look good is to add metatags to the webpage your sharing function directs to. If you're hosting your own webpage you can do this easily by inserting the following lines into your html script (I have bolded and italicized the parts you will need to replace with your own info:

  • <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  • <meta property="fb:app_id" content="302184056577324" />
  • <meta property="og:type" content="website" />
  • <meta property="og:url" content="Put your own URL to the object here" />
  • <meta property="og:title" content="Sample Website" />
  • <meta property="og:image" content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />

There are lots of other metatags to add to your webpage and you can even add in deep linking tags so that your link directs users to different download locations based on their operating system (iOS vs Android). Facebook for Developers has more information on this on their webpage.

If you're using a website building application like Squarespace or Wix you may have to do a little bit more fiddling around to make your sharing functions look good as they will commonly override any metatags you add to your individual pages with metatags that cover your whole domain.

A couple of tips I have picked up on how to make your sharing actions look better:

  1. The optimal image ratio for displaying your sharing image is 1.91. This will make your image look good with minimal cropping on most devices.
  2. Put the logo in the middle of the image to make it look better in browser based Facebook conversations
  3. The optimal width seems to be ~1300-2000px (this is based purely on my own experimentation). Feel free to add your own thoughts in the comments
  4. After making a change to your sharing action you need to refresh your cookies to see your updates. A faster and easier way to check what your sharing action will look like is the Facebook Debugger. Simply put in the link to you webpage and hit 'Fetch new scrape information' to see what the sharing action will look like

**Note. Sometimes your meta tags (sharing thumbnail etc.) will not display the first time you try to use the sharing function. If this happens, the following will usually solve the problem:

  • Double check your URL
  • Visit your URL on your browser
  • Visit the Facebook debugger and hit 'Fetch new scrape information' several times (wait for Facebook to scrape your info between each time)

If you want to see Facebook sharing in action - have a look at the updated browser version of SSA here or download here for Android or here for iOS

PS. to enable Facebook logins and shares from this browser version I have added the URL to the list of valid OAuth redirect URIs in Facebook for Developers.

In the next tutorial we'll have a look at how to download a list of the user's facebook friends. This is very useful for displaying Facebook-only scoreboards or extracting game information (such as what level they are on) about a users Facebook friend.


Want to see what Facebook implementation looks like in a real game?

Check out my latest game Nut Drop on any of the below platforms

If you have any questions about how to implement any of the features in Nut Drop in your games let me know in the comments and I will make a tutorial for you