Amongst all the other applications, its really no surprise that Farmville still comes out the winner on Facebook with 73.6 million users. With Café world coming in a far second at 30.2 million users. Texas Holdém coming in at 8th with 23.7 million users & Mafia Wars at 10th with 22.6 million users.
The Top 10 list adjusts a little to allow for the addition of an older application, recently added to the metrics group used to track usage each week. iHeart, which has been an extremely popular application on Facebook for some time now, jumps onto the list in the #3 spot.
The addition of iHeart bumps some regulars such as Pet Society off the list, as it continues to face stiff competition from the ever rising newer PetVille game, developed by Zynga. Interestingly though, FarmVille, Cafe World and Mafia Wars have all been experiencing user decline over the past few weeks. Mafia Wars alone has lost almost 5 million players in the last 6 weeks.
Topping the Top 10 Gainers list is Pillow Fight. It’s a time-sensitive game allowing you to pillow fight with your friends, crushes, affair, love or enemies. The winner is declared within two days if the opponent fails to hit you back.
Next is a newer game called Tiki Farm, that seems to be a cross between Happy Island and FarmVille. You get to farm on an island, grow pineapple or sugacaner to please the Tiki Spirits, and yes, even wear grass skirts!
Rounding out the top 3 gainers is an application sure to appeal to the younger crowd – Graffiti. This app allows you to draw on the photos of your friends. Could be fun!
As predicted, Dantes Inferno appears on the list as well.
Sunday, August 8, 2010
Sunday, August 1, 2010
Static FBML and CSS in Static FBML tabs
I find myself spending more time working on Facebook than playing Poker, Farmville (yuck) or checking out status's cause I’m always trying to develop some basic functionalities on Facebook Fanpages. I’ve always wanted to go through the details one-by-one because I never had any formal education on HTML or CSS. Also, I thought it'd be great if this would be educational to anyone else as well...
FBML – The Basics
A bit of history – The first FB language that came was FQL (Facebook Query Language) which evolved into the Facebook API. Then in 2007, Facebook launched their Platform in order to complement their API, which uses FBML (Facebook Markup Language), which is similar to HTML in the way that it allows you to write browser interrupted code to render elements on a Facebook page or application. For example, we can now embed images, FLV’s or SWF’s, retrieve or send data, etc., essentially creating stand-alone/dependable widgets.
The only downside is that these widgets can only be used on Facebook!
Before we get into some basic code snippets, I should mention Jesse Farmer’s post An Introduction to FBML, he’s done a really good job of breaking down the theory, plus he has included some really good code examples to help you get started. You should also check out the Facebook Developers Wiki.
Static FBML Box (Script enabled widget)
For starters you will need to install the Static FBML application mentioned above. The nice thing about this widget is you can write HTML in it. So, for example if you want to load some graphics like banners, logos, etc., you can use . You can also link these images with and so on. The only drawback with this is that you cannot run any Javascript, only a majority of HTML & CSS. Not too bad considering a lot is possible with CSS. Facebook did this to prevent developers from running automatic scripts using Javascript to 'trouble' FB users.
Adding Your FBML Box or Tab to Your Page
* In "edit page" find the “Static FBML” link, click on the pencil icon and select “edit”
* Enter the name you want to appear in the box heading in the “Box Title” field
* Enter the HTML content in the “FBML” field
* When you’ve added in your HTML — click “Save Changes” and view your page to see the results.
Unfortunately there is no preview option.
*A few tips on dimensions – If you want your FBML box to appear in the left column of your Wall, set the width to 180px and/or if you want it to appear in the tabs in the main Wall column, set the width to 600px width or less (Facebook is planning to crop down the size of a Page tab sometime in August 2010 to 520px. Nothing confirmed but always good to match the size up)
The FBML Test Console
Now that we have covered some of the basics let’s take a look at the Facebook Developer Tools. You may not be aware that Facebook offers a bunch of free online developer tools to help you learn, test, and eventually deploy your apps. For this example I will go through some basic FBML embedded in HTML.
Using the FBML Test Console we can input our code and get a Facebook Box preview. The FBML Test Console will also output the HTML source if you need to embed it elsewhere.
The way it works is:
* Log into to Facebook
* Got to Facebook Developer Tools
* Click on the FBML Test Console Tab
* You will notice that the tool will automatically retrieve your user ID and API Key
* Input code in the left box
* Click on “Preview”
*Notice the Position dropdown menu, here you can choose from standard Facebook layouts like feed body, request form, etc.
Creating Custom Tabs
It’s important to create custom tabs that represent your page/brand beyond the basic Wall, Info, Photos, Events, etc. Most successful pages use custom tabs to sell their products or services, watch demos and presentations, enter contests and so on. A good example is the Apple Students Page, they have a tab called On Campus which launches a really slick Flash app with videos, a google map mashup, and some ads.
The other bonus of custom tabs is the ability to set it as the default landing page. In your page settings you can choose which tab is set as the default, most people just use the Wall. A good example is the Nokia Page, which defaults to Nokia Twist-USA.
How do I create a custom tab? Easy! First you need to make sure you have added the FBML Application to your page. Without it you can’t create any custom widgets to display as tabs(you can also use these steps to add any of the default applications as a tab).
Click on “edit page” (link is under your profile pic when logged in) and under Applications click on the pencil icon on the top right corner of the application you want to add as a tab.
You will be giving 2 options, add/remove from Boxes and add/remove from Tab. Click “add”. Now go back to your page and refresh and you new tab should be there.
Removing Tabs
Removing tabs take only a few seconds.
Click on any of your tabs. When that page loads you will notice the tab is white and a pencil icon appears next to the tab name. Click on the pencil icon.
Click on “Delete Tab”. Told you it was easy!
The only tabs you cannot delete are Wall and Info.
*A quick tip about the Boxes tab – You can remove the boxes but not in the same way as others. To remove the boxes tab first you need to click on Boxes. When the page loads remove each box that is under this tab (the same steps as above). Once there are no boxes left under the Boxes tab go back to your wall. The Boxes tab should be gone, if not refresh a few times. Essentially this tab only exists if there is something in it!
FBML – The Basics
A bit of history – The first FB language that came was FQL (Facebook Query Language) which evolved into the Facebook API. Then in 2007, Facebook launched their Platform in order to complement their API, which uses FBML (Facebook Markup Language), which is similar to HTML in the way that it allows you to write browser interrupted code to render elements on a Facebook page or application. For example, we can now embed images, FLV’s or SWF’s, retrieve or send data, etc., essentially creating stand-alone/dependable widgets.
The only downside is that these widgets can only be used on Facebook!
Before we get into some basic code snippets, I should mention Jesse Farmer’s post An Introduction to FBML, he’s done a really good job of breaking down the theory, plus he has included some really good code examples to help you get started. You should also check out the Facebook Developers Wiki.
Static FBML Box (Script enabled widget)
For starters you will need to install the Static FBML application mentioned above. The nice thing about this widget is you can write HTML in it. So, for example if you want to load some graphics like banners, logos, etc., you can use . You can also link these images with and so on. The only drawback with this is that you cannot run any Javascript, only a majority of HTML & CSS. Not too bad considering a lot is possible with CSS. Facebook did this to prevent developers from running automatic scripts using Javascript to 'trouble' FB users.
Adding Your FBML Box or Tab to Your Page
* In "edit page" find the “Static FBML” link, click on the pencil icon and select “edit”
* Enter the name you want to appear in the box heading in the “Box Title” field
* Enter the HTML content in the “FBML” field
* When you’ve added in your HTML — click “Save Changes” and view your page to see the results.
Unfortunately there is no preview option.
*A few tips on dimensions – If you want your FBML box to appear in the left column of your Wall, set the width to 180px and/or if you want it to appear in the tabs in the main Wall column, set the width to 600px width or less (Facebook is planning to crop down the size of a Page tab sometime in August 2010 to 520px. Nothing confirmed but always good to match the size up)
The FBML Test Console
Now that we have covered some of the basics let’s take a look at the Facebook Developer Tools. You may not be aware that Facebook offers a bunch of free online developer tools to help you learn, test, and eventually deploy your apps. For this example I will go through some basic FBML embedded in HTML.
Using the FBML Test Console we can input our code and get a Facebook Box preview. The FBML Test Console will also output the HTML source if you need to embed it elsewhere.
The way it works is:
* Log into to Facebook
* Got to Facebook Developer Tools
* Click on the FBML Test Console Tab
* You will notice that the tool will automatically retrieve your user ID and API Key
* Input code in the left box
* Click on “Preview”
*Notice the Position dropdown menu, here you can choose from standard Facebook layouts like feed body, request form, etc.
Creating Custom Tabs
It’s important to create custom tabs that represent your page/brand beyond the basic Wall, Info, Photos, Events, etc. Most successful pages use custom tabs to sell their products or services, watch demos and presentations, enter contests and so on. A good example is the Apple Students Page, they have a tab called On Campus which launches a really slick Flash app with videos, a google map mashup, and some ads.
The other bonus of custom tabs is the ability to set it as the default landing page. In your page settings you can choose which tab is set as the default, most people just use the Wall. A good example is the Nokia Page, which defaults to Nokia Twist-USA.
How do I create a custom tab? Easy! First you need to make sure you have added the FBML Application to your page. Without it you can’t create any custom widgets to display as tabs(you can also use these steps to add any of the default applications as a tab).
Click on “edit page” (link is under your profile pic when logged in) and under Applications click on the pencil icon on the top right corner of the application you want to add as a tab.
You will be giving 2 options, add/remove from Boxes and add/remove from Tab. Click “add”. Now go back to your page and refresh and you new tab should be there.
Removing Tabs
Removing tabs take only a few seconds.
Click on any of your tabs. When that page loads you will notice the tab is white and a pencil icon appears next to the tab name. Click on the pencil icon.
Click on “Delete Tab”. Told you it was easy!
The only tabs you cannot delete are Wall and Info.
*A quick tip about the Boxes tab – You can remove the boxes but not in the same way as others. To remove the boxes tab first you need to click on Boxes. When the page loads remove each box that is under this tab (the same steps as above). Once there are no boxes left under the Boxes tab go back to your wall. The Boxes tab should be gone, if not refresh a few times. Essentially this tab only exists if there is something in it!
Subscribe to:
Posts (Atom)