Setting Facebook Status with Flash - Version 3

Feature image

A quick adendum to this post: Facebook has once again changed the API. As of July 12, 2011, you can no longer set the 'message' part of the status message. The lack of a message prompt makes the app we build here a little pointless, but not entirely. You can still set the image, the caption, and other pieces of information that will accompany a user's status message, but the message content itself is no longer able to be prompted by you as the developer. I'll eventually update this app again in a future update to show you how this still makes for a valuable Facebook app. If you don't want to wait though, you can still learn the basics of building this type of dialing prompt on Facebook below. Enjoy.

You're back for more Facebook status setting? I'm glad you're back. Or maybe this is your first time here. If so, welcome. We're going to look at a revision to 2 of the more popular posts on SuperGeekery.

A little history

First a little background on why this is version 3. Previously Facebook had a extremely simple way of prompting a Facebook user to set their status. I wrote about it in a post called Setting Facebook Status witih Flash (The Easy Way). It was basic, but it got the job done. There weren't any special images or links associated with the status message, but it worked and you didn't need to mess with setting up a Facebook application in the Facebook Developers area.

If you've been doing Facebook development for a while, you know that the Facebook code base changes frequently and the "prompt_feed" method used in the 'easy way' has been deprecated. It seems to work sometimes, but other times not. Even if it's working today, Facebook has told us to move along from the 'prompt_feed'.

I've written another post about Facebook status setting called Setting Facebook Status with Flash (The Hard Way). This method still works. It basically creates a full-fledged Facebook application. One of the things a Facebook application lets you do is make a robust wall postings, with pictures, links, description text, and more. It relied on embedding quite a lot of Facebook code into your Flash document though. It was capable of doing a lot more than just setting your status.

The pros and cons of the new approach

If all you wanted to do was prompt someone to set their status, the hard way was probably more work than you wanted to do, although it worked.

The replacement method that Facebook has provided when they eliminated the 'prompt_feed' method falls in between the 2 previous approaches. You don't need to jump through all the hoops that the 'hard' method required for a user to give approval to your app. You don't need to embed lots of code into your Flash movie but you still get the benefit of being able to set a headline, add image, and provide text with links to a person's status update.

You will need to set up a Facebook app though, so you'll need to spend a little time in the Facebook Developer area. Being a Facebook application ties your Flash file to a specific domain. If you don't set it up and deploy it properly, you will get an error when trying to load the dialog box for status setting.

Version 3 in action

Enough talk in, let's take a look at what we're building. Below is the Flash piece with the Facebook app ID inside.

The Flash movie can't be displayed on your device.

What's the deal? If you're reading SuperGeekery, you know your way around a Flash plugin. You've probably got Flash turned off, uninstalled, or maybe you don't have JavaScript turned on. Whatever the case may be, you can see the Flash movie. Go jump on a computer with those things and we're in business again.

You should be able to select a word from the drop down menu in the Flash movie and click the "Preview Status" button which will spawn a familiar Facebook dialog box. You can then choose to edit the status message and post it to your wall. That will cause the popup to close, leaving you back on this page.

Download the source files & look at the docs

If you're like me, it's most informative to pick through a working example. You can download the working files here: SuperGeekery Facebook Status Setter Version 3 Source Files. The FLA is created in Flash CS5, so you'll need that version of Flash.

Next, take a look a the Facebook documentation page on Feed Dialogs. This post won't cover all the possibilities available with this dialog box, so you'll want to check this out.

Setting up your app on Facebook

You'll need to set up a Facebook application to make your status update SWF work. Head over to Facebook Developers App page and click the button 'Create New App'. Choose an app name, agree to the Facebook Terms and click Continue. You can name it anything you want. If your app name isn't valid, Facebook will ask you tp pick another name.

You will be taken to the Basic Info page for your new app. Make note of the 'App ID' on this page. You'll need it.

On the left hand side of this page, click the "Web" tab. Enter in the Site URL, for example, mine is http://supergeekery.com, and the Site Domain, mine is supergeekery.com.

Your Flash file

Open the Flash file and take a look a the ActionScript. First, we define the variables that will make up our status message.

	var appID = 118097394948362;
	var thefbStatusMessage = 'Your suggested status message would go here.';
	var theTitle = 'SuperGeekery Status Setter v3';
	var theLinkForTitle = 'http://supergeekery.com';
	var theCaption = 'Setting Facebook status since 2010';
	var theDescription = 'I could go on and on about the SuperGeekery Status Setter version 3 but you might as well go to the site and see it yourself.';
	var thePicture = 'http://supergeekery.com/fbstatusv3/sg_status_setter_icon_75x75.png';
	var theRedirectURL = 'http://supergeekery.com/fbstatusv3/closeme.html';
	// theRedirectURL is the redirect_uri from the Facebook docs page

Note, the Flash file I've provided doesn't define the variable theStatusMessage outright like this, but you might want to for simplicity's sake. My example Flash app constructs this after the user uses the drop down menu.

The appID for your version will come from your own Facebook application you made. If you use mine, it will not work. Why? Because when I set up my app, I put in the URLs for SuperGeekery, not your site. Facebook is going to check to be sure you're application is being hosted on the correct site before it lets if proceed. That means you must have your Flash SWF file on a server to make this work.

Constructing the URL to set status

In the code, look for the function called sendfbStatud. This function is called when the 'preview status' button is clicked.

Using those variables, you're going to construct a single string that opens in a new window. The URL begins like this:

	http://www.facebook.com/dialog/feed?

Each piece after that question mark is a variable you're sending to Facebook. All those variables when taken together make up the status message that you're suggesting to a user. Take a look at those variables again. They are the content of the status update, including links and an image. I've made my image 75x75. I've specified the redirect_uri points to a page on this site.

var theURLtoCall = 'http://www.facebook.com/dialog/feed?app_id='+appID
	+'&message='+ escape(myCustomfbStatus)
	+'&picture='+thePicture
	+'&name='+escape(theTitle)
	+'&link='+escape(theLinkForTitle)
	+'&caption='+escape(theCaption)
	+'&description='+escape(theDescription)
	+'&display='+ 'popup'
	+'&redirect_uri='+theRedirectURL;
	;

if (ExternalInterface.available) {
	ExternalInterface.call("window.open", theURLtoCall, "win", "height=400,width=580,toolbar=no,scrollbars=no"); 
}

Once the variable theURLtoCall is constructed, open it in a new window using ExternalInterface.

The magic auto-closing window

The typical behavior for the FB dialog box is to load in the redirect_uri after a user posts their status. I didn't want that, but Facebook's API requires a URL be provided. The HTML page that I have loaded basically has a 'thank you' message and a single command which is to close the window after 3 seconds. Here's all that page contains.

	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title>Autoclosing Window</title>
		<script type="text/javascript" charset="utf-8">
			setTimeout("self.close ()",3000);
		</script>
	</head>
	<body>
		Thanks for sharing SuperGeekery with your friends.
	</body>
	</html>

If I hadn't done that, the user would basically end up with 2 copies of this page on their screen, if I'd specified this page as the redirect URL. I preferred just saying thank you and shutting the window.

Another thing you should be aware of when it comes to the URL that's called after a success status update. Facebook will call your URL but will also pass along the post_id of the status message. For example, this is the actual URL that might be called in this example.

	http://supergeekery.com/fbstatusv3/closeme.html?post_id=1234567890_123456789901234

This data can be very useful for more involved Facebook applications, but you should be aware if you're redirecting back to site that uses query strings,Wordpress sites, for example, that post_id value may conflict with something you've got going on already on your site. Just be aware of the possibility.

Try it on your server

As mentioned above, to test this file, you should put it on your server, the same server Facebook expects based on what you entered into the app page when you got the App API number.

Hey, what are these errors?

Error example from Facebook

There are a lot of negative comments on the Facebook documentation page about this not working. You must to have your URLs set up in the Facebook app page and you must specify a redirect URL on your domain. If you don't, you will get errors and they are not always descriptive. Actually, they can be a little misleading and make it appear the problem is on Facebook's end and that it will be fixed later.

Was this helpful? Got questions? Post a comment. Thanks and good luck!

Comments on this post.

Excellent tutorial, this really helped to un-muddy the waters of facebook app development.
However, the status field is not being populated with the message.
All the other fields are fine and the picture loads, but the actual status field is blank.

By Gray Gray on Aug 23 2011

Hi Gray,

Thank you for the comment about the article. I noticed this same thing about a day ago. I immediately wondered if the Facebook API had changed again. It turns out it has. Basically, you can no longer prompt the message for a user due to Facebook policy updates, https://developers.facebook.com/docs/reference/dialogs/feed/.

Here’s what the docs read regarding setting the ‘message’, aka, the status part, as of August 23:

This field will be ignored on July 12, 2011 The message to prefill the text field that the user will type in. To be compliant with Facebook Platform Policies, your application may only set this field if the user manually generated the content earlier in the workflow. Most applications should not set this.

It looks like the rest of the fields are still fine, but it does make the suggesting of what a user could post no longer available to us. Doing development on Facebook means building your proverbial house on sand unfortunately.

I have clients that I build similar things for that still find this type of dialog prompt useful, even without being able to suggest the status message for a user though. I think it means your caption copy and image need to work even harder to deliver your message though.

By John Morton on Aug 23 2011

Well, right now setting Facebook status with Flash isn’t possible with Apple devices like the iPad- but think thing that eventually everyone will just use HTML 5 as the standard and this will not longer be an issue.

By Nath Maniedeo on Nov 10 2011

Nath, I had many clients request doing this in Flash, but in July 2011, Facebook eliminated the ability to set the ‘message’ portion for a FB user, whether it was from Flash or HTML 5. You can pass in the message parameter, but nothing will appear in the prompt for the user. I think this is the right thing to do for a user, personally.

And as for Flash vs. HTML 5, I agree. I’m a big iPad user myself and Flash experiences are lost on my iPad entirely. We’re doing more and more standards based application building all the time now at my company. It’s just the flow of technology.

By John Morton on Nov 10 2011

Agreed…

By Nath Maniedeo on Nov 10 2011

Hello John,

First of all, thank you so so much for this post. You actually saved my last. I’m totally new to coding and I have difficulties following Facebook’s documentation as I lack basic knowledge. However, your code works perfectly.

I just have one more questions:
How can the user post on a friend’s wall instead of his own wall? So the user can choose one (or even multiple?) friends. In some games, this is possible. Does that work via the .ui class, too? Or do I have to use the .api class? Regarding, api: this is what I’m currently doing:

var method:String = “/100001397050558/feed”
[...]
Facebook.api(method, Callback, data, “POST”);

Although it works, you have to manually change the UID (100001397050558). So, there’s no point of doing that.

Again, thank you so much for your great post.

By Amir Rahbaran on Mar 04 2012

Hi Amir,

It’s been a while since I worked on this so, I don’t have a solid answer for you, but I’ll make some guesses.

The method I describe here is pretty basic and doesn’t ask for user permissions. My initial guess was that you couldn’t specify another person’s wall to post to, but then I took a look at the docs at https://developers.facebook.com/docs/reference/dialogs/feed/ and I saw something that might be what you’re looking for. Near the bottom of that page, look for the “Properties” table.

It says you can specify a ‘to’ property which is “the ID or username of the profile that this story will be published to. If this is unspecified, it defaults to the the value of from.”

Interesting! That would seem to be the answer. Just add a ‘to’ property in that ‘theURLtoCall’ variable that you’re constructing. But how do you know ID or username of the other profile? That’s another question but one I can’t answer without more research. At that point you might be getting into a more complex application, sort of like I talked about in the ‘version 2’ of this series http://supergeekery.com/geekblog/comments/setting_facebook_status_with_flash_the_hard_way/.

I also looked around and saw another post that might be helpful to you. Bob Belderbos has as post on posting to a friend’s wall here:

http://bobbelderbos.com/2011/08/example-facebook-php-sdk-post-to-friends-wall/

Good luck!

-John

By John Morton on Mar 04 2012

John,
I thought that I had answered. Obviously I didn’t. Sorry for that. I just wanted to thank you for the links. They helped me a lot. I highly appreciate your help.

Best regards,
Amir :)

By Amir Rahbaran on Mar 30 2012

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Falls