Self Debugging
The greatest of faults is to be conscious of none — Thomas Carlyle
A Super Simple Facebook App
Last night I was invited to do a quick presentation at the Facebook meetup at AOL on how to start building Facebook applications. I generally prefer the hands-on approach, so rather than talking about the concepts, I chose to write a simple app on stage to show how easy it is to get started on Facebook development. I chose to build a gifting app because it’s simple enough that it can be done in an hour, and it covers the basic concepts of Facebook development including invites. Things went well, and we had a functional app running live on Facebook by the end of the hour. If you want to try, it’s called Hello Halloween.
Many in the audience wanted a copy of the source code, so I’m releasing it here under the if-something-goes-wrong-I-have-nothing-to-do-with-it license. Feel free to use and change it in any shape or form you like, commercial or non-commercial. So, without further ado, here is the code, and then more details below:
<?
require_once 'facebook/facebook.php';
$API_KEY = "???api_key";
$SECRET_KEY = "???secret_key";
$CODE_ROOT = "??? path to your server. e.g.: http://mydomain.com/halloween/";
$fb = new Facebook($API_KEY, $SECRET_KEY);
$uid = $fb->require_login();
$conn = mysql_connect('???mysql_host', '???mysql_user', '???mysql_password');
mysql_select_db('???mysql_database', $conn);
mysql_query("INSERT Users(uid) VALUES($uid);", $conn);
?>
<style>
.giftbox img { width:80px; height:80px; }
.giftbox {
float:left;
margin:10px 20px;
border:1px solid #f0f0f0;
width: 130px;
height: 100px;
}
.menu {font-size:1.1em;margin-bottom:30px;font-weight:bold;}
.page {width:640px;margin-left:30px;}
</style>
<div class="page">
<div class="menu">
<a href="/hellohalloween/">Home</a>
| <a href="/hellohalloween/?receivedgifts">Received Gifts</a>
| <a href="/hellohalloween/?sentgifts">Sent Gifts</a><br/>
</div>
<? if (isset($_REQUEST['receivedgifts'])): ?>
<h1>You Received These Gifts:</h1>
<table style="border-collapse:collapse;" border="1" bordercolor="#c0c0c0" cellpadding="20">
<tr>
<th>From</th>
<th>Gift</th>
<th>Date</th>
</tr>
<? $q = mysql_query("SELECT * FROM Gifts WHERE receiver = $uid"); ?>
<? while ($row = mysql_fetch_assoc($q)): ?>
<tr>
<td><fb:profile-pic uid="<?=$row['sender']?>" /></td>
<td><img src="<?=$CODE_ROOT?>images/gift0000<?=$row['gift']?>.jpg" /></td>
<td><?=$row['time_sent']?></td>
</tr>
<? endwhile; ?>
</table>
<? elseif (isset($_REQUEST['sentgifts'])): ?>
<h1>You Sent These Gifts:</h1>
<table style="border-collapse:collapse;" border="1" bordercolor="#c0c0c0" cellpadding="20">
<tr>
<th>To</th>
<th>Gift</th>
<th>Date</th>
</tr>
<? $q = mysql_query("SELECT * FROM Gifts WHERE sender = $uid"); ?>
<? while ($row = mysql_fetch_assoc($q)): ?>
<tr>
<td><fb:profile-pic uid="<?=$row['receiver']?>" /></td>
<td><img src="<?=$CODE_ROOT?>images/gift0000<?=$row['gift']?>.jpg" /></td>
<td><?=$row['time_sent']?></td>
</tr>
<? endwhile; ?>
</table>
<? else: ?>
<? if (isset($_REQUEST['gift'])): ?>
<?
$giftId = (int)$_REQUEST['gift'];
$ids = $_REQUEST['ids'];
foreach ($ids as $id) {
mysql_query("INSERT Gifts(sender, receiver, gift) VALUES($uid, $id, $giftId);", $conn);
}
?>
<div style="padding:5px;font-size:2em;border:1px solid #F8F0E8;background-color:#FFFEe8;">Awesome. Your gifts are on their way. Why not send some more?</div>
<? endif; ?>
<fb:request-form
action="index.php"
method="POST"
invite="false"
type="Hello Halloween"
content="I sent you a scary halloween gift.<fb:req-choice url='http://apps.facebook.com/hellohalloween/?receivedgifts' label='Accept Gift'"
>
<h1 style="margin-left:20px;">1. Select a gift</h1>
<div class="giftbox">
<input name="gift" type="radio" value="1" checked />
<img src="<?=$CODE_ROOT?>images/gift00001.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="2" />
<img src="<?=$CODE_ROOT?>images/gift00002.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="3" />
<img src="<?=$CODE_ROOT?>images/gift00003.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="4" />
<img src="<?=$CODE_ROOT?>images/gift00004.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="5" />
<img src="<?=$CODE_ROOT?>images/gift00005.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="6" />
<img src="<?=$CODE_ROOT?>images/gift00006.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="7" />
<img src="<?=$CODE_ROOT?>images/gift00007.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="8" />
<img src="<?=$CODE_ROOT?>images/gift00008.jpg"><br/>
</div>
<div class="giftbox">
<input name="gift" type="radio" value="9" />
<img src="<?=$CODE_ROOT?>images/gift00009.jpg"><br/>
</div>
<div style="clear:both"/>
<fb:multi-friend-selector showborder="false" actiontext="2. Select friends to send it to">
</fb:request-form>
<? endif; ?>
</div>
To run this you’ll need a host that can run PHP, and you need a mysql database with two tables:
Users: a table to store the list of your app users. Add two columns here:
- uid : a BIGINT to store the user id
- time_added: (optional, but useful) a TIMESTAMP with the default value CURRENT_TIMESTAMP
Gifts: a table to store who sent what to whom.
- sender: BIGINT for the sender id
- receiver: BIGINT for the receiver id
- gift: TINYINT for the integer value representing the gift (1, 2, 3, …etc)
- time_sent: a TIMESTAMP with the default value CURRENT_TIMESTAMP.
And, you’ll also need to search through the source code for the 3 question marks (???) and replace every instance with the appropriate value for your app (database name, id, password, api key, …etc).
You’ll also need to download the PHP client library from Facebook and put it in a folder called facebook under your app root. Get the library here.
And, finally, you’ll need to get your own gift images and put them in the “images” folder under your app folder. Name your gifts in the form “gift00001.jpg”, “gift00002.jpg”, …etc. And, make sure the images are square in dimensions so they don’t look funny when scaled in the app.
That’s about it. Enjoy.
2 Responses to “A Super Simple Facebook App”
Leave a Reply
 |
My name is Waleed Abdulla. I'm an entrepreneur and software engineer. Working on my new Internet startup and enjoying the long hours in Redwood City, CA. You can reach me at: waleed at ninua dot com
My Projects
Networking tool around blogs on facebook.
Emerging technologies news.
Forums and social news for micro-communities.
Ziizo.com
Online bookmarking and productivity tool for private bookmarking and note taking.
XRules
An XML business rules language I wrote (Open Source)
I keep getting an error -
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in
One several lines …. do you know why ?
Thanks.
well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch