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
CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!--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> |
Jquery Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <!--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> |
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.
Article Tags: Facebook, Javasrcipt, Jquery