Get facebook fan page details using jquery

In this post i will explain how to get the facebook fan page details using Jquery. This is very easy and simple code which can implemented with any platform’s web applications.

jQuery Code will get

you Fan Page Name
Fan Page Cover Page
People Talking about
Count No of Likes
About Username
Fan Page Category
Website Link
Fan Page Link
Timeline photo

CSS Code

<!--CSS-->
	<style type="text/css">
	/* CORE STYLES */
	* { 
		margin: 0px;
		padding: 0px;
		}
	html {
		overflow: hidden;
		}
	body {
		font-family: "Helvetica", Arial, Sans-Serif;
		font-size: 18px;
		line-height: 22px;
		color: #333;
		}
		
	/* SIDEBAR */
	#sidebar { 
		background: #eee;
		float: left;
		left: 300px;
		margin-left: -300px;
		position: relative;
		width: 300px;
		overflow-y: auto;
		position: relative;
		}
	#sidebar h1 {
		padding: 30px;
		}
	#sidebar ul {
		margin: 0px 30px 0px 50px;
		list-style: disc;
		}
	#sidebar li {
		margin: 0px 0px 5px;
		}
		
	/* MAIN CONTENT AREA */
	#contentWrapper { 
		float: left;
		width: 100%;
		}
	#content {
		background: #fafafa;
		margin-left: 300px;
		overflow-y: auto;
		}
	#content h1 {
		padding: 30px;
		font-size: 26px;
		}
	#content p {
		font-size:12px;
		}
	</style>

/* CORE STYLES */

* {

margin: 0px;

padding: 0px;

}

html {

overflow: hidden;

}

body {

font-family: "Helvetica", Arial, Sans-Serif;

font-size: 18px;

line-height: 22px;

color: #333;

}

/* SIDEBAR */

#sidebar {

background: #eee;

float: left;

left: 300px;

margin-left: -300px;

position: relative;

width: 300px;

overflow-y: auto;

position: relative;

}

#sidebar h1 {

padding: 30px;

}

#sidebar ul {

margin: 0px 30px 0px 50px;

list-style: disc;

}

#sidebar li {

margin: 0px 0px 5px;

}

/* MAIN CONTENT AREA */

#contentWrapper {

float: left;

width: 100%;

}

#content {

background: #fafafa;

margin-left: 300px;

overflow-y: auto;

}

#content h1 {

padding: 30px;

font-size: 26px;

}

#content p {

font-size:12px;

}

</style>

Jquery Code

<!--JS-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
							   
							   
	function add_commas(number) {
		if (number.length > 3) {
			var mod = number.length % 3;
			var output = (mod > 0 ? (number.substring(0,mod)) : '');
				for (i=0 ; i < Math.floor(number.length / 3); i++) {
					if ((mod == 0) && (i == 0)) {
						output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
					} else {
						output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);	
					}
				}
			return (output);
		} else {
			return number;
		}
	}
	
		
		//GET BROWSER WINDOW HEIGHT
		var currHeight = $(window).height();
		$('#sidebar, #content').css('height', currHeight);
		
		//ON RESIZE OF WINDOW
		$(window).resize(function() {
			
			//GET NEW HEIGHT
			var currHeight = $(window).height();	
			//RESIZE BOTH ELEMENTS TO NEW HEIGHT
			$('#sidebar, #content').css('height', currHeight);
			
		});
		
	jQuery('.fetch_fanpage').on("click", function(e) {		
	   var username = jQuery("#username").val();
	   if(username == '') { alert('Enter Username'); return false; }
	   jQuery('#cover-page').html('<img src="fb_loader.gif">');
	  jQuery.getJSON('http://graph.facebook.com/'+username+'?callback=?', function(data){
		 if(data.username) {																				
				var fb_count = data['likes'].toString();
				var fb_about = data['about'].toString();
				var fb_name = data['name'].toString();
				var fb_category = data['category'].toString();
				if(data['founded']) {
				var fb_founded = data['founded'].toString();
				}
				var fb_talking_count = data['talking_about_count'].toString();
				var fb_website = data['website'].toString();
				var fb_link = data['link'].toString();
				fb_count = add_commas(fb_count);
				fb_talking_count = add_commas(fb_talking_count);
				
				$('.facebook_about').html(fb_about);
				$('.facebook_likes').html(fb_count);
				$('.facebook_name').html(fb_name);
				$('.facebook_link').html(fb_link);
				$('.facebook_website').html(fb_website);
				$('.facebook_talk_count').html(fb_talking_count);
				$('.facebook_category').html(fb_category);
				$('.facebook_founded').html(fb_founded);
				$('.facebook_cover_page').html('<img src="'+ data.cover.source + '">');
				jQuery('#cover-page').hide();
		 } else if(data.error)  {
			alert(data.error.message);
			jQuery('#cover-page').hide();
		 } else {
			alert('No Fan Page Found');
			jQuery('#cover-page').hide();
		 }
		
	  });
	});
	
	$.getJSON('https://graph.facebook.com/freewebmentor.com?callback=?', function(data) {																   
		var fb_count = data['likes'].toString();
		var fb_about = data['about'].toString();
		var fb_name = data['name'].toString();
		var fb_category = data['category'].toString();
		var fb_founded = data['founded'].toString();
		var fb_talking_count = data['talking_about_count'].toString();
		var fb_website = data['website'].toString();
		var fb_link = data['link'].toString();
		fb_count = add_commas(fb_count);
		fb_talking_count = add_commas(fb_talking_count);
		
		$('.facebook_about').html(fb_about);
		$('.facebook_likes').html(fb_count);
		$('.facebook_name').html(fb_name);
		$('.facebook_link').html(fb_link);
		$('.facebook_website').html(fb_website);
		$('.facebook_talk_count').html(fb_talking_count);
		$('.facebook_category').html(fb_category);
		$('.facebook_founded').html(fb_founded);
		$('.facebook_cover_page').html('<img src="'+ data.cover.source + '">');
	});

		
	});
	</script>

100

101

102

103

104

$(document).ready(function() {

function add_commas(number) {

if (number.length > 3) {

var mod = number.length % 3;

var output = (mod > 0 ? (number.substring(0,mod)) : '');

for (i=0 ; i < Math.floor(number.length / 3); i++) {

if ((mod == 0) && (i == 0)) {

output += number.substring(mod+ 3 * i, mod + 3 * i + 3);

} else {

output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);

}

return (output);

} else {

return number;

}

//GET BROWSER WINDOW HEIGHT

var currHeight = $(window).height();

$('#sidebar, #content').css('height', currHeight);

//ON RESIZE OF WINDOW

$(window).resize(function() {

//GET NEW HEIGHT

var currHeight = $(window).height();

//RESIZE BOTH ELEMENTS TO NEW HEIGHT

$('#sidebar, #content').css('height', currHeight);

});

jQuery('.fetch_fanpage').on("click", function(e) {

var username = jQuery("#username").val();

if(username == '') { alert('Enter Username'); return false; }

jQuery('#cover-page').html('<img src="fb_loader.gif">');

jQuery.getJSON('http://graph.facebook.com/'+username+'?callback=?', function(data){

if(data.username) {

var fb_count = data['likes'].toString();

var fb_about = data['about'].toString();

var fb_name = data['name'].toString();

var fb_category = data['category'].toString();

if(data['founded']) {

var fb_founded = data['founded'].toString();

}

var fb_talking_count = data['talking_about_count'].toString();

var fb_website = data['website'].toString();

var fb_link = data['link'].toString();

fb_count = add_commas(fb_count);

fb_talking_count = add_commas(fb_talking_count);

$('.facebook_about').html(fb_about);

$('.facebook_likes').html(fb_count);

$('.facebook_name').html(fb_name);

$('.facebook_link').html(fb_link);

$('.facebook_website').html(fb_website);

$('.facebook_talk_count').html(fb_talking_count);

$('.facebook_category').html(fb_category);

$('.facebook_founded').html(fb_founded);

$('.facebook_cover_page').html('<img src="'+ data.cover.source + '">');

jQuery('#cover-page').hide();

} else if(data.error) {

alert(data.error.message);

jQuery('#cover-page').hide();

} else {

alert('No Fan Page Found');

jQuery('#cover-page').hide();

}

});

$.getJSON('https://graph.facebook.com/freewebmentor.com?callback=?', function(data) {

var fb_count = data['likes'].toString();

var fb_about = data['about'].toString();

var fb_name = data['name'].toString();

var fb_category = data['category'].toString();

var fb_founded = data['founded'].toString();

var fb_talking_count = data['talking_about_count'].toString();

var fb_website = data['website'].toString();

var fb_link = data['link'].toString();

fb_count = add_commas(fb_count);

fb_talking_count = add_commas(fb_talking_count);

$('.facebook_about').html(fb_about);

$('.facebook_likes').html(fb_count);

$('.facebook_name').html(fb_name);

$('.facebook_link').html(fb_link);

$('.facebook_website').html(fb_website);

$('.facebook_talk_count').html(fb_talking_count);

$('.facebook_category').html(fb_category);

$('.facebook_founded').html(fb_founded);

$('.facebook_cover_page').html('<img src="'+ data.cover.source + '">');

});

</script>

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Get facebook fan page details using jquery

Recommended Posts:

webmentor