Skip to content

Instantly share code, notes, and snippets.

@wookiecooking

wookiecooking/index.html

Created May 14, 2013 03:40
Show Gist options
  • Save wookiecooking/5573507 to your computer and use it in GitHub Desktop.
Save wookiecooking/5573507 to your computer and use it in GitHub Desktop.
Download ZIP
[jQuery] Simple facebook JSON Pull
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
<![endif]-->
<style>
body {
font-size: 14px;
font-family: arial;
}
img.default {
float: left;
padding: 15px;
}
ul.profile {
padding: 25px;
list-style: none;
}
input.change {
float:left;
clear:both;
padding:2px;
margin:15px;
}
input.submit {
float:left;
padding:2px;
margin:15px 15px 15px 0px;
}
</style>
</head>
<body>
<h1>JQuery GETJSON facebook Example</h1>
<img src="" class="default" alt="">
<ul class="profile">
</ul>
<input type="text" placeholder="Username here" class="change">
<input type="button" value="change user" class="submit">
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
/* Generates the View */
var view = function(data) {
$(".profile").html('');
$(".default").attr('src', 'http://graph.facebook.com/' + data.id + '/picture?type=large').attr('alt', '' + data.name + '');
content = '<li><strong>User ID: </strong>' + data.id + '</li>';
content += '<li><strong>Name: </strong>' + data.name + '</li>';
if (data.gender) {
content += '<li><strong>Gender: </strong>' + data.gender + '</li>';
} else {
content += '<li><strong>Gender: </strong>None Listed</li>';
}
if (data.link) {
content += '<li><strong>Personal URL: </strong>' + data.link + '</li>';
} else {
content += '<li><strong>Personal URL: </strong>None Listed</li>';
}
if (data.locale) {
content += '<li><strong>Locale: </strong>' + data.locale + '</li>';
} else {
content += '<li><strong>Locale: </strong>None Listed</li>';
}
$(content).appendTo(".profile");
};
/* Dom Ready */
$(function() {
$.getJSON('http://graph.facebook.com/zuck', view);
});
/* Change Profile */
$(".submit").click(function() {
var profile = $('.change').attr('value');
$.getJSON('http://graph.facebook.com/' + profile + '', view);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment