By: Prem Tiwari | Last Updated: | In: Facebook, Javascript & Ajax, PHP Tutorial
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> |
.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
