Facebook Cookbook

how to resize facebook popup dialog box

while developing facebook applications, sometimes we don’t like to use the default facebook popup dialog box, we want to resize/modify to show it on our own way. but how can we do it? we don’t have the css class on our hand right. but don’t worry, we have this simple trick to make it on our own way.

let’s see how we can do it….

first let’s see how a default popup box looks like. let’s print something pretty simple and set a button that will call the javascript function which will create the default popup dialog box. following code will do it for us..

<?php
include_once("config.php");
?>
<input type="button" value="click me" onclick=" return showMe()">
<script language="javascript">
function showMe()
{
   new Dialog().showMessage('Hi There', ' Hi, i\'m a default pop-up, but shh you can play with me!' );
}
</script>

and this will generate a popup like the following screen shot.

Default Dialog Box

now, we want to change this default dialog box right. ok, this default dialog box uses some css classes which can be found using firefox add on firebug. one of them is called “dialog_body” which contains the body of the dialog box. Idea is to overwrite the css class to make it our own let’s change the “dialog_body” class in the following way…


<style>
.dialog_body{
   background-color:#CCCCCC !important;
   font-weight:bold !important;
   font-size:16px;
   text-align:center !important;
   padding-left:0px !important;
   padding-top:10px!important;
   padding-bottom:10px!important;
}
</style>

just set the “!important” to get the priority over the existing properties. now let’s see how out new dialog box looks like ..

Changed Dialog Box

cool eh?
now, how about make this popup dialog box wider than the default size? well, we have that trick too!
this css class called “pop_dialog_table“, which holds the whole dialog box’s div. so increasing it’s width will also increase the size of the dialog box. so let’s do it!


<style>
.pop_dialog_table {
   width: 650px !important;
}
</style>

how this will look like then? have a look at the following screen shot

Wider Dialog Box

simple eh? hope it helps to play with this popup dialog box on your own way!

Share and Enjoy:

9 Responses to “how to resize facebook popup dialog box”

pavel on February 6th, 2009

Kool way to hack the problematic pop up dialogue of FB. Way to go Junal Bhai !
zaheer on May 29th, 2009

Is there anyway to create custom dialog boxes which have different look and feel then standard facebook dialog boxes?

Thnx
wayez on June 5th, 2009

hi i’m newbie in fb application development, my question is, do i need to include some kind of library from facebook to have all this such as new Dialog().showMessage ….
i have my app in php done, i need to display dialog box etc, i see the documentation, but if i just put new Dialog().showMessage(… it says Dialog is not defined. thanks
brahimhackman on July 7th, 2009

hi your code dosn’t work man where the file required “config.php” and the function dosn’t work please make a clean code for us .
Michael Kamleitner on December 2nd, 2009

maybe something has changed inside facebook’s css, but for me setting the width only works with this selector:

.pop_container_advanced { width: 650px !important; }

hope that helps, and thx for the articel!
Tony Faria on December 2nd, 2009

Nice post – took me ages trying to use FB:Dialouge with no joy but now using FBJS works a treat
Also big thanks to Michael
The css .pop_container_advanced was the missing part of the puzzle

Regards Tony – The iFan Team
http://www.facebook.com/ifan.page.design
hveiras on April 9th, 2010

Code didn’t work for me, Facebook is adding appId before each css class in my code so I can’t override the style.
None on April 18th, 2010

Thanks, nice blog
april on June 4th, 2010

hey, my facebook dialogue box only shows the top half of the message it does not show the entire box that will let you click on ok and post the box. When I am playing facebook games and it asks if I want to “share” with my friends (on my fb wall) I click “share” and then only the top half of the dialogue box shows up…maybe it isn’t fully loading. Been having this problem for a month and a half and I’ve e-mailed for support but their answers DO NOT help to fix the problem. Any idea why the entire box isn’t showing up? Do you know an easy way I can fix it? Thanks.