expertria.com

I have been using Amiando to host events for the Singapore Flex Usergroup for the month of August and September and it works great. No registration for end users, reminder services, simple non-cluttered interface. However, what impressed me most is their service. And here is why:

At Amiando, you can upload banner for your events, change the CSS, to meet your event styles. I uploaded an image yesterday and coincidentally, it is covered by the tabs below:

I dismissed the issue, as I believe most users will actually saw my email newsletter first before heading to the page. However, when I woke up today, I revisited the website and see this:

What is the difference? Basically it is being FIXED! And I got a personal email from Amiando stating:

I have seen you set up a new fug meeting http://www.amiando.com/fugsg-sept.html which looks great. We can do some adjustments via CSS so that the text in the left corner can be seen as well as the Yahoo logo. I will talk to our frontend developer Patrick and will let you know.

Best,
Boris

What does that mean? That means that Boris Barreck from Amiando, actually takes the time to go through every single event hosted on Amiando, checked whether there is any problem. Even a small CSS issue as above, is identified and fixed within a few hours. Note that Amiando host major events like LeWeb and I deeply appreciate them to actually notice issues I am having on their website and help me within a day.

Web 2.0 Customer Service

Web 2.0 has cause significant changes to customer service and support. On top of Get Satisfaction, we see companies tracking Twitter for keywords to bash their competitors or to provide support, as well as in my own case, tracking blog post for relevant questions on your product (see the comments in the link)

With high competition and low barrier to entries to the Web 2.0 world, it is not difficult to understand how good customer service like Amiando will play a big part in the success of a company.

Today, Facebook announced that they will be shifting the Application Bar to the bottom left corner of the page, together with the chat bar.

So I was happily coding halfway today, when the Application Bar on the top disappeared and I was thinking it is due to me not drinking enough coffee. Then bang, it appear on the bottom on the second look

For those who do not know what Application Bar it, it consist of all your applications on Facebook, including Events, Photos, Videos and the other application you have installed. Previously, it can be access as a drop down list on the top. The new bar also means that bookmarked applications will now be visible always in the bottom.

Does the new Facebook profile really sucks ?

I started doing Facebook application development before the New Profile and things are pretty simple. 1 cached FBML for the profile page and the rest of the application is pretty much up to your own creativity. With the New Profile, you can have your application in the main Wall, OR it can be under Boxes, AND it COULD be under Application Tabs.

For end users, most of the first reaction from people I met is “It sucks”.  In fact, that is my first reaction too. Plus, designers will curse and swear too since now they have to design 2 more UI for Boxes and Application Tab. However, that also means that every Application gets the chances to have more exposure. Having a user putting your application to his / her application tab will be like winning a lottery, that means they love your application. You can now design a wide FBML  for Boxes Tab, and also a narrow FBML for Wall Tab, in which both can have radically different design, at the discreet of the developer.

Another tread we will see if that developers will now focus more on User’s stories to have their application noticed. Unless a user place their application under Wall Tab, it is unlikely that their friends will go the Boxes Tab to see “what application their friends have”. By focusing on User’s Stories, they will have information of their application to appear under the users’ Feeds, which is right on top on the user profile page. Applications not doing that yet will have to do that, to keep their applications competitive.

On the overall, while during the transition period, many might throw curses at Facebook New Profile design, I believe they will come to like it as they get used to it. Afterall, we get a less cluttered profile page now.

Do you want to keep FIT?

Seesfit CEO Loic Le Meur recently starts a Social Software Diet Challenge to encourage Web 2.0 junkies to come together for a keep fit program. It has now a wiki page and many related photos on Flickr.

Since then more than 20 people have answered the call to keep fit, including me. The rules are simple, set a goal, and twitter and Flickr about the things you eat every day, and talk about your progress on Seesmic.


I am surprise that you don’t exercise

This is something I heard my fellow Flash mate Flashmech. I am not sure if you have heard similar words before, but this is definitely something anyone will not want to hear! Matter of fact, before I start working, I was 60kg, and being 1.75m, that is underweight. Now, I am 75kg and that is overweight. Like a friend of mine always said , “there is only 1 letter difference between FIT and FAT”. So if you are “under attack” from your friends, join Seesfit and start to lose the few kilograms on your belly!.


A little personal project to track Seesfit!

To help to track Seesfit, I whipped up a little Seesfit Application to help to track the progress of Seesfit’s users. Note that while I work for Seesmic, this is a completely personal project.

This application uses Google SpreadSheet as its backend database, and combine Flickr photos tagged with Seesfit, and Seesmic Thread so that you can see everyone’s progress with 1 look. I will added more features like posting to Flickr directly as we go along. It can be downloaded at http://seesfit.expertria.com/seesfit.air. If anyone is interested, I will open source it too so anyone can add features to it.

Now, run as you code!

Introduction
For many Flex/Flash developers developing Facebook applications, development maybe daunting at first without a very detailed documentations, sample codes and blogs posting around to help. Most of time, many cannot grasp the general architecture of creating a Facebook application. While I am no expert in Facebook application development, I have picked up some useful tips and tricks along the way and I hope to share it around. Do take note the date of this posting. Facebook platform changes from time to time so 6 months down the road, this post might be obsolete.

Note that when I speak about Facebook development, it means having your Flash/Flex content inside Facebook profile and its canvas page. I do not mean connecting to Facebook using Actionscript. If you are looking to communicate with Facebook using Actionscript, please refer to this AS3 Facebook Library:
http://code.google.com/p/facebook-actionscript-api/

The Basic
Before you get started, I will suggest reading this blog posting by padraenl, titled 10 Things That Would Have Been Nice to Know When Starting My Facebook Application. Facebook Platform native documentation is good for referencing, but there isn’t instructions to teach new developers the “standard way” of approaching problems. This blog post answers to many common questions a developer will have.

How it works:
To understand how Facebook Applications work is very simple. Facebook does not provide you with any hosting service. You host your own application on your own server, and tell Facebook where to retrieve it. You churn out your own HTML / FBML / Javascript codes and Facebook parse it on its server, as simple as that. Essentially, you can develop in any language you like, as long as your codes render out the proper HTML / FBML / Javascript.

Things to note is that some of the examples you found on Facebook currently might be obsolete as Facebook now has a New Profile Design. To understand the new profile, you can read it’s documentation, or just scroll down to check the few screen shots I placed below:

New Profile

Instead of a one page profile now, there is now “Wall”, “Boxes”, and Application Tab. Therefore, you will need to plan at least 3 screens for your application.

Main Profile - Wall:

This is mostly visited page from the user’s friends. You have the real estate of a small column on the left hand side of the page. If you are using a Flash movie, it will only play after the user has clicked on a preview image due to Facebook restriction. This part is cached by Facebook and will refresh by using setFBML or the more scalable method fb:ref tag and fbml_refreshRefUrl method. I strongly recommend fbml_refreshRelUrl method. You can learn more about fb:ref here and view the code example here: http://wiki.developers.facebook.com/index.php/FBML_Dynamic_Setup.

Boxes

Boxes is the part where your application will be. Note that your application can EITHER be inside WALL or BOXES tab, and this is controlled by the user. (See the next Screenshot, where under the Video application, the user can choose to “Move to Wall Tab” or “Remove Box”). Also note that you can choose the left column (wide) or the right column (narrow) under your application settings.

Under Boxes tab, your Flash file will NOT show until the user clicks on a preview image.

All the Boxes content are cached and is refreshed by setFMBL or the more scalable method fb:ref tag and fbml_refreshRefUrl method.

Application Tab

This is the best privilege your application can have. A user loves your application so much that he/ she adds it to an application tab. In this case, your application has all the real estate of the entire page, and you can have a very customized UI / information like the below screenshot (Animoto application)

Note that this page is NOT cached by Facebook. So any content is taken directly from a URL you specified in the application settings. For example, you can set Facebook to take from http://expertria.com/myapp/profiletab.php. Facebook will load the page and display any HTML it loads from your server inside the Application Tab.

This also means you need to prepare your server for the load as this is no longer cached by Facebook. Also, if your server is slow is responding, Facebook will consider it as a timeout.

The Main Application.

This is the main application, outside the profile page. This is the part where user who have granted the application permission will see. Typically, it is under a url like http://apps.facebook.com/yourappname/yourapppageurl.

For example, if you set the base url of your application as http://expertria.com/myapp/. A page on Facebook “http://apps.facebook.com/appname/viewallmyfriends.php will be retreivng information from http://expertria.com/myapp/viewallmyfriends.php

You can have as many pages in your application as you want, as well as useful features like URL-rewriting for neater URL address, etc. Facebook does not care as long as they get a http 200 response for the page it request and the response contain valid HTML / FMBL, and that the response is not empty.

PHP development
You can develop Facebook application in any language on your server, but PHP has more code samples and examples around. I will chose PHP as the development language just for the reason of support. Note that as of the writing of this article, if you download the PHP library from Facebook developers site, you will get the old library (which does not has the full feature set for the New Profile Design).

To get the latest one, please download from their SVN:
http://svn.facebook.com/svnroot/platform/clients/php/branches/redesign-changes/

Where to keep my data
As mentioned, Facebook does not care what you do on your server, as long as your server response with valid HTML / FBML. Therefore, you can have data persistence in your own mySQL, or any database you want.

However, I will recommend using Facebook Datastore for a few reason. Firstly, you will not need to maintain another database. Secondly, you can do FQL to achieve something like  “Get those users who had installed this application,w ho are also the current user’s friends, who also are tagged in my application” , in a very direct  manner. Thirdly, there is a test console to help you test your FQL (Facebook Query Language).

Essentially, Facebook Datastore consist of Objects (like Tables) and Associations (like Foreign Key). I strongly suggestion anyone who is new to Facebook Datastore to check out this blog here [
Introduction to the Facebook Data Store API ->http://www.dereksantos.ca/?p=23]. It has far better explanation than Facebook documentation, and anyone with RDBMS knowledge will strike a chore instantly by reading the article.

Using FMBL and Javascripts
Learn FBML and Facebook’s Javascript FBJS before building your application! While many HTML tags are supported in Facebook, you cannot use an Object tag to render your swf directly in Facebook. You will need to use <fb:swf> tag. Using FBML will also gives you a consistent look to your application, so that it will looks like Facebook native application. For example, there is no need to build a custom tab as there is fb:tab. There is also no need to create a blue button that imitate facebook buttons as you can always use Facebook’s css class=”inputbutton” to change the style of your button to match Facebook’s.

As for Javascript , there are also restriction to Javascript. For example, there is no innerHTML to get the content of your HTML. Thus, you will need to learn how FBJS works on Facebook. You will also need FBJS to communicate between your SWF and the main Facebook page.

Flash FBML
Refer to this page to see how to embed Flash in Facebook page. The documentation is complete
http://wiki.developers.facebook.com/index.php/Fb:swf

Essential you need to use Fb:swf to render your swf file.

Flash - JS Bridge
The <fb:fbjs-bridge/>  is essential for your SWF to communicate with the Javascript on your HTML page. It works like External Inteface basically. How it works is that it creates another SWF on Facebook page and your SWF communicates to it via LocalConnection. The bridge will then use External Interface to communicate to the Facebook page on your behalf.

Refer to this documenation for code samples: http://wiki.developers.facebook.com/index.php/Fb:fbjs_bridge

Also, check out this library to call / receive functions in AS3

Creating Flash in Javascript
There are two ways to create a SWF dynamically using Javascript. One way is to use a fb:js-string, which is a pre-setted FBML, initially invisible, and then use document.getElementById(’name of div to insert’).setInnerFBML(myjstringname) to show it on the page.

An fb:js-string example:
<fb:js-string var=”myjsstringname”>
<fb:fbjs-bridge/>
<fb:swf swfbgcolor=”333333″ imgstyle=”border-width:3px; border-color:white;” swfsrc=”http://expertria.com/swf/fb.swf”   width=”300″ height=”280″   />
</fb:js-string>
Another way is to use document.createElement(”fb:swf”), which will dynamically create a new SWF object. You can then set its swfsrc , width and height using the below code:

var swf = document.createElement(’fb:swf’);
swf.setId(’my_swf_id’);
swf.setWidth(’100′);
swf.setHeight(’100′);
swf.setSWFSrc(’FULL_URL_TO_MY_SWF’);
document.getElementById(’swfContainer’).appendChild(swf);

Summary
I hope the above article helps developers with Flex/Flash background in having a better understanding on Facebook Application. Feel free to drop any tips you have under the comments. There are a few things like Mock AJAX and AJAX javascript which I did not cover, but the above should be sufficient to get someone started.

Keep coding!

Earlier this year before I join my current job at Seesmic, me and my co-workers are brainstorming ideas for the next web 2.0 trend. One of my belief then is “regardless of how the roadmap might be, we will need to have an equivalent Facebook application”

Over the past two weeks, I have been researching into the Facebook API extensively, covering each little pieces of FBML, reading hacks, standards, rants, and trying to keep my sanity together debugging Facebook applications. One thing is for certain, that is, for almost every reputable Web 2.0 service we see out there, they bound to have a Facebook equivalent. FriendFeed has it, Animoto has it, Viddler has it, Flickr has it. So, has this trend become an unwritten law in the world of Web 2.0? Is it vital for a website now to have a Facebook app. in order to succeed?

Viral, Viral , Viral!
We cannot deny that Facebook has a strong platform, good users base, and a very neat and consistent UI. While many developers will complain about its documentation, one thing we can say is that “it is working”, and that it has taken many work out for developers, including data storage on the data side, and a consistent CSS on the design side. Its simple and straightforward model gives companies and its developers the flexibility to develop their application in any language (although some has the misconception that it can be only be done in PHP). All is need will be to get the developers familiar with the Platform, take and modify existing line of product you already have, and Bang!, you got yourself a shiny facebook application, with 100 million of users possible of installing your application .

The viral nature of Facebook application means that you can easy get tons of users using your application. The presence of your services can be rapidly spread among friends of friends and by the time you realize, you might have more users on facebook than your actual application.

Planning a Facebook application in the brainstorming process
So the key question now is, do entrepreneurs and startups have Facebook in their radar even during the  brainstorming process? Is it a priority 1 thing to do , something that a company, should be doing immediately right after they launch their product. Do it gives a company an edge our its competitor, and does a lack of presence on Facebook a boo-boo and an embarrassment?
Facebook users vs your application users.
Segregation of users is 1 important trend I belive all startups should consider when building Facebook application. Does every 1 user on your Facebook application equivalent to a user in your actual application? Or is it just another service under the umbrella of services your company is building?

Services like FriendFeed map each of its Facebook application user to its real service. Meaning, for every Facebook user that installed the FriendFeed Facebook application has a FriendFeed account. Most of the time, a FriendFeed user do not even need to go into his FriendFeed Facebook application, as what he interact with Friendfeed goes automatic to the facebook equivalent. In this case, the viral nature of Facebook value-add back to the original application as for each installed user they have on Facebook, they also get one in their application.

Services like Superpoke, developed by Slide.com, on the other hand, has no direct relation to the content on Slide.com. Unlike Friendfeed, what you create on Slide does not goes to be part of a superpoke automatically, neither is it logical to be so. On the other hand, applications like Superpoke is much more viral, but I doubt each user of Superpoke will have a Slide.com account.

Neither approach is more superior than the other, and both has its own benefits and business model.

Coming back to my belief, I personally believe that having facebook application for any startup is essential. Not just to be viral, but also to show to your users that you are serious in building the product.

What do you think?

There has been several services that enable you to embed chat onto your website, allowing real time communication with your users. One of them is Google Chat (which I placed in my blog for several months and later remove it). The reason for the removal is because 90% of the chats are job seekers, which I must respectably say, I am not an employment agency. Also, I believe they will have more chances in getting a job in websites like Flex Coder or even the Singapore Flex Usergroup Job’s Forum. There has been a few good occasions though, when webmasters and  website owners contacting me when I blog about their website. Still, getting “Guest did not enter chat” most of the time is overwhelming.

Last week, I am looking at the speaker panel of e27 unconference event and come across Zopim. Today, having spoken to their CEO Julian Low, I decide to give ZopIM a try. ZopIM, is a new service that allows business owner to embed a chat widget onto their website, which enable real time chat with their customer. With the focus of business owners and a professional chat / support channel in mind, ZopIM has clearly exhibits features that is more than just a chat service.

First of all, unlike Gtalk Gadget, ZopIM creates a chat window within the website itself. There is no popup , and chat window integrates seamlessly into the website

On top of that, if the user has previously chat with you via the website before , if he happens to leave the chat window open when he leave the website, the chat window will be automatically opened with the chat history. For websites that provide critical services, like hosting, this will be a plus as visitors can easily refer to what they had discussed with the help desk beforehand.

You can also enter your IM details in ZopIM page, in which ZopIM will notified you via IM when a visitor visits your site. However, I found that ZopIM sends me a notification each time someone open the chat window (without me responsing), and as he navigate across my site,ZopIM will send me more notifications. This is good for business owner, but for a mere blog owner, this may prove too overwhelming.

The general ZopIM control panel looks good too. Providing features like chat history, and even detailed information like IP address of the users. Using an AJAX interface, it is very responsive, although Julian express that they are currently working on a Flex interface, which is definitely inspiring.

A few ideas I will like to throw to ZopIM for consideration:
“user” as the one seeking help and the “agent” as the one who is answering questions

1. Allow the user to upload screencast (videos) or screen shots (images). Since they are targeting help desk. Having media is definitely better than text

2. Allow the agent to add a few FAQs, which auto replies the user. I have relative who works at customer service department so I know how hectic it is. If someone is asking a question and the agent is not responding (but online), that will probably means he is busy. Why not let the agent enter some text, or even videos to serve as a general FAQ to the users when they are waiting for a response. Or may a “tips and tricks” that will actually fix the issue. Since ZopIM already can add “notes” to their interface (for commonly used phase), selecting a few for auto reply should not be too difficult. For example, if a service is experience problems and users starts using the chat for help, a auto reply like “Hi, if you are experience problem, please wait 10 mins, we are resolving it ASAP” will be super neat.

3. Allow the user to change his/her nick. This will give a more customized experience. Visitor1049583 seems intimidating. ZopIM currently allow Agent to manually key in a user email.  My sleepy eyes missed that

4. Allow collaboration between Agents. That will be helping to bigger companies with hundred over agents / CSO

ZopIM is still young but definitely has a lot of energy. Click the right button to chat with me then! Although I will still appreciate if you can email me at shinchi[at]gmail.com for most matter

I do not think I am up to the standard to call myself a photographer, but I do love taking pictures with my Canon D400. After posting about using Seesmic for presentation yesterday, I found a new way to use Seesmic , thanks for Freida. Using CamTwist with she recommend, I can post my Flickr photos as a video stream while commenting on them.

This become a great way to talk about my photos as I get instant response, as well as able to embed it on my blog , where people can respond directly. Photographers who does not want to show their face (but their photos ) , can use CamTwist + Seesmic + Flickr, to store their photos, talk about their photos and get video response. Well, response to my photos below!

As a Flex developer, I am more interested over Flex applications over other RIA that are built on AJAX. Flowgram is one that blow me away at its creativeness. It is most probably an application that you “won’t get it” when you first look at, something which you will relate to a slideshow or a video playback initially. However, once you start to play with it, you will realize it is a ‘flow of websites, audio and images in which you can interact with”. Confused? 

Ok, for example, I can do a flowgram of FUG, and while you can viewing the flowgram, you can interact with the page as it is actually being loaded. See the flowgram I made

As you can see, Flowgram allows the user to actually play with a particular website while looking at a presenting about the website, which is something that we have not see before.

Listen to what the CEO of flowgram got to say:

If you need an invite, ping me on Identi.ca, I got a few to give away.

Identi.ca, a new microblogging service, hit the Web 2.0 world this month. Running on microblogging software, Laconica, Identi.ca saw many signup, presumably fedup with Twitter constant downtime and service unavailability. This is especially true when Twitter limits call to its API per hour, and that directly cascade to usability issues to application utilizing it. While whether Identi.ca will take off is still to be seen, I really hope to see Identi.ca releasing its API soon.

Meanwhile, feel free to add me here

Wix, a website builder gets interviewed by FUG this week on how they manage to build the site and their future roadmap. 

View the interview here: FUG Interview with Wix Developers

And of course, my first Wix: