Sunday, May 04, 2008

Make a feature rich Facebook app in 10 mins with absolutely no coding



Facebook apps can be quite troublesome to build. Even if you want just a bare minimum app that just displays simple photos, you need to learn a framework, write lines of code in PHP/Python/Ruby/..
Here let me show you how to build a fully hosted app within 10 minutes. And with absolutely no coding involved. This technology is provided by Dapper. They have this really cool service that lets you build dapps (dapper xml applications) from any RSS or live web feeds.

I built my first facebook app - Cricket Updates using dapper's facebook app maker. It started off as an test app but a lot of people still use it. I hope to update it soon since I have a lot of time now.

Now let's get going, shall we. For the tutorial, we'll be making an F1 updates app, that will give the users, access to latest constructor standings, race news, pics and results. Each of these will be separate dapps which will be integrated into our facebook app.


1. Get yourself a dapper account by registering at their website.

2.Click on "Create new app" to create your first dapp. Dapp Factory page will load.

3. My first dapp will contain the latest F1 headlines. Click on the "In an existing RSS feed" tab and enter the address of rss feed. Select dapp xml and click next.



4. Select the items in the feed you wish to keep and click on next.


5. Now save your app.


6. Congrats, your first app is created. Let's create another dapp, this time a little more complex. Go to dapp-factory again.

7. Enter the url of the image gallery found on the F1 website and click next.



8. Now dapp will start collecting pages. You can add similar pages and click on "add to basket". Dapper will look at the page structure and deduce different items in the page. I am just adding one page here.



9. Next page, dapper will ask you to select the items in the page. Click on an image, and dapper will automatically collect all the images.


10. Click on save field and save it as "pics". Repeat the process if you wish to collect other fields like text and stuff. Once you have collected all the items, go to the next step.

11. In this page, you can group items together in groups. I have just pics so just group them as pics or just go to next step.



12. Now save the dapp and preview it.



13. I think that should be enough. Let's make our facebook app. Go to Facebook app maker. Add the created dapps into it and click "next step".



14. Give a nice banner, profile footer image etc. and move on.



15. In the configure dapps section, select the items in each dapp which you wish to display. Once you are happy with the selection, go to the next step.



16. We are almost done. In this page dapper explains how to get an api key from facebook and integrate your newly create facebook app with dapper. Follow the steps with care. Remember to add a "/" at the end of your call-back url and also select that option that allows users to add it to their profile page.





17. Once you are done, click on save. Dapper will do the rest. Once it has set up, it will ask you to install it on your profile.



18. Enjoy and share your newly created facebook app.



Using this method, you could create dapps for point standings, latest race etc. Just edit the facebook app from your dapper profile page and add more dapps to it. It's that easy. Do note that rss feeds don't get updated and reflected back that fast; hence, there will be a updation delay in your facebook app. You are also restricted to content that dapper currently supports. So no flash games, streaming music and stuff. But still Dapps are really powerful. You can pipe in outputs of one dapp into other and so on. Dapper website provides nice screencasts for all these features. Rss feeds can be manipulated using yahoo pipes to create even more useful and customized feeds. A yahoo pipes tutorial will be covered later in future.

If you liked this article, do support Dapper. They are an amazing service and hope they continue on this really cool work.

Post a Comment