Publishing Open Graph actions to Facebook ticker with Flash
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):
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.