Facebook Example File

On 02.13.12, In web, by Samuel east
This is a simple example facebook starter file that i use sometimes to quickly grab some very basic principles off facebook
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.friends {
	float: left;
	display: block;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID GOES HERE', status: true, cookie: true, xfbml: true});
		
		/* All the events registered */
     FB.Event.subscribe('auth.login', function(response) {
         // do something with response
         login();
     });
     FB.Event.subscribe('auth.logout', function(response) {
         // do something with response
         logout();
     });
 
     FB.getLoginStatus(function(response) {
         if (response.session) {
             // logged in and connected user, someone you know
             login();
         }
     });
	 
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());
	
 function login(){
                FB.api('/me', function(response) {
                    document.getElementById('login').style.display = "block";
                    document.getElementById('login').innerHTML = response.name + " succsessfully logged in!";
                });
            }
            function logout(){
                document.getElementById('login').style.display = "none";
            }
			
			function userInfo(){
                FB.api('/me', function(response) {
					
			$.post("post.php", { 
								bio: response.bio,
								birthday: response.birthday,
								email: response.email,
								first_name: response.first_name,
								last_name: response.last_name,
								name: response.name,
								gender: response.gender, 
								id: response.id 
								},
   function(data) {
     alert("Data Loaded: " + data);
   });
                   
                });
            }
 
            //stream publish method
            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){
                FB.ui(
                {
                    method: 'stream.publish',
                    message: '',
                    attachment: {
                        name: name,
                        caption: '',
                        description: (description),
                        href: hrefLink
                    },
                    action_links: [
                        { text: hrefTitle, href: hrefLink }
                    ],
                    user_prompt_message: userPrompt
                },
                function(response) {
 
                });
 
            }
            function showStream(){
                FB.api('/me', function(response) {
                    //console.log(response.id);
                    streamPublish(response.name, 'Thinkdiff.net contains geeky stuff', 'hrefTitle', 'http://thinkdiff.net', "Share thinkdiff.net");
                });
            }
			
			 function allUser(){
                FB.api('/me', function(response) {
                  console.log(response);
                });
            }
			
			function showStatus(){
               FB.getLoginStatus(function(response) {
  if (response.session) {
	  
   console.log(response.session);
   
   
  } else {
   console.log('not connectted');
  }
});
            }
			
			
 function friends(){
	
	$('.link').click(function(){
	//alert();
		
			 var publish = {
  method: 'friends',
  id: $(this).attr("title"),
};
 
FB.ui(publish);
		return false;		
	});
		
 
            }
			
			
 
            function share(){
				
			 FB.ui({
    method: 'stream.share',
    u: 'http://example.com/add_new_user.php/'
  }, 
  function(response) { alert(response); }
 );
 
            }
 
            function graphStreamPublish(){
                var body = 'Reading New Graph api & Javascript Base FBConnect Tutorial from Thinkdiff.net';
                FB.api('/me/feed', 'post', { message: body }, function(response) {
                    if (!response || response.error) {
                        alert('Error occured');
                    } else {
                        alert('Post ID: ' + response.id);
                    }
                });
            }
 
            function fqlQuery(){
                FB.api('/me', function(response) {
                     var query = FB.Data.query('select uid, name, pic_square, email from user where uid=me() or uid IN (select uid2 from friend where uid1=me())', response.id);
                     query.wait(function(rows) {
	                 
                       document.getElementById('name').innerHTML =
					     'Your id: ' + rows[0].uid + "<br />" +
                         'Your name: ' + rows[0].name + "<br />" +
						 'Your email: ' + rows[0].email + "<br />" +
                         '<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";
                     });
                });
            }
 
            function setStatus(){
                status1 = document.getElementById('status').value;
                FB.api(
                  {
                    method: 'status.set',
                    status: status1
                  },
                  function(response) {
                    if (response == 0){
                        alert('Your facebook status not updated. Give Status Update Permission.');
                    }
                    else{
                        alert('Your facebook status updated');
                    }
                  }
                );
            }
			function showFriends(){		
			 FB.api('/me', function(response) {
								 var query = FB.Data.query('select uid, name, pic_square, email from user where uid=me() or uid IN (select uid2 from friend where uid1=me())', response.id);
								 query.wait(function(rows) {
									http://www.facebook.com/profile.php?id= 
								 console.log(rows);
								 var html = '';
								   FB.Array.forEach(query.value, function(rows) {
									 html += '<div class="friends"><p>' + rows.name + '</p>' + '<a class="link" title="' + rows.uid + '" href="http://www.facebook.com/profile.php?id=' + rows.uid + '" onclick="friends(); return false;">link</a>' +
									 '<img src="' + rows.pic_square + '"></div>';
								   });
								   document.getElementById('display').innerHTML = html;
							  
								 });
							});
			}
</script>
<p>
  <fb:login-button autologoutlink="true" perms="email,user_likes,user_checkins,user_interests,user_hometown,user_photos,user_relationships,user_relationship_details,user_religion_politics,status_update,publish_stream,user_about_me"></fb:login-button>
</p>
<p> <a href="#" onclick="showStream(); return false;">Publish Wall Post</a> | <a href="#" onclick="share(); return false;">Share With Your Friends</a> | <a href="#" onclick="graphStreamPublish(); return false;">Publish Stream Using Graph API</a> | <a href="#" onclick="fqlQuery(); return false;">FQL Query Example</a> <a href="#" onclick="showFriends(); return false;">FQL Query Show Friends</a> <a href="#" onclick="showStatus(); return false;">FQL Query ShowStatus</a> <a href="#" onclick="userInfo(); return false;">UserInfo</a> <a href="#" onclick="allUser(); return false;">All User info</a> <a href="#" onclick="friends(); return false;">Friends</a> </p>
<textarea id="status" cols="50" rows="5">Write your status here and click 'Status Set Using Legacy Api Call'</textarea>
<br />
<a href="#" onclick="setStatus(); return false;">Status Set Using Legacy Api Call</a> <br />
<br />
<br />
<div id="login" style ="display:none"></div>
<div id="name"></div>
<div id="display"></div>
</body>
</html>