Make a Facebook app in 30 minutes with Dapper

There is a school of thought which says that if you want to create a Facebook app you need years of coding experience. Not so. Because, although the really fancy dynamic apps do require a lot of PHP knowledge, it is possible to make your own Facebook apps without any scripting whatsoever. In fact, you can put together a simple, yet functional app in around half an hour, thanks to Dapper’s Facebook AppMaker. Dapper is a data mapping application that lets you extract and reuse content from a web site in another format. It creates feeds which can be exported to XML, RSS, Google Maps, widgets and more. You can then transform these feeds into Facebook applications with the AppMaker. Here’s how it’s done:

1. Start by signing up for a Dapper account on the site’s home page, then click on the ‘Create a new Dapp’ link. Here we need to choose the content we want to include in our Facebook app. You’ll need to enter the URL of the site you want to draw content from (in this case Flixster) and hit ‘Next step’.

Step one

2. A preview of the site will appear in the main window. From here you need to choose a variable (e.g. search field, radio button, drop-down menu selection, etc.). In this case it’s the search field. Enter a search and click ‘Add to basket’. This directs Dapper to the content that it needs to load when a search is produced. Enter a couple more search terms and add the search results pages to the basket. Once you’re done, click ‘Next step’.

Step two

3. On the ‘Select Content’ page you’ll need to define the specific content elements you want to show up in your Facebook app. You do this by simply clicking on a particular element (in this case the film’s name, year of release, rating and poster) and clicking the ‘Save Field’ button, giving each one a name. In the ‘Preview selected content’ menu you’ll probably need to eliminate some erroneous fields using the ‘Clear’ buttons. Click ‘Next Step’ to proceed.

Step three

4. The next step is to group each of the fields together so that your app knows which elements need to be displayed for each content entry (in this case, each movie). Do this by checking the boxes next to all the fields in the ‘Content Fields’ section and hitting ‘Save Group’. Give your group a name and hit ‘Next Step’. Now give your Dapp a title and save it.

Step four

5. A preview of your saved Dapp will now be shown. Here you can change its format, create a Flash widget from it, set the input type, and even create an RSS feed from the content you selected. We’ll leave all that for now and return to the Dapper homepage with our new Dapp safely stored.

Step five

6. From the main page in Dapper click the ‘Facebook AppMaker’ link. Click the ‘Start’ button then type in the name of the Dapp you just created and press ‘Next Step’. Here you’ll see a preview of how your app will look. You can customize the app by adding links to a logo, header image, background image and footer image. You can also enter a description of your application to explain to users what it’s about. Click ‘Next Step’ when you’re done.

Step six

7. The next page lets you define which fields you want to display, set various user interaction options, and view a Profile Page preview. Once you’re done here, click ‘Next Step’.

Step seven

8. Now it’s time to put your application into Facebook. Visit Facebook’s Developers page and click ‘Set up new application’ (you’ll need to have a Facebook account already). Here you’ll need to enter all of the information about your application and point it to where it’s hosted on Dapper. Luckliy, the Dapper page explains exactly what information you need to enter and where.

Step eight

9. After successfully submitting your application to Facebook, you’ll be given the API key and secret. Enter this information, along with the URL of your Canvas Page in Facebook, into the relevant fields in Dapper. Now click ‘Save’.

Step nine

10. You’ll now be given the option to launch your application in Facebook, from where you can test out the app and make sure it works. You can return to Dapper and edit your app via the ‘My account and apps’ section. Just click on the ‘Edit’ button next to the name of your app and you’ll return to step 6. Once you’re happy with your creation, share it with your  friends and enjoy your new-found Facebook fame!

Step 10

 

Loading comments