Song Guru - A Facebook Game Application for Music Listeners

On my previous post, i mentioned about the first Facebook app i created called Song Guru.  The app is here:  http://apps.facebook.com/songguru

Here's the description:

Are you an avid music listener who knows the top songs in the land? Are you able to identify the artist and title when you hear a tune? The rules are simple, choose the correct title and artist of each song that we play for you. If you get all 10 correctly in the least amount of time, then you are a SONG GURU!

Playing the game is easy.  Here are the instructions:

When you hear the music play, find the correct song title on one of the boxes. Depending on the level you choose, there can be 10, 15, 20, 25 or 30 boxes (choices). When you click on the correct box, you earn a point, the box turns green and the next song plays. If you choose an incorrect box, you don't get a point (of course), and the box with the correct title turns red and the next song plays. Try it out now! Choose a Level and click Start to begin playing. Good luck!

Here's a screenshot of the game once it ends:

Building my first Facebook Application

So I went through the Facebook documentation on how to build an app. It was very easy and straightforward. There was an example app called Footprints. I downloaded the PHP code along with the Facebook PHP client library and FTP'd it to my host. I thought of using the example code as my initial code and i'd just build on top of it. I had to also set up a MySQL database on my host for the app to run. You just run an SQL script provided in the Footprint sample app.

Configuring the app on facebook was a breeze. You go to: http://www.facebook.com/developers/ and click on Set up New Application.  Facebook gives you an Application key and a secret key to use on your client code.

You just need to specify the Canvas url which is the absolute path to your index.php on your host. For example:

Canvas Callback Url : http://myhost.com/myapp/index.php

Of course you need to supply the Canvas Page Url. This is like searching for a domain name. I wanted to get apps.facebook.com/MusicGuru but it was already taken so I just chose apps.facebook.com/SongGuru

Then i went back to the Footprints PHP code and entered the App key and Secret key on the config.php.

So after setting this up, i was ready to test the Footprints app.

I went to apps.facebook.com/songguru to see what it looked like.

The first problem I ran into was a minor database config error.

Warning: mysql_query(): supplied argument is not a valid MySQL-Link resource in /.../footprints/lib.php on line 11

So, the fix was just to specify 'localhost' as the IP address of your database on the config.php file

// The IP address of your database
$db_ip = 'localhost';

Another error was when I clicked on Step button:

Warning: Missing argument 3 for FacebookRestClient::notifications_send(), called in /.../footprints/lib.php

The fix was to add a 3rd parameter to this API call:

$result = & $facebook->api_client->notifications_send($to, ' stepped on you. ' .'../apps.facebook.com/songguru/.', 'app_to_user');

Another error was this:

Fatal error: Call to undefined method FacebookRestClient::feed_publishActionOfUser() in /.../footprints/lib.php on line 58

Turns out that this API call is obsolete:

$facebook->api_client->feed_publishActionOfUser($feed_title, $feed_body);


So I replaced it with this:

$facebook->api_client->feed_publishUserAction($feed_title, $feed_body);

After that most of it seemed to work. I could see stuff saved to the database.

Now it was time to create the functionality for SongGuru. So i got rid of some example code and retained the important ones for logging in, displaying the name, and publishing the stream. Next thing to do was create the client side stuff. When i configured my App earlier, I had been deciding whether to use an iframe or FBML for my Canvas render method. I chose the FBML of course. The iframe approach was too easy. I wanted to burden myself with Facebook code.

So with FBML, you don't need to put 'html' and 'body' tags. This is already taken care of by the canvas. You can put html tags, css, javascript and FBML (Facebook's tag-based API calls). And so i put all those.

When I tested the app once again I was wondering why my Javascript wasn't working??? If you choose FBML as your render method, most of your javascript functions will not work. You have to use FBJS which is Facebook's own Javascript wrapper functions. For example:

myAnchor.href = 'blogger.com' becomes myAnchor.setHref('.blogger.com')
myButton.value = 'Submit' becomes myButton.setValue('Submit')
myDiv.innerHTML = '' becomes myDiv.setTextValue('')

Setting css classes would have to be like this:

document.getElementById('panel').setStyle('visibility', 'visible');

Facebook canvas already has the clearfix css class defined so you do not have to write your own clearfix rule. Just add class='clearfix' to your tags that need it.

Also getElementsByTagName and getElementsByName do not work. You can only use getElementsById.

You can also make Facebook Javascript API calls inside the canvas. For example:

Facebook.showPermissionDialog('publish_stream,read_stream');

This will display a dialog box asking the user's permission for automatic updates by the app.

To sum it up, it was very easy creating a Facebook app. I love how Facebook created their APIs. Of course you need to think of something interesting to create. My next post will talk about the app I made.

DZOIC CLIPHOUSE Video Sharing Script REVIEW

Overview

This is a relatively new product in the market. You can hardly find any reviews on it on the web. Their knowledge base is pretty small. They have a members forum with a lot of complaints from customers on how tech support takes too long to (or never) respond.

I have evaluated different video sharing scripts on the market including Clipshare the most popular one. All of them have similar features but only Cliphouse beat the others with their Video Ads plug-in. The Cliphouse admin has the ability to configure different banners (mid-rolls, pre-rolls, etc) to display on a specific video or a category of videos. Other scripts, including Clipshare can only set mid-roll ads for all videos. This was the primary reason why I chose Cliphouse.

After an impressive online demo of Cliphouse, we decided to purchase their product along the following:

1. Script installation option - They do the installation of the script on your server.
2. Branding free option - They remove all links to DZOIC on your site.
3. Load balance plug-in - For better performance on a multi-server setup. I haven't used up my credit for this yet.
4. Server setup option - They configure the modules on your server to make sure everything works properly. I haven't used my credit for this yet. I'm saving it for a rainy day.
5. Video ads plugin - For advertising on the video player. The main reason I chose this product.

Cliphouse has a hosting partner called DHS. We chose Vexxhost hosting instead of DHS for price reasons. DHS hosting was more expensive and had less storage. We chose Shared hosting to see if the product works the cheapest way possible.

Problems Encountered

1. Failed to find flength file

The Cliphouse script installation was almost useless. They just install the script and leave you to do the rest of the configuration. For instance, after script installation, I tried uploading a 2MB video, and I immediately got the popular "Failed to find flength file" problem. I went to their knowledge base and they had the solution for this:

a) First of all make sure that /cgi-bin/ directory and file /cgi-bin/ubr_upload.pl have 755 permissions.
b) Make sure uploader/tmp has write permissions.

So i did both these, and the uploader started working.

2. Progress bar not working

The uploader worked now. The only thing I couldn't see was the progress bar. I didn't find anything on the knowledge base for this so I just dug into the PHP code. The problem was that the div for the progress bar was pointing to a background image that wasn't existing. So I just put a background color on that div and now i could see the progress bar.

3. Videos do not show up or Unfortunately Video May Not Be Converted

This issue was a pain. This problem was intermittent and I couldn't figure out why it was happening for most videos i uploaded. As soon as you upload a video, you get redirected to a page that says the video was uploaded successfully. But then your video is nowhere to be found on the site. Then you notice a message from Admin saying that the video was deleted because the video could not be converted. The solution for this was to specify the correct path for the following: ffmpeg, flvtool2, mencoder, mplayer. So on Cliphouse admin, you just go to Setup -> Paths and enter the correct paths to those encoders. For vexxhost the paths are typically these:

/usr/local/vencode/bin/ffmpeg
/usr/local/vencode/bin/flvtool2
/usr/local/vencode/bin/mencoder
/usr/local/vencode/bin/mplayer

If you are not sure about the paths, ask your hosting provider. If you have access to the console. Type whereis ffmpeg and it will give you the path for it.

4. Progress Bar gets stuck and 500 Internal Server Error

Now this was a major frustration. Sometimes when I upload a video, it would get stuck at a random point. For example, after waiting for an hour the progress bar would get stuck at 99% and throw an Internal Server Error. Sometimes it would get stuck at 15% or 60%. Cliphouse Tech support took 2 weeks to get back to me with no solution to the problem. They told me to change the default uploader, UBER-UPLOADER to Uploadify, a JQuery uploader. I started scratching my head because I have tried Uploadify and i am familar with what it does. I don't think the problem here was the uploader. There were 2 things I suspected, it could either be a problem with the Cliphouse script or a problem with the my Hosting provider, Vexxhost. I contacted Vexxhost and asked them if I could upgrade to VPS hosting. VPS hosting is like having a dedicated server but on a VM (virtual machine). If you're familiar with VMWare or VirtualPC, you'll know what i'm talking about. To my surprise it did solve the problem! Now I could upload videos smoothly without errors.


5. Audio and Video not in sync

I am stuck with this now. The synchronization problem is very obvious and I am still waiting for a reply from DZOIC. Vexxhost says this is not a hosting problem since it involves encoding and it's most probably the script. I am hoping to get a solution to this the soonest. If not, then I am gonna have to look for a different video sharing software.

CONCLUSION

To conclude, DZOIC Cliphouse is a very good product (if you get it to work). It has lots of great features and very easy to use. I looked at the source code and it is very well written. Installation is easy and the admin tool is very powerful. But they need to focus and invest more on customer support. We bought the Cliphouse script a month ago and we haven't gotten it to work properly. This is a very bad experience and can cause their customers to get frustrated and just look for a different product. As for me, I still have credit for the Server Installation. This is my last option. If they don't get this thing to work properly, Goodbye Cliphouse!

UPDATE (Nov 19, 2010)

Tried it on DHS Shared Hosting and i'm getting that #5 error again.  I had the script installed by DZOIC.  Well i think they outsourced the installation  because it was a guy named Frank R. from to Fandar-IT who installed the script.  So looks like DZOIC is really a failure.  I thought DZOIC and DHS were a perfect match.