Lots of things have changed in new Facebook and these changes brought nightmare for developers, especially for existing applications. Old news feed will be deprecated very soon, and all existing apps should use the new news feeds method. Another one is Profile box, in old method it was default but this is no more default in new facebook. Now, users will be asked by an add button to add the profile box. Once users decided to add the profile box they can preview the profile box and clicking on the add button they can add it. So, some extra work for developers no doubt. Let’s see how we can add profile box in new facebook.

I’m taking the example from my personal facebook application Fallywood…

First thing, is to add the button that will ask users whether they want to add the profile box or not. For that we have to use 2 FB tags

1.    fb:if-section-not-added  (decide whether user has added the box)
2.    fb:add-section-button    (if not then show the button)

We can add this button in each page of the app or we can add this button in any specific page, depends on us.

<fb :if-section-not-added section="profile">
<div style="height:45px; width:602px;">
<div id="movieCategories" class="box" style= "width:600px;">
<div class="class ">
<div class="class_">
             Add <b>Fallywood</b> to your profile:</div>
<div class="label_2"><fb :add-section-button section="profile"/></div>
</div>
</div>
</div>
</fb>

Add Button

1. Button will not appear if the user already added the box in his/her profile
2. And you must setup the “Post-Authorize Redirect URL” to where your profile box method will be called. (i.e. http://apps.facebook.com/your_app_name/profile_box.php)

Now, it’s time to create the profile box, remember we have to create both wide and narrow profile box. And width of narrow profile box never can be more than 184px! If we don’t set this width, narrow profile box will not be appearing. Width of wide profile box should be 380px!

It’s time to call the method…..

// this variable/array should contain all the data for small profile box
$small_profile_fbml  ="I'm Small Profile Box ";
// this variable/array should contain all the data for big profile box
$big_profile_fbml      = "I'm Big Profile Box";
//set the profile box
$facebook->api_client->profile_setFBML(NULL, $fb_user, $big_profile_fbml, '', '', $small_profile_fbml);

Preview the Profile Box

Set the box in your profile page

That’s it! It should work now , please feel free to ask me any question….