Majority report – Facebook is taking over the Internet

Facebook growth is amazing. Here are some statistics to illustrate that: over 800 million active users, over 50% of active users login daily, over 60 million status updates per day, users are uploading more than 250 million pictures per day, 350 million active users currently access Facebook through mobile devices, the average user spends more than 700 minutes using Facebook per month.
Facebook is innovating big time. This is good for users, of course; there are some privacy issues from time to time, but the majority of users don’t care so much about privacy or they are not savvy enough, so new features are rapidly embraced and used.
The latest and greatest Facebook features are the Timeline and the Open Graph. More than 2 million people became Facebook developers in order to try the Timeline before it went public. A lot of websites are using Facebook Like buttons. Often the number of fans on Facebook measures the success of a brand. The new Open Graph allows website owners to measure all kind of user activity. It’s a natural evolution of Likes and Facebook is hoping this will change the Internet. Chances are it will.
Open Graph creates opportunities to share more and more of users actions with their friends. This is also a great opportunity for organizations and brands, especially the frictionless sharing experience provided by Open Graph, allowing sharing without the click of a button. Facebook statistics will explode… again.
Open Graph allows organizations to reach an unprecedented amount of users from all over the world.
In a blog post presenting the early Open Graph results, Facebook says that “Media companies have long been early adopters of Facebook Platform tools, including the Like button, Facebook Login, Comments Box, and most recently, the Open Graph, to drive traffic to their sites, engage readers and attract new audiences... The early results from social news partners are encouraging, once again showing that news sites that focus on building social and personalized news experiences will see the most dramatic increases in traffic and engagement.”
All this will help popular stories become (much) more popular. Of course, some other niche information may be buried down as a consequence, but hey, it’s the same old story Google had with the search results, nothing new there.
Another drawback is that Facebook might have to face same challenges Google had: companies will write content for traffic and at some point we might see some news become popular not because the content is great but because it was carefully crafted SEO-like. We count on Facebook to do the same great job Google did with search results.
Facebook have great websites and applications, though as developers we were often frustrated by the APIs bugs, the lack of documentation or multi-environment support (we had to build separate Facebook applications for the development or staging environments). The good news is that is about to change also.
I attended the Facebook Open Graph Technology Day in New York on October 25th. Facebook informed us that they are working on supporting multiple environments for a single application. They launched the so called “operation developer love”, putting a lot of effort into making the developer’s life easier.
My team develops hundreds of Facebook applications every year, so of course we want our users and their friends to add these applications to their accounts. Obviously, Facebook want this also. Some are saying that sharing activity shouldn’t be passive and users should always consciously publish every action. Maybe, but then again, the majority of users don’t care so much. For them, Facebook platform benefits are much more important. Plus, Facebook started to take privacy very seriously and to make privacy settings easier to understand and manage.
The days when the higher number of fans was the only objective of campaigns are over. We will be able to isolate the most relevant content and the most engaged users, ultimately to improve the user experience.
So yes, Facebook is taking over the Internet. Is this bad news? I don’t think so if the result is a better user experience and easy access to relevant information.

Amazing Internet, Mobile and Social Media Statistics

Here are some interesting statistics about the internet, mobile and social media:

Internet

• The Linkscape Web Index indexes an incredible 39,821,634,471 (39.8 Billion) pages on the internet and they aren’t indexing near the number of Webpages that Google, Yahoo/Bing etc. are. There are still very many pages that aren’t being indexed so the true number of Websites and Webpages out there is much much bigger.
• Google estimates the internet at about 5 million terabytes of data, which is 5 billion gigabytes, or 5 trillion megabytes.
• The human brain could hold an estimated 1 to 10 terabytes. It would take about a million human brains to store the internet, or 1 billion DVDs or 200 million blu-rays.
• World average internet population is about 27%, North America is leading with more than 76%.
• In 2010 people watched more than 700 billion YouTube videos! That is 700,000,000,000. Over 35 hours of video are uploaded to YouTube every minute.
• As at September 2010, 3,000 images per minute were uploaded to Flickr and over 5 billion images had been uploaded.
• 247 billion emails are sent every day, 81% are spam though. 90 trillion emails were sent every year.
• Akismet spam comment filter has saved an incredible 20,892,632,758 spam comments from cluttering up Blogs (that’s about 30 million spam comments per day).

Social media

• People spend over 700 billion minutes per month on Facebook, there are over 600 million active users and half of these access Facebook EVERY DAY, 200 million active users access Facebook through mobile devices.
• There were 25 billion Tweets in 2010 and 100 million new registered accounts.
• The average Facebook user is connected to 80 community sites, blogs, etc.
• 30 million pieces of content are shared a month on Facebook and the average person creates 90 unique pieces of information.
• Mobile Facebook users are twice as active as those who access through computer alone.
• Since April 2010, 10,000 new sites integrate with Facebook everyday.
• 21% 0f tweeters follow 100 people or more.
• 16% of people on twitter have over 100 followers.
• 44% of tweeters provide a website URL.
• 89% of people use blogs and other social media to research the latest stories and gossip.
• 32% of buyers post questions on social media sites.
• 89% of journalists use blogs for story research, 65% turn to social media sites such as Facebook and LinkedIn, and 52% utilize microblogging services such as Twitter.

Mobile

• Over 300,000 Android devices and 270,000 iPhones are activated every day.
• Smartphone sales increased by 96% worldwide from 2009 to 2010 whilst mobile phone sales increased by 35%.
• By 2015, 4 major regions (Sub-Saharan Africa, Southeast Asia, South Asia, and the Middle East) and 40 countries (including India, Indonesia, and Nigeria) will have more people with mobile network access than with access to electricity at home.
• Global mobile data traffic grew 2.6-fold in 2010, nearly tripling for the third year in a row.
• Last year’s mobile data traffic was three times the size of the entire global Internet in 2000.
• Mobile video traffic will exceed 50 percent for the first time in 2011.

Order of chaos - how to integrate social media feeds into your websites

Today you absolutely have to integrate social media into a website, especially on a blog. At least you include buttons such as Facebook Send or Like buttons, Twitter post button, maybe a Google +1 button and so on.
This helps spreading the information or improves search engine ranking. Of course, this also helps social media platforms collecting behavioral data, but who cares, right? Well I care, but there is no other way.
Integrate social buttons is generally strait forward, you grab the code, you include in your page and boom, all done! However, if you plan to display message feeds on your pages, things become more complicated. You may decide to use the out of the box widgets, so the content will be loaded directly on the browser page; the problem is that this might be reeeeeeally slow. If the content is loaded asynchronously the user might be frustrated seeing pieces of content appearing later. It will be painful to wait for feeds from Facebook, Twitter, YouTube, Flickr: connections opened with each service, latency, not a good user experience. Plus, there are availability issues. Facebook, YouTube and Flickr websites are almost always up, Twitter website is often up. Still, services might be down at some point. This includes your website, but hey, if your site is down, it doesn’t matter if other services are working fine or not. Though, this might be a good solution if you don’t want to display much social services data. But what if you are?
You can of course grab data from all services using a cron job or a scheduled task, store the content locally and then serve it from your server. All social services have APIs, allowing making server calls to obtain data. Front end social media websites are mostly up, but APIs are completely different animals. APIs have all kind of issues. Just to name a few: services are not available or are very slow causing timeouts; there are API call limits (per hour, per IP address), APIs are changing all the time.
The cron job (or scheduled task on Windows) will overcome the APIs call limit, plus if the services are not available the server will offer the latest information it grabbed, but how to deal with API changes? For instance, Facebook changes something every week.
The best solution is to build interfaces specific to your application needs, and then write platform specific providers. This way you only have to adjust the providers when APIs change. For example, you create an interface called IMessage, implementing several properties, such as Author, Message, Data, and several methods such as GetLatestMessages(), returning a list of IMessage objects. In your code you will only use IMessage, so when something changes (like Facebook not allowing anymore to get public message feed witout a token authentication, which broke a lot of applications), your library containing the IMessage implementation will be updated but the application code does not change at all.
In conclusion:

• write a library for social media feeds
• use interfaces
• write an import application to store data on a local cache (maybe database)
• run the import application on a schedule, just enough to stay bellow social media APIs call limits
• use the created library to get data and display it on the website

Note: you may find useful an Inverse of Control technique in order to be able to use only interfaces on your application code. Check the examples I wrote for Simple C# inverse of control and C# inverse of control for more details on this subject.

How to customize Facebook pages - step by step guide (different content for fans, different content by language)

Objective:

To create a landing tab on a Facebook page which displays content in user language, plus different content if the user is a fan, meaning the he or she clicked the like button on the Facebook page.

This is a detailed tutorial, but the actual code is pretty simple, is uses the signed_request parameter sent by Facebook to the IFrame containing a simple application (download the .Net code).

What you need before starting:

• A Facebook account
• Access to a hosted URL address which will contain a Facebook application code
• Optionally a HTTPS address needed for people having secured connection configured on their Facebook accounts
• The example in this tutorial is using .Net Framework 3.5 and Visual Studio 2008, but the same technique works for any other language (PHP, Python, Java etc.)
• The example is this tutorial is using English and French as languages, but the same technique works for any number of languages

Step by step guide:

• Create your Facebook page (skip this step if the page already exists)
• Go to http://www.facebook.com/pages/create.php
• Follow the steps to create the page (in this example we’ll call it my_new_fb_page)
• Useful tips can be found on http://www.facebook.com/help/?page=904
• Create a website for the future Facebook application
• Using Visual Studio create a new website on your computer
• Create an App_Code folder
• In the App_Code folder, create a new file (class), named Facebook.cs
• Copy and paste the Facebook.cs code (see Code section below)
• If the website contains a Default.aspx page, delete it
• Create a new Default.aspx page
• Choose Visual C# as language
• Uncheck Place code in separate file
• Uncheck Select master page
• Copy and paste the Default.aspx code (see Code section below)
• From Visual Studio, right click on Default.aspx and choose View in browser from the context menu
• The website will open in your default browser
• You’ll need the address of the website displayed in the browser address bar for Facebook configuration
• Create a Facebook application – this application will be displayed on a tab in your page
• Go to http://developers.facebook.com/
• Click on My Apps
• Click on Set Up New App button
• Follow the steps to create the application (in this example we’ll call it my_new_fb_app)
• Configure the Facebook application to work with the test code on your machine
• Go to http://developers.facebook.com/
• Click on My Apps
• Click on the application previously created (my_new_fb_app)
• Click on Edit Settings
• Personalize your application: name, description, icon, logo etc.
• Click on Facebook integration
• Choose a name for your page on the Canvas Page field
• Put the address of the page previously created and displayed on the browser (yes, it will work fine with a localhost address)
• If Facebook complains about the address, just add a parameter to the URL (doesn’t matter what, ex. http://localhost:3219/facebookapp/default.aspx?par=val)
• In the Canvas section, choose IFrame for Canvas Type (FBML is now deprecated)
• In the Page Tabs section, choose IFrame for Page Tab Type
• Click on Save Changes
• Your app is now ready to test
• Add the Facebook application to the Facebook page
• Click on Back to My Apps
• If you have more than one app, make sure that my_new_fb_app is selected
• Click on Application Profile Page
• Click Add to My Page
• From the pop-up list displayed, choose my_new_fb_page, click on Add to Page
• Click on Close
• The app is now added to the page
• Test and debug the test code
• Go to Facebook home page
• From the section starting with App Requests, click on More
• Click on Ads and Pages
• Click on my_new_fb_page
• At left you will see a link to my_new_fb_app, click on it
• The app will be displayed (by default in English and Not fan)
• If there is a .Net error Post Verb is not accepted, go to the application settings (previous section), and add a parameter after the URL (doesn’t matter what, ex. http://localhost:3219/facebookapp/default.aspx?par=val)
• At this point, everything should work fine, you can click on like button on the page in order to display fan content and you can change you Facebook language (from Account, Account Settings)
• Deploy the code to the production environment
• Deploy the website code to the production environment
• Test the production address (you should see the defaults, English not fan)
• If possible, activate HTTPS on the production environment and test the secure website (strongly recommended for the page to be displayed correctly for users using SSL connections)
• Change Facebook application settings to point to the production code
• Go to http://developers.facebook.com/
• Click on My Apps
• Click on the application previously created (my_new_fb_app)
• Click on Edit Settings
• Click on Facebook Integration
• On the Canvas section, put the production URLs (Canvas URL and Secure Canvas URL)
• On the Page Tabs section, put the production URLs (Tab URL and Secure Tab URL)
• Click on Save Changes
• Changes may take several minutes to propagate to all servers
• Configure the Facebook page
• Go to Facebook home page
• From the section starting with App Requests, click on More
• Click on Ads and Pages
• Choose my_new_fb_page, click on Edit Page
• From Manage Permissions, on Default Landing Tab, you can choose the newly created tab as default (please note that since you are an admin of the page, your landing page will always be the wall, but everything will work as expected for other users)
• From Apps, you’ll find my_new_fb_app at the bottom, you can click on Edit Settings if you want to customize the tab name displayed on the page
• Finalize and test
• If possible, use another Facebook account (not admin of the page)
• Click on View Page
• Test all scenarios (English/French, fan/not fan)
• All done; hope everything worked well, if not you can leave a comment and I’ll try to help you

Code used in this tutorial:
Download the code (facebook_page.zip)

Facebook.cs

using System;

using System.Data;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public class FacebookData

{

    public string algorithm { get; set; }

    public long issued_at { get; set; }

    public long expires { get; set; }

    public string oauth_token { get; set; }

    public string app_data { get; set; }

    public string user_id { get; set; }

    public FacebookPage page { get; set; }

    public FacebookUser user { get; set; }

    public FacebookData() { }

}

public class FacebookPage

{

    public long id { get; set; }

    public bool liked { get; set; }

    public bool admin { get; set; }

    public FacebookPage() { }

}

public class FacebookUser

{

    public string country { get; set; }

    public string locale { get; set; }

    public FacebookUserAge age { get; set; }

    public FacebookUser() { }

    public string culture

    {

        get { return String.IsNullOrEmpty(locale) ? null : locale.Substring(0, 2); }

    }

}

public class FacebookUserAge

{

    public int min { get; set; }

    public int max { get; set; }

    public FacebookUserAge() { }

}

Default.aspx

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Web.Script.Serialization" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected override void OnLoad(EventArgs e)

    {

        string culture = "en";

        string fan = "not_fan";

        string signed_request_encoded = Request["signed_request"];

        if (signed_request_encoded != null && signed_request_encoded.Contains("."))

        {

            byte[] buffer = Base64UrlDecode(signed_request_encoded.Split('.')[1]);

            string signed_request = Encoding.UTF8.GetString(buffer);

            FacebookData facebookData = new JavaScriptSerializer().Deserialize<FacebookData>(signed_request);

            if (facebookData.user.culture != null)

                culture = facebookData.user.culture;

            fan = facebookData.page.liked ? "fan" : "not_fan";

        }

        Page.FindControl(String.Format("{0}_{1}", culture, fan)).Visible = true;

    }

    byte[] Base64UrlDecode(string arg)

    {

        string s = arg;

        s = s.Replace('-', '+'); // 62nd char of encoding

        s = s.Replace('_', '/'); // 63rd char of encoding

        switch (s.Length % 4) // Pad with trailing '='s

        {

            case 0: break; // No pad chars in this case

            case 2: s += "=="; break; // Two pad chars

            case 3: s += "="; break; // One pad char

            default: throw new System.Exception(

              "Illegal base64url string!");

        }

        return Convert.FromBase64String(s); // Standard base64 decoder

    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Facebook Application</title>

</head>

<body>

<asp:PlaceHolder ID="en_fan" runat="server" Visible="false">

    Current user is fan <!-- insert your HTML here -->

</asp:PlaceHolder>

<asp:PlaceHolder ID="en_not_fan" runat="server" Visible="false">

    Current user is not fan <!-- insert your HTML here -->

</asp:PlaceHolder>

<asp:PlaceHolder ID="fr_fan" runat="server" Visible="false">

    L'usager est fan <!-- insert your HTML here -->

</asp:PlaceHolder>

<asp:PlaceHolder ID="fr_not_fan" runat="server" Visible="false">

    L'usager n'est pas fan <!-- insert your HTML here -->

</asp:PlaceHolder>

</body>

</html>

The simplest way to customize Facebook pages

Display different content for fans, plus localize your page using the user language

Very often people want their Facebook pages to display pages in visitor language (Facebook configured language). Also, they want to display some content only if the current user is a fan (clicked the Like button).
There are a lot of solutions for localization and personalization on the Web, using Facebook applications, using FBML (now deprecated by Facebook since March 11th, 2011) and so on. These are interesting but I've found a better way to achieve all this.
In my article about Facebook pages localization I've talked about the signed_request parameter send by Facebook to an iframe application. The documentation was not so clear on the Facebook website, but seems that they did a much better job now: https://developers.facebook.com/docs/authentication/signed_request/
So if you read the value of the signed_request parameter and decode it, you will get a json string containing all the info needed to localize the content, plus some information about the page hosting the application, including a boolean value which tells if the current user liked the page or not. All this without for an application not requesting any additional permission from the user, so it will act like a regular tab on the page.
I'll get back soon with a step by step procedure to achieve Facebook pages customization.

UPDATE: Here is the step by step guide: http://www.marianborca.com/2011/04/how-to-customize-facebook-pages-step-by.html

How to localize Facebook pages

Well, you can't, but there is a workaround!
I spent a lot of time trying to display a Facebook page using the user language, that is to localize page content. All this just to come always to the same conclusion: this is not possible right now.
It's easy to display content based on user country, but often this is not enough. In Canada we have two official languages, English and French; other countries have two or more languages also.
So what is the solution? It's not so hard: create a Facebook application (google for "How to create a Facebook application" - you'll need to host your application somewhere though).
Facebook sends your app information about the user, passed to your URL using a POST request within a single signed_request parameter. When a user accesses the application, the signed_request parameter has a JSON array containing the locale and country of the current user.
In order to gain access to all the user information available to the application, the user must authorize the application, but for what we are trying to achieve this is not necessary.
All we wanted was the user locale, which allows localized content to be displayed.

Tips for mobile development using PhoneGap

I've used PhoneGap for some time. It's a nice open source Framework for building cross-platform mobile applications. You can build applications in HTML and JavaScript and still use platform specific features such as Location Services, Address Book, Notification Services and so on. It works for iOS, Android, Palm, Symbian and Blackberry.
I've used it only for iOS (iPhone and iPad) and generally everything worked fine. There are some problems though.
For iPad applications, if you want to refresh a large portion of the screen, there are some performance issues. Using CSS3, which is hardware accelerated, helps a lot, but still there is a significant difference between HTML and native. So stick with Apple recommendations and do not change large portions of the screen.
For iPhone applications the problem I had was that opening a new window with HTML content. I've tried using an iFrame for this, but then the links inside the HTML may be targeted to the top window and if the user clicks on such links the new page will take all the screen, including the navigation bar for instance. So the user is not able to go back to the application. If the iFrame is named "_top" than this particular problem is partially solved, because the links will be targeted to the iFrame. But then some links may be targeted "_parent" for instance, so this doesn't work.
There is a nice plugin for PhoneGap called ChildBrowser for opening URLs in a new WebUI. This solved the problem and all the links are working fine.
For UI layout I used jQTouch and jQuery Mobile, both open source. jQTouch is simple yet good enough for simple applications. It offers native WebKit animations, image preloading, callback events and so on.
jQuery Mobile is a cross plaform framework based un jQuery, very powerful yet somewhat not obvious to skin and to adapt the applications not using a standard navigation.
There is another framework now free, called Sencha Touch. I didn't use it yet but it seems promising.
We have Today a lot of devices, using a lot of screen resolutions and pixel density, so I now plan on building resolution independent UIs. Here is a nice article explaing how to achieve this: http://www.sencha.com/blog/2010/08/23/resolution-independent-mobile-ui/