Category: Facebook

Facebook apps: my application development history

My Facebook Application development journey began way back in 2007 when Facebook first opened up it’s API’s to application developers. It was a different landscape back then. The API was fresh and documentation spares and possibilities limitless. All my apps were “Free”. Nothing to pay. They were all solving a problem I had at the time.

All my Facebook app development was done on a LAMP stack, from scratch. No Frameworks. I created my own Framework called “Semerda” to handle common stuff like caching, logging, database access etc… Since Facebook’s API was PHP focused this made it easier to work on a LAMP stack.

This worked out well for my my 1st app called Rock Radio – a complimentary channel for music distribution from a business I was running at the time called Rockin The Shed. You can read more about the Rockin The Shed business here. Later as the landscape changes I moved across to using Patterns and MVC (model-view-controller) to achieve faster and cleaner development on a LAMP stack. My latest Facebook Application called “ReadingList” is using CodeIgniter MVC.

Below is a history (back in time) outlining my Facebook App development.

Rock Radio (aka Rockin The Shed) App

Status: Retired

The idea behind the app was that once all our radio stations finished broadcasting the weekly show of Rockin The Shed for the week, we would release it on Facebook for those that either missed the show on the radio or wanted more of the good Rock Music we broadcast.

Facebook at that time did not have as much traction as today but I saw an opportunity in what it could be one day, a place where people would always hang out. So why not feed them with some awesome music.

MoshCam App

Status: Hybernating

Then came another idea. Since we were in the rock scene and hardcore fans enjoy the mosh pit* at these rock concerts we thought what would be the best way to capture that experience and share it with friends. Naturally Facebook was the place where friends hanged out and so MoshCam was born – an application which allowed people to share videos from their mosh pit experience with their friends on Facbeook.

* Moshing is a dance in which participants push and/or slam into each other.

The app still lives on Facebook in an unsupported format here:
http://apps.facebook.com/moshcam

MosCam was a quick build using iStockphoto images to speed up design to test the waters whether we had something here. This idea didn’t get much traction so we moved on to focus on Musichouse. Musichouse was to be an extension of Rockin The Shed and provide a lot more value. Read about Musichouse here.

Friends App

Status: Hybernating

One day while noticing the volume of friends join Facebook I had another idea. An idea was to keep up with notification of friends birthdays so I can see in advance in how many days away are friend’s birthdays. While building this out I pushed the API a bit further and exposed other friend stats likes what zodiac sign they were, age and sex and visually presented it using Google’s Chart Tools.

According to a flutter developer, his app is pretty rough around the edges since it’s only been for my own peruse. Should you find value in it feel free to use it and send me feedback.

This App can be located here:
http://apps.facebook.com/f_r_i_e_n_d_s/

iStockphoto App

Status: Retired

Launched around 4 years ago to solve a problem I (and other stock photographers) had around exposing & sharing stock photos from istockphoto.com (world’s largest stock website) with friends and colleagues on Facebook.

iStockphoto was gaining a lot of traction and since I was playing a hobby-part-time stock photographer in my spare time & Facebook fan I wanted to share with the Facebook community all the cool photos I was taking and uploading to iStockphoto. So came the idea of tapping into my iStockphoto XML feed and exposing it as a Grid of photos on my Facebook profile. At the time Facebook profiles allowed “Boxes” in 2 Views so this provided excellent exposure for my photos. The app was built in FBML (Facebook Markup Language) and today is retired after Facebook changed their profile layout, rules & retired the FBML.

iStockphoto Facebook App – how it worked

ReadingList App

Status: Active

ReadingList was developed to solve my own problem. How to keep a single list of books I want to read, have read or are reading with ability to share that list with my friends… who are on… you guessed it, on Facebook.

After developing the application I started getting comments and feedback from friends who also read books that they wanted to use this app. So without any restrictions, I opened it up to the world so others can inspire their friends with books and keep a list of their books in the place they visit daily, Facebook.

Technical detail about this LAMP MVC CodeIgniter app are detailed in a previous post I did here: http://www.theroadtosiliconvalley.com/facebook-social/app-readinglist-share-books/

If you want to start using this free app today go here: http://apps.facebook.com/readinglist/

Facebook Readinglist – find your books!

There you have it folks…

My background with Facebook app development. Facebook app development is fun. Especially when you start seeing other people getting value out of using your application. That is both inspiring and motivational. Then listening to your users helps you improve the app and take it to the next level and you really get pumped in making a difference in other people’s lifes. To learn more about modern history, here is a great post on gen x.

If you haven’t started Facebook development then I highly recommend you do it today by going here: http://www.facebook.com/developers. The Facebook API today is light years ahead of the one that existed few years back and gives you the power to do a lot more and build awesome social products.

If you have a Facebook app you are proud of please post it in the comments below and share with the rest of the world.

Happy Facebook app development!

~ Ernest

Facebook App: ReadingList – share your books

Gain wisdom of the world. As the famous Jim Rohn stated ~ “All Leaders Are Readers”. If you are a book worm and also on Facebook then you should grab this free awesome Facebook Application I developed called ReadingList.

What is ReadingList?

ReadingList allows you to share the books you are reading or have read with your friends on Facebook. It also acts as your online library to store the list of your books. Simple, easy to use and it works! What better way to inspire your Facebook friends then by sharing the great books in your books library. Be a leader and start inspiring your friends on Facebook today and make a difference in their life.

Give ReadingList a try. Visit this URL:
http://apps.facebook.com/readinglist/

ReadingList in detail

The product is simple. Both from ease of use to functionality.

Fig 1 screen shot below illustrates how your Facebook Wall will look when you add / update a book in the ReadingList application. Now your friends can see the cool book you are reading along with whether you recommend it and your personal comments about this book – cool hey!

Fig1. Your book activity gets posted to your Facebook wall to inspire your friends

Fig 2 screen shot below is of the main page where you search for a book you are reading or have read. The search mechanism automatically looks up Amazon books repository and presents the findings in a horizontally scrollable pane. When you locate the book you want to add click “Select book” button beneath the book image.

Fig2. Find a book and share it with your Facebook friends

Fig 3 screen shot below is of the community page where you can see what your friends and other users of ReadingList application are reading. This is a great page to learn about other new cool and exciting books.

Fig3. See what the ReadingList community is reading

Give ReadingList a try. Visit this URL:
http://apps.facebook.com/readinglist/

Under the hood – for the tech savvy

Here’s a breakdown of the technology behind this Facebook Application ReadingList:

  • ReadingList was built on a LAMP stack – Linux (CentOS 5.5), Apache, MySQL 5 and PHP 5.2.
  • ReadingList runs through a powerful open source PHP web application Framework with a small footprint called CodeIgniter 1.7. (update: as of Feb 8, 2010 it is now upgraded to the better & faster 2.0)
  • On the front-end, latest version of jQuery is used to achieve UI behaviors.
  • The Software Architecture behind ReadingList is MVC (Model–View–Controller) with Active record pattern.
  • ReadingList also uses OAuth with Facebook Graph API and Amazon Web Services API.
  • Future performance (and fun) enhancements on the cards are Memcache, Apache Cassandra (NoSQL) and Facebook’s HipHop.

Toby Beresford did an informative presentation in London on CodeIgniter as a great framework for rapid application development. See it on Slideshare here.

If you have any ideas how I can further enhance this application especially around the product side please let me know in the “Discussions” area here: http://www.facebook.com/apps/application.php?id=102322113161984 or drop a comment below.

Cheers,
~ Ernest

Links mentioned in this post

Facebook Fan page – custom Tab development

Facebook has introduced a lot of changes in 2011 to how Facebook applications are being developed. I’m sure similar changes will be coming to the Fan Pages since they still use FBML instead of iFrame approach like in Facebook Apps.

Here is a a set of code snippets which have helped me with customizing my Fan Page (http://www.facebook.com/TheRoadtoSiliconValley/) and building my own Facebook App with “Page Tab” capability.

The following assumes you are the “administrator” of a Fan Page.

Welcome Tab using Static FBML

You don’t need to be a programmer to do this quick hack.

1. Install Static FBML: http://www.facebook.com/apps/application.php?id=4949752878
This application will add a box to your Page in which you can render HTML or FBML (Facebook Markup Language) for enhanced Page customization.

2. Check out the previous post on how to customize this page as a Welcome page with any content you require. This will give you an idea of the power this simple free app provides.

Show Content to Fans – Hide from Non-Fans

So you’ve added the Static FBML and now want to add some dynamic content based on whether the user is a fan or not. i.e. has hit the “Like” button or not. One place you can use this is to control incentives based on user behavior.

Code to achieve this

Click here to View FMBL Code

Put that code into your Static FBML container to test.

Note: You cannot be logged in as an admin for the Fan Page you’re adding this to, or you’ll see both the content for fans and for non-fans. Use a test account (or friends) which is not an admin of this Fan Page.

Get Facebook UserID on Fan Page

There may be time when you developed your own Fan Page “Tab” and want to retrieve the User’s FacebookID. By default you can only retrieve the Fan Page ID.

There is a nice write-up here how to retrieve the users FacebookID using Facebook Ajax call: http://forum.developers.facebook.net/viewtopic.php?pid=296303

To make this piece of code work, replace this:

var url = “YOUR_CALLBACK_URL/tab.php?ajax=1”;
ajax.post(url);

With:

var queryParams = { “ajax” : 1 };
ajax.post(‘YOUR_CALLBACK_URL/tab.php’, queryParams);

The code is modified to pass the URL variables as array parameters.

Have you got any cool Facebook snippets to help with new Facebook implementations in 2011? Share below.

~ Ernest

Facebook’s Open Graph Protocol (OGP) – why it matters

So Facebook’s Open Graph Protocol (OGP) was held at Facebook HQ (Headquarters) on the 23rd of August 2010. 164  people attended that afternoon event. A very healthy turnout with alot of interesting people from all sorts of industries working on many exciting projects thirsty to find out how to integrate with Facebook.

What is OGP and what does it do for you?

Open Graph Protocol (OGP) is a light-weight version of Semantic Web and it is implemented using RDFa. The OGP enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook Pages. Based on the structured data you provide via the Open Graph protocol, your pages show up richly across Facebook: in user profiles, within search results and in News Feed.

Let’s OGP enable my website – step by step guide

To turn any web page into graph objects, we need to add basic metadata to a page.

Let’s take a look at my photography website (http://ernestsemerda.com/bands.foto) and how I implemented the Facebook Like button with Facebook’s Open Graph Protocol (OGP).

1. I added the following 7 “must have” metadata properties into my page (bands.foto). If you want to know the detail on each metadata the see this site http://opengraphprotocol.org/. There are only 4 required properties (the 1st four) but the others are a must in my opinion in order to provide more detail to Facebook about your page.

<!-- Facebook Open Graph -->
<meta property="og:title" content="Band Photography" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://ernestsemerda.com/bands.foto" />
<meta property="og:image" content="http://ernestsemerda.com/images/ernestsemerda_logo.png" />
<!-- recommended -->
<meta property="og:description" content="Band photographer based in San Francisco, Sydney & New York" />
<meta property="og:site_name" content="Ernest Semerda Photography" />
<!-- admin -->
<meta property="fb:admins" content="ernestsemerda" />

It’s important that fb:admin is added (last property) since without it you will not be able to administer your page’s Object Graph in Facebook.

2. Next generate the Facebook Like button using Facebook’s own tool located here: http://developers.facebook.com/docs/reference/plugins/like

3. Copy the iframe html code Facebook generates based on the properties you opted for and paste it into your web page where you want the Like button to appear.

General rules of the Like button:

  • Make it easy for users to Like things on your site. Place the Like button close to the object they are liking.
  • When publishing, use only the ‘voice’ of the object. For example, if users are liking an actor in a TV show, that actor should publish stories about themselves, not general information on the show, or the TV network.

4. Check your final work using Facebook’s URL Linter. Thanks Paul Tarjanto from Facebook for creating this cool tool. So enter the URL of the page you pasted the Like button and hit Lint (submit). Linter uses the same code that is used for the Like button and other Open Graph Protocol consumptions. Therefore, it gives you the closest possible match as to how your page will be treated when it’s crawled in production.
http://developers.facebook.com/tools/lint/

5. Congratulations, your done! Click on the Like button to test it out.

Why is this important?

Once your page is Liked, it will become an object in the Facebook graph where users can establish connections to the page as they do with Facebook Pages. Based on the structured data provided via the Open Graph protocol, the pages can show up richly across Facebook: in user profiles, within search results and in News Feed. For example, since I’m using og:type=website, clicking on Like will make my band photography page appear under your “Info” tab in the “Likes and interests” section. Give it a shot.

As the admin (me in this case) will have access to a Facebook Page like section for my web page hosting the Like button. As shown below. This provides insights (statistics) on Active Users, Likes, Views, Feedback and allows me to “market” my web page across Facebook. A double win!

Facebook Page like Insights (statistics) on Active Users, Likes, Views, Feedback etc.

Gold nugget from this meetup

Mike Messenger on meetup.com posted a true gold nugget:

“Facebook may begin pulling RSS data from pages with like buttons in order to deliver updates about these pages automatically to those who have liked then. This is HUGE! – Facebook now accepts Non-Official OG:types and will consider making official any og:type which reaches critical velocity.”

Totally agree with Mike. It’s better to be ready then come to the party late. Which is why this blog and my personal development blog already carry Facebook’s Open Graph Protocol Like buttons. Here’s to Semantic Web, better search engine results & web exposure for marketers.

Slides from the presentation

The slides from this Facebook presentation are now available for download here:
http://www.scribd.com/doc/36376091/Open-Graph-Protocol-at-the-Silicon-Valley-Semantic-Technology-Meetup

If you want more information about Facebook’s Open Graph Protocol (OGP) go here:
http://opengraphprotocol.org/

Are you OGP connected?

If you are already using (or just installed) Facebook’s Open Graph Protocol (OGP) please share it here with the rest of the online community. Would love to see the various ways this great feature is being used. Happy Facebooking and here’s to Semantic Web!

Ernest