Self Debugging

Facebook Profile Migration - How I did it

As I went throught converting my application, Blog Networks, to the new profile design, I document the steps I went through hoping to help others who’re going through the same process. In this post I’ll cover the essential changes that you need to do, and in a futuer post I’ll describe how to utilize some of the new features the new profile brings.

 

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

Facebook Change-athon Event

Time for a new developer meetup. Just 3 days after f8, Sudha and I are organizing a Facebook Profile Change-athon to get developers together and help each other migrate our apps to the new Facebook APIs. It’s also to catch up and discuss the announcements from f8 if you miss it.

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: Incubator on steroids

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.

Announcing OnSingularity.com

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/ .

Reddit Tracker: a must-have for serious redditers

What is this Reddit Tracker?
It’s a bookmarklet I wrote to highlight new comments on Reddit. When I visit a comment thread a second time, it highlights the new comments that were added since my last visit.

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).

How does it work?
1. On the comments thread page, click the “Reddit Tracker” button. You’ll get the little message below telling you that this thread is now being tracked.

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.

YC News Tracker: A better way to read comments

If you’re like me, and you read YC News often, then you probably have as much a hard time as I do trying to figure out which comments are new. You see, comments are not listed in order; they move up and down depending on how many votes they get. So beyond a few comments, it’s not easy to find the newly added ones.

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.

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.

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

Only 9.6% of YC News Readers Use IE!!

There were a few heated discussions about Vista on Hacker News yesterday that got me wondering: What operating systems do people in this community use? How about browsers?

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.

List of Selected Startup Ads

I’m still finalizing my preparations to launch my new startup project. Unfortunately, I had to push the launch date by 3 days to Friday 9/28 because I realized that, even if I skip sleep completely, there is no way I can finish by Tuesday. If you’ve ever been involved in a software project, I’m sure you’ll understand.

In my previous post I offered free ad space to early stage startups on my new startup home page. Most of the ad submissions I received were professional and the startups, themselves, were very good. Here is the list of companies I selected:

• Adpinion
• BandsInTown
• ClutterMe
• Devshop
• FanPop
• Group-o-matic
• Micropledge
• Ongopongo
• TallStreet

You’ll probably notice that there is only 9 in the list. One of the applicants didn’t send the ad as promised, so now there is one empty spot available if I receive a submission by Wednesday. Otherwise, I’ll use the space for one of my own other projects.

Adpinion is an odd one in the list. They’re actually an ad serving company. Originally, I thought I’d use their code to serve the other ads, but then realized that it might not be doable yet. So, instead, I’m using their code to serve whatever ads they send me, and I’m not planning on taking the proceeds that come from it. They have a nice way to let people vote on the ads they see. It’ll be interesting to see how that works. And, I’m yet to arrange with them how to get the $40 of free advertising they offered to the other companies.

Free Ad Space for Your Startup

Update: The ad space is now fully booked, and I notified the 10 selected companies. Thanks everyone.

So I’m about to release a beta version of my new startup project and I’m planning a marketing campaign to get the word out [can’t tell you much about it yet, and if you’re one of the few friends I’ve demoed it to, please don’t reveal it until Tuesday]. And since I learned from previous lessons and made sure that my new web site is very simple, now I have some empty space on my home page that I want to fill rather than leaving a big empty spot. So I thought I’d give out free ad space to fellow entrepreneurs who could use the free marketing. I’m doing this to help new startups, like mine, get some needed visibility. So, here is what you get:

1. A totally free, no-strings-attached, ad spot. I want to help; I’m not looking for anything in return.

2. The ads will be on the home page. And they’ll be rotated with other ads.

3. Each ad is 125×125 pixels; GIF, JPG, or PNG. Animated gifs are okay as long as they’re not too flashy.

4. I’ll keep the ads for about 2 to 3 weeks. Although I reserve the right to remove any ad earlier for any reason.

5. I’ll accept up to 10 ads max.

And this is how I plan to choose what to display:

1. I intend this to help new startups, so my preference will be for early stage startups. Especially those with no marketing budgets. If you’re still not released, that’s okay; as long as the link points to a demo of some sort, or at least a page with a screen cast or screen shots.

2. Preference will be for ads I receive first; but I will skip ads that don’t look professional, don’t match the above criteria, link to pages that are ugly or lame, compete with my own startup, or any other reason that make it inappropriate for me to put that ad.

I’m planning to announce my beta release on Tuesday, the 25th, and hope to have it covered by as many bloggers and media as possible. Of course I can’t guarantee that anyone would cover it, but if they do, you’ll hopefully get some exposure as well.

So, if you’re interested, send your images to: waleed-at-ninua-dot-com by Sunday 9/23, along with the target URL and the image alternate text. I’ll email those who are accepted on Monday. Best of luck.

Update: I just received a generous offer from Adpinion (a YC company). If your ad is selected then, in addition to the 2-to-3 week period your ad will show on my web site, you’ll also get a $40 worth of free advertising on Adpinion’s network at large. I think this is a great opportunity to get publicity for free. Don’t delay.

Online Bookmarking Survey Results

As you know, it helps a lot to know what others think of a project you’re working on. So I set out to talk to people and gather feedback and opinions about existing online bookmarking tools since I’m building one. I focused on two groups of users: the average Web users, and the Web 2.0 crowd.

To get feedback from the average users, I asked my family, friends, and anyone who’d listen. The responses were, pretty much, like: online book… what? Nobody has even heard of the term. Of course, I expected something like that, but to actually see it and hear it brought the point home. I think it’s important to keep reminding ourselves that there is life outside the Web 2.0 bubble. And that’s where most people live.

To get feedback from the technical users group, I used a technical solution: I created a form using Wufoo’s free service, and then asked for help from the readers of Y-Combinator Startup News, which is frequented by highly technical people. I received a lot of comments, and 27 people filled my simple survey form (thanks, everyone). Here is a compilation of the data I managed to collect. Of course, this is a small sample, but we can still learn a lot from it:

Do you use an online bookmarking tool?

Out of the 27 answers to my survey, 66% of users indicated that they used an online bookmarking tool. This is not surprising given that the group consists of technical users who follow the latest Web trends.

66%	Yes
19%	I used to, but not anymore
4%	I tried, but didn’t like it
11%	Never

What tools?

I didn’t ask specifically what each participant used, but I collected a rough estimate from the comments:

40%	Delicious
20%	Google Bookmarks
20%	Browser Bookmarks & auto-complete
20%	Google Search

Not a scientific study, by any means, but it’s clear that del.icio.us is still the leader in this group. The interesting thing to notice here is that, even among technical users, many liked Google’s bookmarking tool even though it didn’t provide many of the features assumed, by many, to be critical to the success of any new Web site such as RSS feeds, tag clouds, social interactions, and aggregation of users data. People who liked it did so because it was simple and fast.

Any Requests or Complaints?

There were many requests for new features or fixes to existing ones. The top 4 that were echoed by many users are:

1. Make it fast: This was, by far, the most common complaint about online bookmarking tools.

2. A better way to organize information: Specifically, a hierarchical way was mentioned a few times. It seems that tags alone are not enough, or not the best option, for many users.

3. Synchronization between browsers. Users who preferred to use the browser bookmarks still wanted a way to have them synchronized across all the computers they use.

4. Tags are lame: Obviously not everyone likes tags. As mentioned in point 2 above, some users preferred a hierarchical approach (folders?), and others complained that it’s too hard to manage hundreds of tags.

Other Comments?
I also received some comments questioning the wisdom of building another online bookmarking tool:

New online bookmarking is a HUGE waste of time unless you have something VERY valuable to add. But I don’t think it doesn’t already exists.

Don’t waste your time, there is nothing wrong with the browsers inbuilt capability, how about doing something more productive.

I do agree that it’s a crowded market, and had I been just about to start now, I might’ve chosen something else; who knows. Maybe a Facebook App!!! But I’m close to a beta release, so I’m going to go ahead and finish it. Plus, I do believe that I’m building something different.

So, what did I learn from this exercise?

• Most people have no idea what online bookmarking is. So there is a huge market opportunity for the first one who creates a bookmarking product that the average users like. Of course, this is easier said than done because of the next point.
• The browser bookmarks, auto complete, and Google search are good enough for most users. So if you’re creating something new, it’ll have to be compelling and exciting. Or, target users who need more than the basics.
• Make it fast. Really fast. This is the most common complaint I heard about existing online bookmarking tools.
• Tags, feeds, and social aspects are good features to have, but they’re not essential for success. If your product doesn’t need them, don’t add them just because everyone else does.