Publishing Open Graph actions to Facebook ticker with Flash

March 15th, 2012 by Slav

It has been a while since Facebook announced changes to their API , including the introduction of new customisable open graph actions. Probably most famous example being The Guardian app publishing : “Mike Nolan is reading : “How to grow a dandelion” article on Guardian. Or some other user “Is listening to Depeche Mode” on Spotify. While you can get plenty of tutorials on how to achieve this in HTML / PHP I haven’t been able to found any on how to do this in Flash. It might be that my googling skills are diminishing, or the fact that you actually can’t do this PURELY in flash. Why ? In a similar way the “share” functionality works , for this to work properly, Facebook must read html metadata from your page, and use them to construct the ticker update. You can however trigger publishing the action from flash and with a bit of php magic link deeplink from the published action  on ticker back to your app. Here’s how:

1. Create app on Facebook.

2. Define the Open Graph Action Types, Object Types, Agregations..

There are quite a few tutorials on how to do this, so I won’t go into detail. When you define your object you need to get the sample code for your app. This is the metada that we need to include in our flash wrapper’s html.

3. Build your app in flash, make sure you get the user authorization for the app and access_token.

For posting to work you have to ask for permission : “publish_actions”.

4. Request publish action to Facebook API.

This is done by making an http POST request to API to “me/namespace:action” sending object url that contains the required metadata. I am going to build a multiple choice quiz game so in my example I defined open graph ‘action’ as ‘answer’ and ‘object’ is “question”. The namespace is ‘mathquizdemo’.

here’s an example code :

var urlVars : URLVariables = new URLVariables();
urlVars.question = "http://mywebsite.com/index.php?q=3";
urlVars.access_token = [YOUR_ACCESS_TOKEN_GOES_HERE]

var url : String = https://graph.facebook.com/me/mathquizdemo:answer';
var request : URLRequest = new URLRequest(url);
request.data = urlVars;
request.method = URLRequestMethod.POST;
var callLoader:URLLoader = new URLLoader();
callLoader.load(request);

in my index php I have all the og metadata that are needed for facebook to contruct my ticker update. Depending on the ‘q’ query string  parameter php will look into the database and populate the metadata dynamically with a different content for each question answered. This is of course same data being used in the flash application.

What’s more php will also inject this variable into flashvariables, so flash app can be loaded with this question as a default , thus deeplinking from the ticker post.

sample code from the flash wrapper (index.php):


<head>
<title> Math Quiz Demo <title>
...

<meta property="og:title" content="Question 3" />
<meta property="og:image" content="http://mywebsite.com/horse.jpg" />
<meta property="og:description" content="Who will be the next american idol?" />
<meta property="fb:app_id" content="[YOUR APP ID GOES HERE]" />
<meta property="og:url" content="http://mywebsite.com/index.php?q=3" />
<meta property="og:type" content="mathquizdemo:question" />
..

<script type="text/javascript">
var flashvars = {
 <?php if (isset($_GET['q'])) echo("question:".$_GET['q']); ?>
 };

var params =
 {
 wmode:"opaque",
 scale: "noScale",
 bgcolor:"#000000",
 menu :"false",
 allowscriptaccess:"always",
 allowfullscreen:"true"
 };

var attributes = {id:"flashcontent"};

swfobject.embedSWF("Main.swf?c="+Math.random(), "flashcontent", "760", "572", "10.0.0", "swf/expressInstall.swf", flashvars, params, attributes);
</script>

and that’s basically it, after clicking on the ticker update, the link to the flash wrapper will populate the correct metadata and also pass the correct flash var to flash , in case you need to deep link your app.

One thing I noticed.. If you use Graph API explorer to test your calls before implementing them in flash (which is normally a good idea) posting the ticker updates didn’t work for me. Also testing from local host for only semi successful.

Posted in AS3, Facebook, flash, html5, php

6 Responses

  1. Nicolas Bousquet

    Hi,
    have you tried to make the call thru Facebook.api method of the Graph API for AS3 – which I wouldn’t advise to use, but just in case some people are terminally allergic to JS.

  2. Slav

    Hi Nicolas.
    I am making the call to API with ActionScript actually, not JavaScript.
    Although, I actually preffer to use facebook’s official javascript API to login the user and get the permissions and the access token. My code example is just an illustration of the workflow, it can be easily adapted to be used with the official AS3 FB api as well.

  3. Liam

    Does the PHP that generates the object metatags need to live in the index.php that holds the actual app SWF?

    I was considering making an “objects” directory to hold PHP files for each object type that would return the proper info based on URL variables.

    Will that not work?

  4. Slavomir Durej

    Liam: Yes it will, however, don’t foget that the ticker post is also a link. It will link to the origin of the page that holds the metadata. So if you don’t mind sending users to the blank page containing only your metadata, or some other html content it’s ok. I suggested generating og metadata tags on the page that holds the flash file that generated the post as that’s when you usually want user to return to as well.

  5. how to cheat tetris battle

    I think the admin of this site is in fact working
    hard for his site, for the reason that here every information is quality based information.

  6. free spotify codes

    I read this article completely concerning the comparison of most up-to-date and preceding technologies, it’s amazing article.