Energy House Digital - london, uk, designers, design, website, site, north london, creative web agency, clerkenwell

[Note: This is not a technical post, I will just be giving you some background information about facebook apps. For technical hints, please see my next post. ]

How many facebook widgets do you see during your daily web browsing?
Maybe too many!

Badges, I Like buttons, Facebook connect, Facebook apps (or applications)…
The web is overcrowded with these objects.

So, why do companies, developers and normal people create or add them to their website?

Because, by doing so, they can make their projects social. They can quickly and easily share their products or ideas with a huge amount of people. If the project or the idea is good, it will be seen by their friends, and then by friends of friends, and then friends of friends of friends… get it?

A good example? Farmville!
A company created the flash game Farmville, a funny and interesting game, and just added it to facebook as a facebook app. Then someone started to use and share it, and then some friends and then friends of friends… and now everyone of us knows at least 10 friends playing farmville…though no-one likes to admit playing J.

But I don’t want to speak about Farmville too much (I don’t like flash games at all). I want to show you how easy it could be to create your own facebook app, and share it with the world!

0. What can we do?

Basically we can use (almost) all the new web features like Flash, Javascript, (X)HTML(5), PHP/Perl/Python to share what-we-do or, for a company, what-we-sell.

>From the facebook side:
– We can access information: We can use almost all the information an individual user is sharing.
For example, his/her name, his/her friendships, his/her pictures/albums/videos. We can also combine this with their friends’ information.
– We can post information: We can post messages on the user’s wall, or a picture or a video in his albums. Messages are customizable, so we can add the name of the app, or of the company, of our websites, and we can add thumbs and links too.

1. The Idea!

Finding a good idea is not easy… but it shouldn’t be difficult either. The idea could come from brainstorming with friends or collegues, it could come as a sudden ‘Eureka’ moment during the day, or maybe you have seen other similar apps that you think could be made better.
The application could be useful, funny, important, stupid, nice. There is only one rule: People have to like it!
(Yes, I mean clicking the button too!)

Here’s an example?
A crossword puzzle with the names of your friends!
A company can create this game and, when the user wins, it could give him a discount for some products or just publish on his wall the score/time to complete the game, with the name of the application and custom text to promote the facebook app and company.

Hey… thats a pretty good idea… please don’t steal it! :p

2. Let’s start our first Facebook App

The first step is to go to https://developers.facebook.com/apps and after allowing this application you will see an empty board with the “+ create new app button“. Click it.
Now it’s time to choose a name and some basic information and after few steps you have your board with the main settings.

3. The Facebook App in Your Web Space

Basically Facebook gives you the option of creating your app in your own web space. You can then insert it on the social platform within a window (iframe) with a proper facebook.com url like:
http://apps.facebook.com/my-crossword-app and your window url, or the place where your facebook app lives, is something like:

http://mywebsite.com/path-to-my-app

So if a user accesses the first url, they will see the facebook layout with the main content being an iframe with your app.

4. Writing the app

Now it’s time to build your application!
Don’t worry: no technical stuff, not now. But if you want to use users’ facebook data you have to choose an SDK (http://developers.facebook.com/docs/sdks/)
For desktop users side, let’s choose PHP or Javascript SDK.
What’s the difference?
PHP is server side, so you need to reload the page (or call an ajax file) to ask for facebook data. I love PHP but if you want an asynchronous application (in real time, without reloading the page) choose Javascript SDK.
>From http://developers.facebook.com/docs/sdks/ you can access both SDKs APIs.

The documentation is poor for both of them, sometimes over complicated and sometimes incomplete. That’s why you should follow this blog and I’ll show you how easy it can be to make your next project a social facebook app.

Next week: Writing you first Facebook App.

Article posted on Friday, July, 15th, 2011 at 10:57 am

Tags: app, application, facebook, social media

Have your say!