Well, not actually - more a "how to" for those of you looking to use Facebook's fb:dialog FBML tag.

As usual, the documentation is not perfectly clear. It is, in this case however, actually pretty much spot on if you read it through properly - something I, of course, didn't do at first.

The documentation states that the fb:dialog tag is in beta. It's been in beta for a long time as I first used it in the "Beach Fit in 30 Days" application back in January (post) to show measuring chart information in the diary:

That was, however, a simple use and involved only showing an information popup with a close button.

What about more complex dialogs? How would you use what Facebook call "Mock AJAX" to take the contents of a form in your open dialog, send them to your server and then display a response from the server in the (still open) dialog?

How about then going a step further and redirecting to another page when the user closes the dialog?

That's what I'm going to show you here.

The example I'll go through is one of showing a dialog to obtain name and email address from an application user (remember that you can't, however, store this information in a database - it's against the Facebook TOS - although you can use it transiently), calling a server script to do something with the information and then returning a success or failure response. Upon close of the dialog the user will be redirected.

Firstly, as usual, I'm going to assume you've set up an application and are familiar with the basic principles of Facebook API coding. The example I'll go through is for PHP. If you use a different programming language then I'll leave it to you how you translate what's written here

So. First step: Set up the dialog form and the fb:dialog tag:

PHP:

This is pretty close to the sample they give you in the documentation, just with my form added. Note that the path to the script you call is a path to your own server, not to your Facebook app!

Save this as your initial canvas page - in this case, test_dialog.php.

Next, code up the server script to do it's thing:

PHP:

Right. The first line ensures that my Facebook app configuration is loaded so that I have access to all variables I need and can also instantiate the Facebook class if needed here. $appurl will contain the path to my application in Facebook - i.e. the apps.facebook.com one - with a trailing "/".

Save this as dialog_response.php (as per the clickrewriteurl attribute of the submit fb:dialog-button on your form).

The form parameters will be POSTed to the script and can be retrieved and used here. If all is fine, return the expected format to Facebook as above. If you omit the fb:dialogresponse, fb:dialog-title or fb:dialog-content tags your output in the dialog box will look pretty sparse - probably just plain text surrounded by the grey border. Not what we need.

Sending back the content correctly formatted will ensure that your users see what you expect them to see, all nicely presented in the "same" dialog.

Note the line:

PHP:

This is important as it's the line of code that will render the close button on the dialog response shown and ultimately ensure that the user is redirected to the page you want - in this case, thanks.php.

In the error processing I'm going to leave the user where they were.

The last thing we need is to open the dialog. Bear in mind that what we're working with here is the FBML tag and not FBJS or javascript. We therefore need a link of some sort.

For the sake of simplicity we'll add a link to the test_dialog.php canvas page to open the dialog:

Code:

Now, assuming all is coded up nicely, your user will see the link when he/she visits your canvas page. Clicking the link will open the dialog:

Clicking "send" will call the server script which, in turn, will do it's thing and return the nicely-formatted response. The response is shown in the dialog:

Closing the dialog by means of the "close" button (there isn't another way other than reloading the page) will cause the user to be redirected to the thanks.php page:

That's it!

You can use this approach for adding extra security to "log in only" areas of your application or to provide any other interactivity you need. Dialogs opened with fb:dialog will also hold SWFs, Images or other forms of content BUT be aware that the width of the dialog seems to be fixed at about 465 pixels.

Have fun with your dialog(ue)s!

Robert

How's this for really cool packaging design?

The Bandito was created by Pemberton & Whitefoord for Tescos. He is shown wearing different outfits and with different accessories for the various flavours:

What I find really cool about the graphics, apart from their really neat simplicity and touch of humour, is the way that the floor on which his chair rests seems to slope up and backwards (correct perspective) even though the bag actually curves down and back at this point! Very nicely done!

Some of their other work shown on their site is very nice too, by the way...

Anybody feel like posting me some of the Chilli ones (that'll be the red packet ) from the UK?

(found on TheDieline.com, a site I shall be surfing through some more)

Yes, you read that correctly - Nabaztag has been seen busking on the streets to raise more money for the CBO (Customer BuyOut):

Help to spare him this humility and to ensure that he is not silenced in early September - and become part of the company that saves him from extinction!

Go to savenabaztag.com and pledge as much as you think you can comfortably afford to help raise the funds we need. Everybody who pledges funds will become a shareholder in the new company should the buyout bid be successful!

This is a serious venture and one which is being worked on by knowledgeable professionals and people like you - Nabaztag owners.

There's not much time left before September!

Thank you.

An excellent video that shows the sheer amount of work that was involved in the rebranding of Swisscom last year. The challenge was enormous - Swisscom had decided to dissolve their separate businesses and recombine them as a single business, with divisions focussed on Residential, SMEs and Corporate. If you take a look through their website you'll get an idea of the scale of their business. The rebranding must have been both a huge and a fun project to work on.

Swisscom – Re-brand film from Moving Brands on Vimeo.

Nicely made

No, I'm not in it (not as far as I can see!)... This video compilation of shots from Flash at the Lake this year by dobbelfeld is brilliant - respect!

Gives an idea of how cool this event was - and the music is well-chosen.

Enjoy