how to create facebook custom invite plugin

Facebook invite plugin is deprecated code, you never know when it will stop working. So i decided to develop a code that ill perform same activity. how to create Facebook custom invite plugin that post the custom message to friends wall. was little difficult until i found facebook friends api that allows us to get list of all the friends, currently it returns around 200 friends by default. This plugin is useful only if you need to add some custom functionality along with wall post then you can use this code.

Step 1: Most important is how to get friends list. use following code inside try and catch block. If its getting the user information then we can get user friends.

  $user_friends = $facebook->api('/me?fields=friends');

Step 2: First include the javascript code that will create the popup for you and we are going to show the friends list inside this popup.

$(document).ready(function () {
	var strUserList = '';
	// if user clicked on button, the overlay layer or the dialogbox, close the dialog
	$('#dialog-box a.button').click(function () {
		$("input[type=checkbox]:checked").each(
		    function() {
		    	if(strUserList) {
		    	  strUserList = strUserList + ";" +$(this).val();
		    	} else {
			   strUserList = $(this).val();
		    	}
		    }
		);
		if(strUserList.length > 0) {
			$("[name='frndlist']").val(strUserList);
			$("form:first").submit();
			return true;
		}
		else {
			alert('Please select at least 1 friend.');
			return false;
		}
	});
	$('a.modalClose').click(function () {
		$('#dialog-overlay, #dialog-box').hide();
		return false;
	});
	// if user resize the window, call the same function again
	// to make sure the overlay fills the screen and dialogbox aligned to center
	$(window).resize(function () {
		//only do it if the dialog box is not hidden
		if (!$('#dialog-box').is(':hidden')) popup();
	});
});
function selectFrnd(Obj) {
	var maxLimit = 4;
	var chkCount = $("input:checked").length;
	if(chkCount > maxLimit) {
	  alert	('We can select up ' + maxLimit + ' friends.');
	  $(Obj).removeAttr('checked');
	}
}
//Popup dialog
function popup(message) {
	// get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	// calculate the values for center alignment
	var dialogTop =  (maskHeight/2) - ($('#dialog-box').height()/2);
	var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
	// assign values to the overlay and dialog box
	$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
	$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
	//$('#dialog-box').dialog({ closeOnEscape: false });
	/*
	$('#dialog-message').dialog({ closeOnEscape: false });
	$( '#dialog-message').dialog( "option", "height", 530 );
	$( '#dialog-message').dialog( "option", "width", 450 );
	*/
	return false;
}

Step 3: Now include the css code inside the css file.

#dialog-overlay {
	/* set it to fill the whil screen */
	width:100%;
	height:100%;
	/* transparency for different browsers */
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000;
	/* make sure it appear behind the dialog box but above everything else */
	position:absolute;
	top:0; left:0;
	z-index:3000;
	/* hide it by default */
	display:none;
}
#dialog-box {
	/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	/* css3 border radius */
	-moz-border-radius: 5px;
        -webkit-border-radius: 5px;
	background:#eee;
	/* styling of the dialog box, i have a fixed dimension for this demo */
	width:450px;
	/* make sure it has the highest z-index */
	position:absolute;
	z-index:5000;
	/* hide it by default */
	display:none;
	height:380px !important;
}
#dialog-box .dialog-content {
	/* style the content */
	text-align:left;
	padding:10px 10px 0px 10px;
	margin:13px 13px 0 13px;
	color:#666;
	font-family:arial;
	font-size:11px;
	height:300px;
	overflow:auto;
	position:relative;
}
a.button {
	/* styles for button */
	margin:10px auto 0 auto;
	text-align:center;
	display: block;
	width:50px;
	padding:5px 10px 5px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	/* button color */
	background-color: #e33100;
	/* css3 implementation :) */
	/* rounded corner */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/* drop shadow */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	/* text shaow */
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}
a.button:hover {
  background-color: #c33100;
}

Step 4: Presentation logic. show list of all friends in overlay area. and add checkbox and user profile link so that we can select user.

show popup
Share this nice post:

One thought on “how to create facebook custom invite plugin

  1. I just want to mention I am just new to weblog and definitely liked you’re web blog. Most likely I’m want to bookmark your blog post . You definitely come with very good article content. Thanks a lot for revealing your web page.

Comments are closed.