At the last meetup on Wednesday Ryan Barrett from the App Engine team talked about recent updates and ideas they’re thinking about. The most interesting for me was the idea of a local library that allows me to run a script locally to access my data on the Data Store through a REST API. That would make it easier to do things like making global updates to the data store or pulling everything to a local database for advanced reporting. Not that it can’t be done today, but a library from Google would standardize that and open the door for developers to write scripts that can work with any app engine application with little or no changes.

The main presentation was about SproutCore, a JavaScript framework that feels a lot like Ruby on Rails. It supports an MVC model, data bindings, automatic packing of JS files, and a big library of UI components. My view is that it has a great potential, especially with the continuing trend of pushing more functionality to the client side. But it’s still in it’s early days, and some developers, myself included, might have reservations about the lack of support for IE 6 in the current offering. But definitely something to keep an eye on.

Van Riper, the SV-GTUG Lead, was also kind enough to let me do a lightning talk bout some of the work that my startup is doing on the App Engine, especially BitPixels, a website thumbnail service, that we’re using to serve about 5 million thumbnails a month. We store all the thumbnails in the data store and serve them off of Google’s infrastructure, which is working great for us.

Pictures from the meetup here.

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.

This is a demo I wrote for the Facebook Meetup on Sept. 29th. Unfortunately I didn’t get the chance to show it, so I’m posting it here for anyone interested in seeing a sample use of Facebook Connect on a blog.

The demo is a widget you add to your blog to allow your readers to become fans. It stores the data on the Facebook datastore, and therefore doesn’t require a database on your server. It consists of a simple HTML/Javascript widget to put on your blog, and a few php files to put on your server to handle communication with the Facebook APIs.

Here I’ll explain how I did this so you can try it yourself.

1. First, I created a Facebook Application called “SelfDebugging”, and I set the callback URL to the root of my blog: http://www.selfdebugging.com . I didn’t change any other setting.

2. I uploaded the xd_receiver.htm file to the root of my blog. For more information about this check out Trying out Facebook Connect on the developers wiki.

3. I uploaded the Facebook php client libraries to my blog URL in a folder named “facebook” right under the root. You can get the latest version of the libraries from here.

So far everything is just standard code for any Facebook Connect application. The next steps will be the custom code.

4. I created a fans.php file on the root of my blog. Here is the source code:


<?php
include_once 'facebook/facebook.php';

foreach ($result as $fan){
echo '<fb:profile-pic uid="' . $fan[2] . '" size="thumb" facebook-logo="true">‘;
}
}
}
?>


5. I created a text widget in Wordpress (the one you see on the right side) and put this code in:


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Facebook Connect Demo</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
<script type=”text/javascript”>

<script type=”text/javascript”>
getFans();
</script>
</body>
</html>


1. Get the new Facebook client library

First, download the latest version of the PHP client library and overwrite the old one. Get the latest version here:

http://svn.facebook.com/svnroot/platform/clients/php/branches/redesign-changes/

2. Which version of the APIs to use?

During the transition period some users will be on the old profile and some on the new. However, the new client library points all API calls to the new URL, api.new.facebook.com. While this works, it has the side effect of switching your users to the new profile the moment they hit any of your pages that require the user to login because it’ll forward them to a www.new url to log in. I didn’t feel comfortable making my users feel that my application was responsible for changing their Facebook experience. I also wanted to utilize the fact that adding the profile box and the email opt-in are selected by default.

So, instead, I decide to let users on the old profile use the old APIs and users on the new profile use the new APIs. If you want an easier migration path, then skip this step. Otherwise, edit your facebook.php file as follows:



Change this:

  public static function get_facebook_url($subdomain=’www’) {
    return ‘http://’ . $subdomain . ‘.new.facebook.com’;
  }

To This:

  public static function get_facebook_url($subdomain=’www’) {
    global $NEWPROFILE;

    if ($NEWPROFILE)
        return ‘http://’ . $subdomain . ‘.new.facebook.com’;
    else
        return ‘http://’ . $subdomain . ‘.facebook.com’;
  }

3. Which profile are your users on?

If you chose to support both the old and new APIs in the previous step, then you’ll need to know on which profile a user is. Add this little code to a file that you include in every one of your PHP pages. A config file is a good place, or you can add it to the top of the facebook client library (facebook.php):

// New or old profile?
$NEWFACEBOOK = false;
if ($_REQUEST["fb_sig_in_new_facebook"] == "1"){
    // User is on the new profile.
    $NEWFACEBOOK = true;
}

 4. Switching from require_add to require_login

The new Facebook client library doesn’t have the require_add() and require_install() methods, so if you use any of these your code will break. If you chose to support only the new APIs in step 2 above, then simply change all calls to the above two methods to require_login().

However, if you choose to have users on the old profile continue to "add" your app rather than authorizing it, then add the following code to your facebook.php file, and you don’t need to change anything in your application code:

  // Used in the transition perdiod to accomodate both
 // old profile and the new one.
  public function require_install() {
    return $this->require_add();
  }

  // Used in the transition perdiod to accomodate both
  // users on the old profile and the new one.
  public function require_add() {
    global $NEWFACEBOOK;
    if ($NEWFACEBOOK) {
        return $this->require_login();
    }
     
      if ($user = $this->get_loggedin_user()) {
      if ($this->fb_params[’added’]) {
        return $user;
      }
    }
    $this->redirect($this->get_ add_url(self::current_url()));
  }

 

5. No post-add page

With the new profile, Facebook will no longer call your post-add page. On the old profile, Facebook redirects new users to this page after they add an app. Many developers, myself included, use the post-add page to do any initialization required for the new user, such as adding their user id to the database.

So, now that the postadd page is gone, you need to use a different approach. The solution I used is to include code in canvas pages that tests if the user who’s currently viewing the page is in my database, and if not, I add them and do any required initialization. This adds a little overhead to your pages, so you might want to do it only on a few strategically selected pages that you know users will have to pass by as they interact with your app.

Another thing I noticed recently, but never got the chance to try, is the Post-Authorize Redirect URL. This seems to replace the post-add page, so you might want to try it before updating your application.

6. No post-remove page, either

Since the concept of adding and removing an app no longer applies, then it’s clear why Facebook won’t call this page anymore.

7. Allow users to add a profile box

Read this first:
http://wiki.developers.facebook.com/index.php/New_Design_Narrow_Boxes


With the new profile you can use new FBML tags to display a button that allows users to add your box to their profiles. Here is a sample code that you can add in your canvas pages to do this.

<fb:if-section-not-added section=’profile’>
    Add a box on your profile:
    <fb:add-section-button section=’profile’ />
</fb:if-section-not-added>

8. Allow users to opt-in to receive emails

 This one is easy, here is an example:

<fb:prompt-permission perms="email">
    Opt-in to receive emails from us
</fb:prompt-permission>

If the user has already granted that permission, this tag will render nothing.

9. The new Profile Boxes

Read this first:
http://wiki.developers.facebook.com/index.php/New_Design_Narrow_Boxes

If you’re not interested in allowing users to add your profile box to their Wall tab, then you can skip this step. You’re profile box will continue to show in the Boxes tab as usual. However, if you want to give the user the option to put your box on their main tab, then do the following change:

In your code where you update the user profile, change this:

    $facebook->api_client->profile_setFBML($markup, $uid);

To this:

    $profile_main = "put FBML markup for new box here";
    $facebook->api_client->profile_setFBML($markup,
        $uid, null, null, null, $profile_main);

Notice that we added new markup for the narrow box that shows on the main profile tab. This new box is limited to a max height of 250px, so you’ll probably need a different markup than what you use in the default profile box. Also, note that the profile_main markup should not have the fb:wide and fb:narrow tags.

10. Bonus Tips: The ‘jsonwrapper’ include

The new library includes the file jsonwrapper.php, which is for backward compatibility. If you’re using PHP 5.2, then you don’t need this and can save a few CPU cycles. Remove this line from facebookapi_php5_restlib.php

     include_once ‘jsonwrapper/jsonwrapper.php’;

This should cover the critical changes you need to make. However, if you like to utilize the new features that the new profile brings, then you need to read more about application tabs, info sections, the publisher API, and more. I’ll cover some of those in the next post as I implement them.

Useful URLs:

• Access your app on the new profile:
  http://apps.new.facebook.com/yourappname/
• Remove app authorizations for testing purposes
  
  http://www.facebook.com/privacy/?view=platform

References:

• New Design Platform Changes
  http://wiki.developers.facebook.com/index.php/New_Design_Platform_Changes

• New Design Integration Guide
  http://wiki.developers.facebook.com/index.php/New_Design_Integration_Guide

This is a full day event, 9am - 9pm, on Saturday July 26 and is divided into two parts:

1. The first part at 9:00am is for developers (bring your laptop) and will consist of coding sessions and a technical presentation about the migration path and new features.

2. The second part at 6:30 pm is for both, developers and non-developers and will include a presentation about the new Facebook features and a panel discussion about the new business opportunities coming along.

See the schedule here (subject to change): http://blog.weekendapps.com/schedule-activities/

We’ll announce the location in the next couple of days (either San Francisco or the South Bay). If you’re interested, join the Facebook event.

WeekendApps is a new experiment in entrepreneurship that 4 friends and I are organizing on February 22-24. It can be described as a weekend incubator, the mission of which is to launch as many startups in a short period of time as possible. We’re targeting Facebook applications because they’re easy to build and launch in one weekend and they have great potential. We’ll have Chris Field from Orrick on site to help with legal aspects and incorporation, an impressive list of speakers, a core team of designers and marketing experts, and we’re giving out $2000+ worth of software for the lucky winners, courtesy of Adobe Developer Connection. All this, you get for free if you sign up before 2/18. And, we’re also planning an ad-exchange program among applications to give everyone a free way to promote their apps.

The plan is simple: Start on Friday, release on Saturday, and go viral on Sunday.

Presentations:

• Facebook Platform and Applications, by Dave Morin from Facebook.
• Incorporating your startup, and other legal details, by Chris field from Orrick.
• Going from Zero to 1 Million Page Views in One Month, by Siqi Chen (App: Friends for Sale).
• How I reached 5M installs, Nicolas Kokkalis (App: Who’s your perfect match)
• Promoting and Monetizing Facebook Apps, by KW Low (App: My Heros Abilities).
• Flex on Facebook: Flex Apps on FB Platform, by Alex Notov, founder Shockapps, and editor at Startupism.

Panels:

• Micropayments in Facebook: as a revenue source and to simplify personal transactions.

Gifts and Giveaways

• One copy of Adobe Creative Suite bundle to the lucky winner from the Designer s Team. Your choice of Web Premium, Design Premium or Production Premium (retail price $999).
• 2 Copies of Adobe Flex Builder 3 Pro (retail $699 when it launches) to the lucky winners. Gifts from Adobe.
• Free dinner, courtesy of our sponsors.

So, why WeekendApps?

Back in November, I attended an event that really highlighted for me what Silicon Valley is all about. Especially for someone who’s new to the bay area. That event was Startup Weekend, a weekend-long gathering of entrepreneurs, developers, graphics designers, …etc. to start and launch a startup in one weekend. We released a product, got TechCrunced, and most importantly, it was a great way to make new friends, experience the most intense team work environment ever, and simply have a lot of fun.

Then, there was a class at Stanford in which students built and released Facebook applications that reached over 15 million users. I attended their showcase and was blown away by the level of success they achieved in such a short time.

So I got together with friends that I met at Startup Weekend and we decided to create something new that takes the best of both worlds. And that’s how WeekendApps was born. If you’re an entrepreneurs, I encourage you to check it out. I promise, you’ll be glad you did. And, remember, the free ticket are available until 2/18 only.

Our event page on Facebook here, and you can get tickets here.

I’m happy to announce the public launch of my latest project, On Singularity: a social news and discussion site for the futurist community. I’ve been interested in the subject for many years now; and I passionately seek and read the latest news about discoveries in science, technology, AI, bio-technology and similar areas regularly. So when I started building Zooov to create social news services targeted to niche fields, I immediately thought about building a news portal for the Singularity community. I know that had there been such a Web site already, I would’ve been a regular contributor to it for sure. The reason I’m so excited about this is that for years I’ve been scanning through the science sections of many news sites to find the few stories that interest me; and this project has the potential to make the process so much easier. See, not all science news are the same. For example, a news article about discovering new species of fish is very different from an article about discovering a new gene that regulates cell growth in mice. Most science news sites will put both articles in the biology section; but for someone interested in discoveries that affect the future, like me, the two articles are very different: the first is not so interesting to me, but the second is; because it highlights progress in understanding uncontrollable growth in cells which usually causes cancer and shows that we’re a tiny step closer to finding a cure, which, in turn, would greatly enhance the lives of millions and extend our lifespans considerably. You might not see things as I do; but if you’re like me, then you’re probably as exited about this web site as I am. Check it out at: http://onsingularity.com/ .

Why?
Because it’s hard to follow comment threads on Reddit. You see, they’re not listed in order. They move up and down based on votes. So, when there is a lot of comments, it’s hard to tell which ones are new.

Do I need to install anything?
No. It’s doesn’t require installation. It’s just a simple Javascript bookmarklet that you add to your browser. And I’m providing the source code as well, if you’re interested.

How do I add it to my browser?
If you use Firefox, just drag the link below to your browser’s bookmarks toolbar (IE users see below).

2. The next time you visit the page, click “Reddit Tracker” again and it’ll highlight the new comments in bold. See image below (click for full size image).

3. If there are no new comments, it tells you so.

If you’re wondering what that little blue link is. It’s a link to the Break Time community on my new startup ZoooV.com. Yes, I’m evil :). If it bothers you too much, you can easily remove it; you have the code. But, it’s barely visible.

How about IE Users?
IE users, I’m sorry. It’s too much code to fit within IE’s bookmarklet limit. However, if you really want an IE version, leave a comment below and if I find enough interest I’ll create a simplified version for IE and email you when it’s ready. It might not have all the features of the Firefox version, but it should do.

Where is the Source Code?
Click here to get the source code. Feel free to change it or build on it. And, although you don’t have to, I would be so very grateful if you keep my little ‘break time’ link there. You can add your own link if you like. And, if you do build a better version based on my code, let me know so I can link to you from here.

Final thoughts
I wrote this after I built a similar tool for YC News. So, if you hang out there as well, grab the YC News Tracker. And, while we’re at it, you might also want to check this Firefox plugin written by my friend, Kartik. Although it requires installation, it’s a more powerful tool for highlighting changes on any Web page, including Reddit. It’s really cool.

So, I came up with a simple solution. It’s entirely in JavaScript, doesn’t install anything, and doesn’t depend on a server. It’s a bookmarklet that highlights new comments that were added to a thread since the last time you visited. I’ve been using it for a while, and I’m much happier; so I’m sharing it with you. And I’m also offering the fully-commented source code below for those interested.

Here is how it works:

1. On the comments thread page, click the “YC Tracker” button. You’ll get the little message below telling you that this thread is now going to be tracked.

2. The next time you visit the page, click “YC Tracker” again and it’ll highlight the new comments in bold. See below (click for full size image).

3. If there are no new comments, it’ll tell you so.

If you’re wondering what that little blue link is. It’s a link to the Break Time community on my new startup, ZoooV.com. Yes, I’m evil :). If it bothers you too much, you can easily remove it; you have the code. But, it’s barely visible.

If you use Firefox, then simply drag the link below to your bookmarks toolbar.

And, for coders out there, click here to get the source code. Feel free to change it or build on it. And, although you don’t have to, I would be so very grateful if you keep my little ‘break time’ link there. You can add your own link if you like. And, if you do build a better version based on my code, let me know so I can link to you from here.

Update: I just posted a similar tool for Reddit. It’s, creatively, called: Reddit Tracker. I’ve never been good with names.

Update 2: AKKARTIK just built a GreaseMoneky plug-in based on this and in the process made it so much better by adding a list of tracked threads. Thank you so much, akkartik. I’m really loving it now. So, if you have GreaseMonkey, get the new plug-in from this link. And, if you don’t, and you read YC News often, go get it. It’s worth it.

http://akkartik.name/newsyc-comment-tracker3.user.js

As it happened, I had just posted an announcement about my new startup a few days ago and I had Google Analytics installed, so I managed to collect a fair amount of information. Here is what I found most interesting:

1. Internet Explorer accounted for a mere 9.6% of all browsers. And, yes, that includes both IE6 and IE7 combined.

Sure, I did expect more Firefox users than IE given the high-tech nature of the community, but this was unexpected. Only 9.6%!! And, sure enough, Firefox was #1 with 71%, followed by Safari with 11%. Below is a more detailed report. Click to see the larger image.

2. Windows still has the majority with 52.7%, but it’s so close to losing it.

Here I actually expected to see more Mac users because, seemingly, Apple news make up over 90% of all tech news. However, Macs came in second with 28.9% followed by Linux with 18%.

As for Windows itself, XP still accounts for 83.7% compared to 9.9% for Vista.

3. News.YC users came from 66 different countries.

And that’s more interesting when you consider the fact that it’s a niche Web site targeted to startup news, and mostly US startup news. The recent expansion of scope to include more technology news might explain this, though. But, not surprisingly, over 75% of the visitors came from the US, Canada, and the United Kingdom with 63.8%, 7.2%, and 5.6% respectively.