I know I promised you that we’d get into some code in the next part in this series, but the article is coming out much longer than I anticipated, as I expect it to be one of the most thorough articles out there regarding Facebook application design. Part two of this series will walk through designing a real-life Facebook application – one I wrote specifically for this article series.

[box type=”warning”]This post was written in 2008. The Facebook API has changed dramatically over the past several years, and some or all of the technical information in this article may no longer apply. FBML and FBJS have been deprecated for quite some time now. I’m keeping the article for historical purposes, and because there is still some useful insight with respect to how to approach virality, social sharing and application design, however it should largely be considered out-of-date and less useful than more recently authored articles.[/box]

The first article discussed what features and screens you have available to you in Facebook apps in general – and in this article, we’re going to go through the process of actually planning a real one. You’ll see some pitfalls and hopefully learn to think about your applications in a new, more complete way, harnessing all of the aspects of Facebook’s platform.

Although we won’t be delving into code in this article either, I strongly encourage you to read this article (and the previous article, if you haven’t yet) for your own sanity’s sake. For all the frustrations that come with writing Facebook applications, I can say from experience that at least 75% of my frustration was a direct result of devoting enough time towards the planning phase of each specific application. Plus, the application we spec out in this article is going to be the base that we use in the next part – the one where we actually do start touching code. That article is about 60% written, but breaking it up makes far more sense, since you SHOULD be planning your applications before you start touching code anyway. I promise you, getting this part right will save you days, if not weeks, of re-writing code and fixing issues. I’ve done it. It sucks.

Determine the Social Action Points Before You Start Development

One thing I have learned with regard to Facebook application development is that its very easy to rush into development and inadvertently miss some key integration and social action points.  It’s easy to do, since they are not “visible” as you’re developing the app. When the user interacts with your application, you may forget to consider all of the potential notifications that can be triggered, because you can’t physically see them. Out of site, out of mind means that you’re throwing them in haphazardly after the app is built, or worse yet, not using them at all.

“Invisible” (but very important) things to consider are:

  • Newsfeeds – when a user directly interacts with your application, you can post that action to the user’s newsfeed.
  • Email notifications – if a user has permitted your application to send them email, you can send plain text or (limited) HTML emails to notify them of action items

Newsfeeds are an absolutely critical part of your Facebook application, so spending a little time planning what actions a user can take on each screen of your app is a great start. The actions the user takes that are entered as newsfeed items are prominently visible on the user’s profile page, and will be visible to their friends on the Facebook “home” page that shows recent actions friends have taken.

Sample newsfeed appllication items

Sample newsfeed application items

The main goals of your newsfeed items should be to highlight worthy user actions – the benefit of this will be that the user’s friends see these newsfeed items and may be interested in checking out your application.

Emails are important, but since your users must opt-in to receive them, you may not reach as many people with them. Still, its important to plan them out the same way you plan newsfeeds.

As we go through the sample application, we’ll figure out where newsfeed items would be appropriate. Each application is allowed x number of newsfeed posts per user per day, so you want to choose them wisely and make sure they are truly relevant and not spammy. Each application’s cap is different, and that number changes based on the way people interact with it, but applications start off with around 20 max newsfeed posts per user per day. (This can make testing a bitch, which is another reason its important to get them into the application early in development.)

Also bear in mind that Facebook’s newsfeeds MUST be triggered by an action the app user has taken. You cannot have your application send newsfeed entries without the user clicking on something or interacting in some way. The format must be “<user> has done xyz”, so the newsfeed reflects on the action that specific user took.

Three Sizes of Newsfeeds

Facebook allows you to create three versions of a newsfeed item – a headline, a short story and a fullsize story. Headlines are the default view, so they should be well-crafted. If a user likes the headline, they can click to see the short story or fullsize, but your headline version has to be great to make them click.

Our Sample Application

Because no application should be started without a game plan, we need a plan for what the sample application we’re discussing here will do. For the sake of this tutorial, our application will behave similarly to the “poke” feature of Facebook, only we’ll be blowing kisses. (I realize this is a cheesy idea for an application, but it will keep it simple, and will allow us to demonstrate actions that can only be invoked when a user takes action on another user.) You can see this app live in action here.

In the Planning Your Facebook Application article, we discussed planning out each of the boxes that will be available to you in the application. So for this application, we’re going to plan for this:

  1. Application canvas page – listing of recent incoming and outgoing kisses for the viewing application user
  2. Profile box – display of recent received kisses for the profile owner, with action item for viewer to send the profile owner a kiss
  3. Boxes tab: Wide -  listing of recent incoming and outgoing kisses for the profile owner user, tailored for non-application users, since Facebook users other than the profile owner can see this page
  4. Boxes tab: Narrow – Smaller version of the wide display, for users who opt to use the narrow box column
  5. Fan page – Although I opted not to create a fan page view of this app in the real app, for the sake of argument we could include a list of most recent back-and-forth kiss activity, or a leaderboard of the most active kissers – with an action item inviting users to start blowing kisses. Remember that not everyone viewing the fan page that your app gets added to will have added the application, so the view should be tailored towards viewers who are not application users. Since it will be on a fan page, and could get decent exposure depending on the popularity of the page to which it’s added, you’ll want to make sure this view encourages sharing and competition to compel new people to add it.
  6. Application tab – same display as the canvas page

I encourage you to actually draw these screens and boxes out on paper, or in your favorite graphics program. It won’t take long, and will be a huge help in thinking through the interface and making sure you’re writing the app in a way that will make sense to the user. The mockups (often called wireframes) don’t have to be complicated or pretty, but they should roughly represent all of the key interface elements in position and placement.

Our application is very simple, so we only have two main screens: the homepage that will display the incoming and outgoing kisses, and the page that allows the user to pick from a list of their friends and blow kisses to them. A more complicated application could require a dozen or more screens, with each screen representing a page of functionality within the app.

Canvas page (displays recent kisses, sent and received)

Homepage mockup

Homepage mockup

Send kisses page

Blow kisses page

Blow kisses page

As we’re creating these wireframes, it becomes easier to figure out where newsfeeds and app-generated emails will be most useful.

One the canvas page, the page listing incoming and outgoing smooches, the user isn’t taking any direct action, so there is no direct newsfeed trigger for newsfeeds or emails. The blow kisses page is a good place for both.

When the user blows someone (or several someones) a kiss, it should trigger a newsfeed item: “<user> has blown <recipient> a kiss!” Because of the rule that the user has to directly trigger the newsfeed item, it would NOT be permitted to also add a newsfeed item into the recipient’s newsfeed such as “<recipient> has received a kiss from <user>”. You could trigger that second newsfeed item when the user picks up their kiss though, since the user (in this case, the recipient) took direct action with the application. This may seem like nuance, but its important to understand the difference in order to remain compliant with Facebook’s terms of service.

The recipient should then receive an email notification letting them know someone has blown them a kiss. If the user has not yet allowed the application and agreed to let the application send them emails, they will not receve this notification, however, so its not a form of communication you should rely on.

Another Example

As I have mentioned, this application is extremely simple. It was designed to be simple to keep the coding part (coming soon, I swear) simple – but it doesn’t give us the opportunity to really demonstrate places where newsfeeds will serve you best in your application.

Another application I wrote (which is a work in progress) might be a better example. The WoW Toons application, which is a simple application that allows users to display their World of Warcraft characters on their profile, has a few more potential interaction points.

Canvas Page: Displays the user’s current WoW characters (also known as ‘toons’) with level, race, class, etc. It also contains the functionality for the user to force an update to their character, so if they have gained a level, the app will reach out to the WoW database and fetch new data. It then compares the newly fetched character level with the one stored in the database, and if the new level is higher, it updates the database AND triggers a newsfeed item: “<user> has reached level <level> on <pronoun> <race> <class> – Ding!”

When a user adds a new character to their profile, a newsfeed item gets inserted: “<user> has added their level <level> <race> <class> to their Warcraft Toons profile”

Newsfeeds also allow you to add an action item link (although its small and arguably not that noticeable.) For the Blow Kisses app, a “Blow <user> a Kiss Now” link with a link to the WoW app would be appropriate. For the WoW Toons app, something like “Add your own Warcraft toons now” link makes sense.

WoW Toons canvas page

WoW Toons canvas page

The WoW database also provides data on specific gear (armor, weapons, pvp stats, etc), and although I don’t currently track that data (might tho), when a user refreshes their gear, it would be appropriate to add a newsfeed item for new weapons, stats, etc. “<user> has reached 1045 pvp kills”.

Your Friends Toons Page: In the WoW Toons application, you can see a listing of the toons for your friends who have added the app.

Friends page

Friends page

One possible feature that could be added would be to show the “last updated” date on this page, and allow users to “nudge” their friends if the friend in question hasn’t updated their characters recently. “<user> has nudged <recipient> to update <pronoun> Warcraft toon.”

In the Mr. Right application mentioned in the first article, we wanted to use newsfeeds to show the gifts that Mr. Right (a fictional boyfriend avatar) has sent the user. Because it is not allowed to automatically generate newsfeed items that a user has not triggered, we had to change the app to let the user click on a button labeled “Send me a Gift”. Since the user took direct action by clicking the button, we were able to insert a newsfeed item: “<user> has received a <gift name> from Mr. Right.” The action text was then “Get your own Mr. Right now”, linking to the application.

Mr. Right gift newsfeed

Mr. Right gift newsfeed

The above is an example of the short story newsfeed format. “Alison received a puppy from Mr. Right” is the headline, and then the short story body contain the image and additional text.

Conclusion

I’m sure I sound like a broken record by now, encouraging you to take the extra time to create wireframes and plan out every part of your application before you start coding. I promise you that it will be worth it in the end – you will end up with a better application that users will find easier to use and that more effectively uses the social parts of the social networking platform. I have personally cut corners and skipped this part too often – its so tempting. “Oh, I know what its supposed to do. Its a simple application.” And it never, ever is as simple as it first seemed.

Coding comes next, so be sure to subscribe to our RSS feed to make sure you don’t miss the next part in this series, where we walk through creating a simple Facebook application based on the dicussion in this article.

ssd-virtual-servers-banner-468x60

Advertisement

468x60_makemoney
Previous post

No, No - Let Me Google That For You

Next post

Warcraft Security Better Than Banking Security?

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • Dan

    Great articles! Finally making sense of it all…

    I do have a question on the actual process. I have my own site providing a GUI already. My goal was to simply have certain actions from my site push content to the user’s linked Facebook profile.

    The old process went like this:
    1. Add application
    2. Post-install page to have users log onto my site so that I could link their Facebook account to my site’s account
    3. Have certain actions from my site push narrow/wide content to their profile using their Facebook data.

    With the new Facebook, how does such a thing relate/work now?

  • Dan

    Great articles! Finally making sense of it all…

    I do have a question on the actual process. I have my own site providing a GUI already. My goal was to simply have certain actions from my site push content to the user’s linked Facebook profile.

    The old process went like this:
    1. Add application
    2. Post-install page to have users log onto my site so that I could link their Facebook account to my site’s account
    3. Have certain actions from my site push narrow/wide content to their profile using their Facebook data.

    With the new Facebook, how does such a thing relate/work now?

  • Hi there Dan,

    It sounds like you need to use Facebook Connect, which (fortunately for you) was just made available to the world this week. (It was in BETA for a while, available only to hand-picked projects.)

    Facebook Connect does *exactly* what it sounds like you want to to. You’ll be able to link user profiles and the user’s friends list on your own site,a and you’ll be able to publish user actions on your site to the user’s Facebook profile newsfeed (very key.)

    Fortunately for you, they already have a demo site and code available.

    http://wiki.developers.facebook.com/index.php/Facebook_Connect
    http://wiki.developers.facebook.com/index.php/Trying_Out_Facebook_Connect

    FB’s simple demo site is here:
    http://www.somethingtoputhere.com/therunaround/

    Sounds like you might actually need two things:

    Facebook connect for the site integration, and a simple Facebook app to hold the generated content in the user’s profile.

    So basically, all of the stuff that happens on your site would be powered by Facebook connect. User A does Thing B. Your site stores User A’s facebook ID and Thing B. The database that stores User A and Thing B also feeds content to the small Facebook application that displays Thing B on User A’s profile.

    I know it sounds confusing – did that make sense?

  • Hi there Dan,

    It sounds like you need to use Facebook Connect, which (fortunately for you) was just made available to the world this week. (It was in BETA for a while, available only to hand-picked projects.)

    Facebook Connect does *exactly* what it sounds like you want to to. You’ll be able to link user profiles and the user’s friends list on your own site,a and you’ll be able to publish user actions on your site to the user’s Facebook profile newsfeed (very key.)

    Fortunately for you, they already have a demo site and code available.

    http://wiki.developers.facebook.com/index.php/Facebook_Connect
    http://wiki.developers.facebook.com/index.php/Trying_Out_Facebook_Connect

    FB’s simple demo site is here:
    http://www.somethingtoputhere.com/therunaround/

    Sounds like you might actually need two things:

    Facebook connect for the site integration, and a simple Facebook app to hold the generated content in the user’s profile.

    So basically, all of the stuff that happens on your site would be powered by Facebook connect. User A does Thing B. Your site stores User A’s facebook ID and Thing B. The database that stores User A and Thing B also feeds content to the small Facebook application that displays Thing B on User A’s profile.

    I know it sounds confusing – did that make sense?

  • Come to think if it, you could probably do what you’re trying to do without Facebook connect, but its a clunkier process. We do it for a bank credit card site we work on, and it was clumsy. (we did this before Facebook Connect was available.)

    You would basically need to hook into the API to get an auth token from your site, then pass the auth token to the facebook login, where Facebook validates that its the same auth token they just gave you on your own site. The user then logs in/allows the app via Facebook and gets returned to your site, where you have access to their Facebook ID.

    There were issues with implementing it this way. Getting the logout to “stick” without forcing them to logout of Facebook altogether (not sure how that’s handled via Facebook connect) and some of the additional features were not available. I’d advise going the Facebook Connect route and then building a little display app, as you’ll be able to hook into the continuing advancements and features in Facebook Connect as it evolves, rather than using a more limited, hackish way to authenticate your user.

  • Come to think if it, you could probably do what you’re trying to do without Facebook connect, but its a clunkier process. We do it for a bank credit card site we work on, and it was clumsy. (we did this before Facebook Connect was available.)

    You would basically need to hook into the API to get an auth token from your site, then pass the auth token to the facebook login, where Facebook validates that its the same auth token they just gave you on your own site. The user then logs in/allows the app via Facebook and gets returned to your site, where you have access to their Facebook ID.

    There were issues with implementing it this way. Getting the logout to “stick” without forcing them to logout of Facebook altogether (not sure how that’s handled via Facebook connect) and some of the additional features were not available. I’d advise going the Facebook Connect route and then building a little display app, as you’ll be able to hook into the continuing advancements and features in Facebook Connect as it evolves, rather than using a more limited, hackish way to authenticate your user.

  • Dan

    I guess I could check into that as well.

    I was thinking of using the “Post-Authorize Redirect URL” to redirect them to my site like I did in the past.

    Then, from the vars that get passed, continue the linking process on my site. Once there, they input the credentials for my site, I find their account and ask if they want to link the information they see on screen. Done?

    Then, I could use my REST client to fire off commands to set FBML on the various sections of their profiles or feeds?

    My canvas page, if they have approved me, would simply show data similar to what they have in their profile?

  • Dan

    I guess I could check into that as well.

    I was thinking of using the “Post-Authorize Redirect URL” to redirect them to my site like I did in the past.

    Then, from the vars that get passed, continue the linking process on my site. Once there, they input the credentials for my site, I find their account and ask if they want to link the information they see on screen. Done?

    Then, I could use my REST client to fire off commands to set FBML on the various sections of their profiles or feeds?

    My canvas page, if they have approved me, would simply show data similar to what they have in their profile?

  • Ahh, gotcha – I misunderstood. I thought you wanted to use Facebook *instead* of a separate login system, not as a way to link the two together. You could probably actually offer both if you wanted – there are pros and cons to each.

    One interesting blog post I just read was related to how FB Connect will add more legitimacy to community and blog posts, since the user’s identity is more “real”:

    http://www.insidefacebook.com/2008/12/10/facebook-connect-making-blog-comments-more-authentic/

    But if you’re not hot to try out FB Connect, your suggested method using Post-Authorize URL will likely be the best way to handle it, and that is how sits like iLike and other FB app + standalone services have been doing it.

    Would you be allowing people who found you through Facebook to register using only their FB info as well? For example, people who know your service or found it through your website will be able to easily link their Facebook profile to their account, but what about users coming from the other direction? Is your system set up (or will it be) to handle your site’s credentials OR Facebook credentials, or does everyone need to have creds for your site?

  • Ahh, gotcha – I misunderstood. I thought you wanted to use Facebook *instead* of a separate login system, not as a way to link the two together. You could probably actually offer both if you wanted – there are pros and cons to each.

    One interesting blog post I just read was related to how FB Connect will add more legitimacy to community and blog posts, since the user’s identity is more “real”:

    http://www.insidefacebook.com/2008/12/10/facebook-connect-making-blog-comments-more-authentic/

    But if you’re not hot to try out FB Connect, your suggested method using Post-Authorize URL will likely be the best way to handle it, and that is how sits like iLike and other FB app + standalone services have been doing it.

    Would you be allowing people who found you through Facebook to register using only their FB info as well? For example, people who know your service or found it through your website will be able to easily link their Facebook profile to their account, but what about users coming from the other direction? Is your system set up (or will it be) to handle your site’s credentials OR Facebook credentials, or does everyone need to have creds for your site?

  • Hamrosh

    Hello snipe, Love these articles … I am very very new to facebook app development, I want to use asp.net to develop them.. I was looking for resources , I came to this site. I really like them,Cleared the basicz for me , bt now I am struck with a simple app of getting friends list, thngs havent gone further than that. Cant find the right resources for development. when is your code part atricles coming Up ??

  • Hamrosh

    Hello snipe, Love these articles … I am very very new to facebook app development, I want to use asp.net to develop them.. I was looking for resources , I came to this site. I really like them,Cleared the basicz for me , bt now I am struck with a simple app of getting friends list, thngs havent gone further than that. Cant find the right resources for development. when is your code part atricles coming Up ??

  • Kwame

    Hi, thanks for these two very informative tutorials. I would love to see the next installment when you actually get into the code for the application, really looking forward to that.

  • Kwame

    Hi, thanks for these two very informative tutorials. I would love to see the next installment when you actually get into the code for the application, really looking forward to that.

  • Hi Hamrosh and Kwame, thanks for commenting 🙂 I hope to get around to a simple code sample within the next week (hopefully this weekend?)

    Hamrosh, I don’t use ASP/.NET, so I don’t know how much my code tutorial will help you, but you may want to check out:

    http://www.siccolo.com/articles.asp
    http://www.codeproject.com/KB/aspnet/Facebook_App_ASP_Csharp.aspx
    http://tinyurl.com/detk59

  • Hi Hamrosh and Kwame, thanks for commenting 🙂 I hope to get around to a simple code sample within the next week (hopefully this weekend?)

    Hamrosh, I don’t use ASP/.NET, so I don’t know how much my code tutorial will help you, but you may want to check out:

    http://www.siccolo.com/articles.asp
    http://www.codeproject.com/KB/aspnet/Facebook_App_ASP_Csharp.aspx
    http://tinyurl.com/detk59

  • Kwame

    Thanks for responding Snipe, glad to hear that you haven’t given up on writing the app 🙂

  • Kwame

    Thanks for responding Snipe, glad to hear that you haven’t given up on writing the app 🙂

  • I just recently discovered your site and appreciate you sharing your bout with facebook application development with the world.but this site also search best knowledge facebook application development.

  • I just recently discovered your site and appreciate you sharing your bout with facebook application development with the world.but this site also search best knowledge facebook application development.

  • Just wanted to offer up a big “thank you” for this series; I’m in the middle of writing my first Facebook App and seeing exactly what I’m up against has helped a lot.

    Rock on!

  • Just wanted to offer up a big “thank you” for this series; I’m in the middle of writing my first Facebook App and seeing exactly what I’m up against has helped a lot.

    Rock on!

  • Jessica Castiglione

    Hello. How exactly do I get started making my application for facebook? I want to make a simple avatar game similar to yoville and the sims. but I’m gonna make it as fun as possible.

  • Jessica Castiglione

    Hello. How exactly do I get started making my application for facebook? I want to make a simple avatar game similar to yoville and the sims. but I’m gonna make it as fun as possible.

  • Hi Jessica – just follow the directions Facebook provides: http://developers.facebook.com/get_started.php

  • Hi Jessica – just follow the directions Facebook provides: http://developers.facebook.com/get_started.php

  • Jessica Castiglione

    Is it possible for me to make an app without downloading anything?

  • Jessica Castiglione

    Is it possible for me to make an app without downloading anything?

  • The only thing you have to download (and then upload to your server) is the Facebook library of the language you’re using – but you do need that.

  • The only thing you have to download (and then upload to your server) is the Facebook library of the language you’re using – but you do need that.

  • Jessica Castiglione

    sorry to ask you so many questions, but I only have very few more. Also thanks for helping me out and being paitent with me.

    1.) will that download slow my computer down? (normally downloads slow my computer down)

    2.) Do I have to sign up for anything to create this app or can I make it through facebook?

    3.) How exactly do I get to the application creator?

  • Jessica Castiglione

    sorry to ask you so many questions, but I only have very few more. Also thanks for helping me out and being paitent with me.

    1.) will that download slow my computer down? (normally downloads slow my computer down)

    2.) Do I have to sign up for anything to create this app or can I make it through facebook?

    3.) How exactly do I get to the application creator?

  • The download is very small – its just a zipped file of the library scripts.

    I’m not sure I understand your other two questions – there isn’t an application creator. You create the application using whatever scripting language you’re using – PHP, ASP, etc. You host the script files on your own web server.

  • The download is very small – its just a zipped file of the library scripts.

    I’m not sure I understand your other two questions – there isn’t an application creator. You create the application using whatever scripting language you’re using – PHP, ASP, etc. You host the script files on your own web server.

  • Facebook User

    just discovered your site today and I’m loving it already.Question.. did i miss the coding for the facebook project?

  • just discovered your site today and I’m loving it already.Question.. did i miss the coding for the facebook project?

  • @FB user – no, she never got around to doing one. A lot of the features of FB have changed since she wrote this.

  • @FB user – no, she never got around to doing one. A lot of the features of FB have changed since she wrote this.

  • Hi, these articles have really been of a great help for developing my applicatio on facebook. I am very new to facebook, I have a fan page and an application on facebook. I want to know if I can add a BECOME A FAN button on my facebook application which would allow users to become fans of both application and my fan page. Any help is appreciated.

  • Hi, these articles have really been of a great help for developing my applicatio on facebook. I am very new to facebook, I have a fan page and an application on facebook. I want to know if I can add a BECOME A FAN button on my facebook application which would allow users to become fans of both application and my fan page. Any help is appreciated.