Create Facebook Popup Window Dialog Box for Iframe Apps without FBML

Facebook provided the FBML tags for creating dialog boxes for use in apps, but it has been long since FBML tags were deprected by Facebook. In this tutorial I will show you how to create a popup window dialog box using the FB JavaScript SDK that you can readily use in your FB apps.

Here is the preview of what we will get. You can check a demo here.

You can download the code for Facebook popup from the bottom of the post.

fb dialog box

Step 1

We will start by creating a FB dialog using FB.Dialog.create. Use this code inside body tags. This will give the basic structure of our dialog window. We will then need to add styling to it.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>

        var message = 'Sample Error message - An error occured. <br /><br /> Please try Again.';
        var title = 'Netavatar - Error Example';
        buttonLabel = '<input type="button" name="ok" value="OK" id="ok" onClick="FB.Dialog.remove(this);">';

	var dialog = FB.Dialog.create({
                content: '<div id="window_container"><div id="title_bar">' +title+ '</div><p id="message">' + message + '</p><div id="bottom_bar">' +buttonLabel+ '</div></div>',
                closeIcon: true,
                onClose: function() {
                        FB.Dialog.remove(dialog);
                },
                visible: true
        });

        dialog.style.width='450px';
	dialog.style.height='137px';

</script>

In the above code we loaded the FB connect js in line 1 and 2. Line 6, 7 and 8 shows the message, title and the button we want to show up in our dialog window.

We have defined 4 div ids- window_container, title_bar, bottom_bar and message. We will be using these in order to style our dialog box. closeIcon on line 12 shows up the close icon in the right upper corner. Keep it true if you want to use it else make it false.
Here is what we get with the above code.

fb popup

Step 2

Now we will add styling to the 4 div ids- window_container, title_bar, bottom_bar and message. add the following CSS code into the head section.

<style type="text/css">
	#window_container{
		border: 1px #555555 solid;
	}

	#title_bar{
		color: rgb(255, 255, 255);
		background-color: rgb(109, 132, 180);
		font-size: 15px;
		font-weight: bold;
		padding: 5px;
		text-align: left;
	}

	#bottom_bar{
		color: rgb(0, 0, 0);
		background-color: rgb(242, 242, 242);
		padding: 8px;
		text-align: right;
		border-top: 1px solid rgb(198, 198, 198);
		height:23px;
	}

	#message{
		margin:10px 15px;
		height:50px;
	}

	input[type=button] {
		font-size: 13px;
		background:#627aac;
		color:#fff;
		font-weight:bold;
		border: 1px #29447e solid;
		padding: 3px 3px 3px 3px;
		clear:both;
		margin-right:5px;
	}

	input[type=button]:hover {
		background:#4f6aa3;
	}
</style>

I have used input[type=button] in the above code to add the FB like look to the buttons. Now we have got the FB popup window dialog.

You can also put up images in the dialog, use more than one buttons and bind your custom event with those buttons. Take a reference of the code below for this.

<script>

	var message = '<img src="img.jpg" style="float:right;" /><span>Hi, This is a sample message. <br /><br />You can put any regular HTML here like images, links etc.</span>';
	var title = 'Netavatar Message Example';
	buttonLabel = '<input type="button" name="invite" value="OK" id="OK" onClick="FB.Dialog.remove(this);customFunction();"><input type="button" name="skip" value="Skip" id="skip" onClick="FB.Dialog.remove(this);">';

	var dialog = FB.Dialog.create({
		content: '<div id="window_container"><div id="title_bar">' +title+ '</div><p id="message">' + message + '</p><div id="bottom_bar">' +buttonLabel+ '</div></div>',
		closeIcon: true,
		onClose: function() {
			FB.Dialog.remove(dialog);
		},
		visible: true
	});
	dialog.style.width='450px';
	dialog.style.height='217px';

</script>

Line 5 in above code shows a customFunction(). This is the name of a sample function only that you may be interested to call when user clicks on OK. The thing to be noted that in order to increse the height of the dialog box, we have to make change at two places. One in the #message id style. (For this sample image I changed it to 130px from 50px) and other in the script where it says dialog.style.height. I changed that to 217px from 137px.


Check the online demo.

Subscribe to My Newsletter
Receive all new posts and site updates in your mailbox.
Name:
Email:
 
Powered by Optin Form Adder

Tags: , , , , , , , ,

23 Responses to "Create Facebook Popup Window Dialog Box for Iframe Apps without FBML"

  • Glenn says:
  • Shallum says:
    • Puneet says:
  • dara says:
  • dara says:
    • Puneet says:
  • dara says:
    • Puneet says:
  • dara says:
  • dara says:
    • Puneet says:
  • dara says:
    • Puneet says:
  • dara says:
  • Anel says:
    • Puneet says:
  • Blog Jaka Sifra says:
  • zoya says:
  • zoya says:
  • akmal says:
Leave a Comment