Skip to main content

How to write a FaceBook Application in 10 minutes June 18


Writing F8 apps is where it’s at right now. Everybody knows it. The userbase is huge and now we have a (free) API to. Everything is good….but the documentation.
I
As far as I can tell, Facebook allows you to create applications that appear to the user in 2 different areas.
1 - The profile. This the ‘main user page’ as far as Facebook is concerned. Here is where your main summary details are displayed and your comments wall. It would be great to have your widget displayed here, but the big limitation is that applications that use javascript are not allowed here (You must use FMBL, the facebook version of HTML). Too bad for me. What we can do is display a small ad to take the user to the Canvas page.
2 - The ‘Canvas page’. This is an entire page that your application gets to use (you can have multiple pages if you want). On these pages you can choose to display content from another website through an iframe, so that is what we’re going to do.
Ok, thats it for the overview. Start your clocks and lets get cracking.

1. Create your demo page. (2 minutes)
This is the page that the user will see on their canvas page. If you already have a page that you want to use, great. If not, then just copy this code for a guessing game.


<script type=text/javascript>
var iRandom;
function Restart()
{
iRandom = Math.floor(Math.random()*10)+1;
alert('OK, I am thinking of a number between 1 and 10');
}
function Guess()
{
var yourGuess = document.getElementById('myGuess').value;
if (yourGuess>iRandom)
alert('Too High.');
if (yourGuess<iRandom)
alert('Too Low.');
if (yourGuess==iRandom)
{
alert('Well done! You guessed it.');
Restart();
}
}
</script>
<div>Enter your guess between 1 and 10: <input type=text id='myGuess' name='myGuess'>
<input type='button' onClick='Guess()' value='Guess'>
<br>
<br>
<input type='button' onClick='Restart()' value='Start Again'>
<script type=text/javascript>
Restart();
</script>

It’s not going to win any awards, but it gets the job done. Save the file somewhere on your website as ‘guess.htm’. Mine is saved at http://gathadams.com/guess.htm
Ok, now log into Facebook.
2. Install the Developer Application. (1 minute)
http://developers.facebook.com/get_started.php
This allows you to create applications.

3. Create the Application. (30 seconds)
Click the ‘create application’ link
4. Fill in the Application details. (6 minutes)
There are heaps of fields you can enter, I am just going over the ones you need to get this demo working.

Application Name: Any name you want. I used ‘Guessing Game’.
Terms of Service checkbox: Check it.
Click ‘Optional Fields’.
Callback Url: This should be the root directory that your ‘guess.htm’ page is found at. You must also add a ‘/’ at the end. I used ‘http://gathadams.com/’.
Canvas Page URL: This is the most confusing part, and wasted me heaps of time. What they want you to enter is basically a directory name for your applcaition. The name must be 7 characters or more, and must be unique from other Facebook applications. I used ‘guessab’ (so you can’t). When you add ‘http://apps.facebook.com/’ to the front you have the Canvas page URL.
NOTE: If you use upper case in the Canvas Page URL, it will be converted to lower case automatically. Also, case is important, so if you use upper case in your links later on THEY WON’T WORK.
Tick ‘Use iframe’: This means that your canvas pages will use an iframe.


Application Type: Leave it at ‘website’.


Can your application be added on Facebook?: Tick ‘Yes’.


Application Description: I used ‘Cool guessing game’. If you disagree, feel free to use your own description.


Default FMBL: We will fill this out last, so leave it for the moment.


Default Profile Box Column: Tick ‘Narrow’.


Side Nav URL:OK, here is where we put a link in the side nav to the canvas page.
The full canvas page has the format:


http://apps.facebook.com/< value entered in Canvas Page URL>/


So for me, the full canvas page URL is:
http://apps.facebook.com/guessab/guess.htm


Facebook maps ‘http://apps.facebook.com/guessV1/’ to your Callback URL, so what is loaded in the iframe is:


guess.htm
or
http://gathadams.com/guess.htm


Note: Notice there is no ‘/’ inserted in guess.htm, that is why you have to put it in your Callback URL.
Anyway, now we can go back to


Default FMBL: This is the text that will go on the user’s profile. Lets just put another link to our game on the Canvas page. I entered:

Lets play a <a href=’http://apps.facebook.com/guessab/guess.htm’>Guessing Game</a>



5. Add the application (30 seconds)
From within ‘My Applications’, click on ‘View About Page’ for your new application. Then click ‘Add Application’, and confirm this.

6. Done! (Lets play)
Click on the link in either the left nav panel or the main profile panel and knock yourself out.

If you liked this post please help spread the word by joining the HackingFreaks Fan Page on Facebook.

Comments

Popular posts from this blog

Valentine's week

Celebrate your Valentine's week with  Your Valentine 7 Feb Rose Day 8 Feb Propose Day 9 Feb Chocolate Day 10 Feb Teddy Day 11 Feb Promise Day 12 Feb Kiss Day 13 Feb Hug Day 14 Feb VALENTINE'S DAY 15 Feb Slap Day 16 Feb Kick Day 17 Feb Perfume Day 18 Feb Flirting Day 19 Feb Confession Day I want to confess dear sweetheart!! (*-*) 21 Feb Break Up

Free download XSS SHELL v0.3.8

XSS SHELL v0.3.8 WHAT IS XSS SHELL ? XSS Shell is powerful a XSS backdoor and zombie manager. This concept first presented by "XSS-Proxy - http://xss-proxy.sourceforge.net/  ". Normally in XSS attacks attacker has one shot, in XSS Shell you can interactively send requests and get responses from victim. you can backdoor the page.  You can steal basic auth, you can bypass IP restrictions in administration panels, you can DDoS some systems with a permanent XSS vulnerability etc. Attack possibilities are limited with ideas. Basically this tool demonstrates that you can do more with XSS. FEATURES XSS Shell has several features to gain whole access over victim. Also you can simply add your own commands.  Most of the features can enable or disabled from configuration or can be tweaked from source code. Features; - Regenerating Pages - This is one of the key and advanced features of XSS Shell. XSS Shell re-renders the infected page and keep user in virtual environment...

Portable World Cup Cricket 20-20

Portable World Cup Cricket 20-20 [maroon[Portable World Cup Cricket 20-20 v1.0English | Extract to Play | 57 MBWorld Cup Cricket 20-20 is a fabulous 3D cricket game for the PC. Players can choose from amongst their favorite teams, their favorite players, and most popular stadiums. The game offers several game modes - some standard and some new - combined with fabulous gameplay, outstanding graphics and full voice commentary. World Cup Cricket 20-20 strives to truly simulate the ultimate 20-20 cricketing experience! Players can partake in tournaments and watch as their team wins the ultimate trophy, increase team and player rankings, and build up their career innings! http://hotfile.com/dl/77645970/a f1f4aa/phar_masud_worl-cri-20-por.rar.ht ml OR http://www.fileserve.com/file/UABhxg d