CODEWITHSUNDEEP
jqueryhtmlfacebook-graph-apiphoto-gallery
bhavs
bhavs

Reputation: 2301

display gallery of a facebook page in a html website

I am a newbie at html, facebook graph api, jquery.

I have the following code to obtain all the albums in a facebook fan page ( not a general profile) to display it in a simple format, I do not see any errors in the developer console of chrome, but the photos are not being displayed. Any ideas on how I view all the pics from the facebook fan page ?

<!DOCTYPE html>
<html>
 <head>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
     1.4.2/jquery.min.js"></script>
 </head>
  <body onLoad="fbFetch()">


  <script>
     function fbFetch(){

      var url = "https://graph.facebook.com/160407767374259/photos?limit=5?callback=";


        $.getJSON(url,function(json){
           var html = "<ul>";


        $.each(json.data,function(i,fb){
          html += "<li><img alt='"+ fb.from.name +"' height='" + fb.height + "' width='" +
    fb.width + "' src='" + fb.picture + "'/></li><div style='clear:both;'>&nbsp;</div>";
});

html += "</ul>";


$('.facebookfeed').animate({opacity:0}, 500, function(){
 $('.facebookfeed').html(html);
 });
 $('.facebookfeed').animate({opacity:1}, 500);
 });
 };

Upvotes: 0

Views: 1778

Answers (1)

Popnoodles
Popnoodles

Reputation: 28419

You're missing the important DOM ready wrapper 

<script>
$(function(){ 
    // code here
}); 
</script>

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

working demo

Upvotes: 2

Related Questions