Smooth Vodka!
posted by robert | filed under design
After finding the new packaging design for Tescos Tortilla Chips yesterday I decided to look further into TheDieline.com. It was worth it. Take this beauty, for example:
This has to be one of the slickest bottle designs I’ve ever seen! Wyborowa is one of the tastiest Vodkas you can drink – and also the oldest Vodka in the World. This bottle design really does it justice.
Not content with designing the bottle, Kevin Leung (Behance profile) went on to design other branded elements including a glass:
…and even packaging:
This design has everything I love in design: Simplicity and power. Love it 
A Dialog with Facebook
posted by robert | filed under social media, tutorials/samples
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:
<fb:dialog id="my_dialog"> |
|
<fb:dialog-title>Email register</fb:dialog-title> |
|
<fb:dialog-content> |
|
<form id="dialog_form" method="post"> |
|
<table width="300" cellspacing="1" cellpadding="4" border="0" align="center"> |
|
<tr> |
|
<td>Name:</td> |
|
<td><input type="text" name="name" size="40"></td> |
|
</tr> |
|
|
|
<tr> |
|
|
<td>Email:</td> |
|
|
<td><input type="text" name="email" size="40"></td> |
|
|
</tr> |
|
|
</table> |
|
|
</form> |
|
|
<fb:dialog-button type="submit" value="send" clickrewriteurl="<path to your server (not the apps.facebook.com one!>/dialog_response.php" clickrewriteid="my_dialog" clickrewriteform="dialog_form" /> |
|
|
</fb:dialog-content> |
|
|
<fb:dialog-button type="button" value="cancel" close_dialog="1" /> |
|
|
</fb:dialog> |
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:
require_once('config.php'); |
|
|
|
if (isset($_POST['name']) && isset($_POST['email'])) { |
|
// do whatever you need to do here... |
|
echo('<fb:dialogresponse> <fb:dialog-title>Email register</fb:dialog-title> <fb:dialog-content>Registered! Thank you.</fb:dialog-content> <fb:dialog-button type="button" value="close" close_dialog=1 href="'.$appurl.'thanks.php"/> </fb:dialogresponse>'); |
|
|
|
} else { |
|
// do some error stuff here... |
|
echo('<fb:dialogresponse> <fb:dialog-title>Email register</fb:dialog-title> <fb:dialog-content>You did not enter both your name AND your email!</fb:dialog-content> <fb:dialog-button type="button" value="close" close_dialog=1 /> </fb:dialogresponse>'); |
|
|
|
|
|
|
} |
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:
<fb:dialog-button type="button" value="close" close_dialog=1 href="'.$appurl.'thanks.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:
<a href="#" clicktoshowdialog="my_dialog">Register here...</a> |
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
The coolest Tortilla Chips in town?
posted by robert | filed under design
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)
Nabaztag takes the campaign to the streets!
posted by robert | filed under general
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.
How Moving Brands reworked the Swisscom brand
posted by robert | filed under design
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
Flash at the Lake video
posted by robert | filed under flash/flex, general
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
Blogger Portrait!
posted by robert | filed under general
http://www.pixelfreund.ch/2009/08/blogger-portraits-robert-turall
Today pixelfriend published my Blogger Portrait on his blog. I feel very honoured to be able to take my place amongst some rather distinguished Swiss Bloggers and will certainly have to write a few more bilingual or even german posts here
It seems that he’s also a fan of Nabaztag! Thankfully, I managed to snap a quick photo of my Nabaztag before he went to sleep last night (yes, good Nabaztags have proper bedtimes and wake-up times too) and he’s a prominent feature in the portrait.
Here’s the portrait. It’s in german (well, my version thereof with a few grammatical correections from Ralph) but you can look at the pictures if you don’t understand it – and see what my desktop background looks like!
Also: Don’t forget: Save Nabaztag!!!!
Thanks Ralph 
Bloggertyp!
posted by robert | filed under general
Jetzt ist es soweit! Der pixelfreund hat weitere Bloggertyp Buttons erstellt und meine perfekte Buttons sind dabei!
Er hat sogar 2 für mich angefertigt: VarietyBlogger und RabbitContent:
Sind die nicht schön?
Ich habe seine Buttons nochmals durchgeblättert und einiges gefunden. Ab sofort findet ihr meine Lieblings-Buttons in der rechte Spalte… Dann siehst du, warum er für mich ein VarietyBlogger Button erstellt hat…
Twitter formalises the retweet – evolution?
posted by robert | filed under social media
I spotted this today, via @swissmiss and @GuyKawasaki: “Project Retweet” is underway over on the Twitter Blog.
The post, by Biz Stone, explains how Twitter are working on a new way to adopt and formalise the “Retweet” (forwarding somebody else’s Tweet onto your own followers) by building Retweet functionality into the Twitter web interface (as per the concept sketch by Biz Stone above) and also to build the same functionality into the API for developers.
“Cumbersome” is the word he uses to describe the current procedure that the community has adopted – placing the contents of the original tweet in quotes and preceding it with “RT” and the original poster’s name. OK, so it’s a little messy
The main benefit of an integration of Retweets into the platform is, for me, not that it’ll be any easier to Retweet, but that there’ll be extra characters available from those precious 140 to make an extra comment – assuming the approach taken in Biz’s concept sketch (very nicely drawn, by the way) is taken.
Now that’s cool! No revolution, but certainly a nice example of evolution.
Biz: I stole your sketch – thank you
Ich, Hier, Jetzt! Me, here, now!
posted by robert | filed under general, social media
OK, here it is: My first bilingual blog post!
pixelfreund started a Jekami (German: Jeder kann Mitmachen – means anybody can join in) today. I joined in. Here are the instructions, get that camera ready!!!
pixelfreund hat heute zu einem Jekami aufgerufen:
1. Take a picture of yourself right now.
(Fotografiere Dich genau jetzt)
2. Don’t change your clothes, don’t fix your hair…just take a picture.
(Zieh Dich nicht um, richte nicht Dein Haar … mach einfach das Bild)
3. Post that picture with NO editing.
(Veröffentliche das Bild, ohne es zu bearbeiten)
4. Post these instructions with your picture (in your Blog).
(Veröffentliche diese Instruktionen mit dem Bild (in deinem Blog)
Mach mit und poste deinem Link als Kommentar!
Join in and post your link as a comment!
Happy Friday all
