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

So, here's a little challenge I had to address today: My Flash Application reads in an XML file with the positions of players in a race (Grand Prix feeling!) and then plots them, in the appropriate positions, on the race track. Fine so far.

It's just possible that one of the players will be in the "pits". This is indicated by a position of 0.

Simple enough: A basic PHP admin page allows positions to be entered and then builds the XML file for the flash after it's added the player data to a MySQL database. To save some Flash processing I've sorted the rows in the players table and I'll write the XML in the sorted numerical sequence.

Now, we all know that sorting a numeric field with values between, say, 0 and 12 will put the 0 values first in the list. This is not ideal as I want to show a score table populated from the XML file and would rather not have to sort at all in the Flash app (keep it light).

So how do we sort a numeric column in a MySQL SELECT statement and also "move" any 0 values to the end of the list?

Try this:

PHP:

Works a treat!

What we do, in addition to retrieving all of the table rows, is to retrieve the results of a condition as the "column" isnull:

posn=0 AS isnull

This results in the value of isnull being 1 (true) for any values of 0 and 0 (false) for other numerical values. Sort this "column" first and your 0 value rows will be listed at the end of the result set.

Happy coding!

Robert

I posted a snippet of code the other day which enables you to make your Nabaztag report any visitors to your website to you. Now, the first thing that happened after I published that post was that my rabbit proceeded to chatter away and relate to me the locations of all of my marvellous readers

Amongst the visitors where a large number of "visitors" from Mountain View in California... hm. Knowing that this is the homeplace of that friendly web spider Googlebot, I thought it better to add some more code and single it out for special treatment.

For those of you who know your PHP this may appear trivial. For those of who don't know this yet then here's a further little snippet to show how you can pull out such web spiders and send out a special message from your Nabaztag when they visit:


$agent = $_SERVER['HTTP_USER_AGENT'];
if(strpos($agent, "Googlebot") === false ) {
// put the normal notify code here
} else {
// put your special "Googlebot is visiting!" notify code here!
}


The strpos function simply looks for any occurrence of the string "googlebot" in the user agent reported by the visitor and singles these visits out for special treatment.

The User Agent string for Googlebot is typically something like this:


Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)


You could, of course, use this code for all sorts of things and also single out other spiders or visitors (if they pass on anything useful in their user agent strings).

Have fun!

Robert

ps. Post corrected: Note the User Agent string is now correct

Do you have a rabbit? I don't mean the cute fluffy things that eat lettuce, but rather the (even cuter) Nabaztag variety:

If you don't, you're missing out on some fun and another useful way to bring the networked world into your home or office. You can find out more about them on the Violet website (link above).

Meanwhile, my rabbit as already told me that you're here. Thanks to a little piece of code and the easy-to-use Nabaztag API I've given my Nabaztag:tag the ability to tell me every time a visitor comes to this blog.

How's it done? Easy.

Assuming you have a Nabaztag or Nabaztag:tag then follow the steps below:

1. Log in to your Nabaztag "My Burrow" and click "My Preferences" to enable API access for your rabbit:

   

   Nabaztag API access enabled
2. Note that you can also see your rabbit's token and serial number here. Note these down
3. Now, wherever you want to add code to make your rabbit notify you of a website or blog visit, for example, you can use the following code send it a message using the API. Here's an example of a website visitor notification, in PHP:
   
$ch = curl_init();
$message = "new website visitor";
$timeout = 5;
curl_setopt ($ch, CURLOPT_URL, "http://api.nabaztag.com/vl/FR/api.jsp?token=<your token here>&sn=<your serial number here>&tts=".urlencode($message));
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$file_contents = curl_exec($ch);
curl_close($ch);


   Note the third line. Here's where you need to subsitute your own token and serial number to make your own rabbit talk.
4. Test it by opening the page you've embedded the code in - that's it!

I've used CURL to make the call to the API URL simple. You could, of course, use other approaches but this is nice and unobtrusive and leaves the visitor on the page without redirecting with "Location", for example.

This can be taken further by adding in information about the location of the visitor or even adding such code to a web shop and adding information about the product(s) ordered. The applications are practically endless and the motivational effect of hearing how often your site/blog/web shop/etc is visited is not to be under-estimated.

Add to that the possibilities for moving your rabbit's ears, controlling light sequences and even streaming MP3s programmatically and there are many ways in which you can extend the usefullness of these cool little creatures. More information about the Nabaztag API can be found here...

Have fun coding!

Robert