Facebook / Gaurang Jadia

I was thinking to post from long time. I could not had time as I am busy these days because of school and work. I was reading new Facebook Graph API to solve one bug at my workplace. I could not find any straight forward example for that. So, I thought that I should post something so, it could be helpful for rookies and new bees…!!!

You can check out here. Example Page

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml" 
	xmlns:og="http://opengraphprotocol.org/schema/">
	<head>
		<title>Facebook New JavaScript SDK - Example</title>
		<meta property="fb:app_id" content="210189452626" />
		<meta property="og:title" content="Facebook New JavaScript SDK - Example" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://code.gaurangjadia.com/FacebookConnect/" />
		<meta property="og:site_name" content="Gaurang Jadia's Blog" />
		<style type="text/css">
			.right{
				border: 1px solid #ffffff;
				float:right;
				height:100%;
				overflow:scroll;
				width:258px
			}
		</style>
	</head>
	
	<body id="body">
		<div id="content" style="float:none; margin:0 auto; width:960px">
			<h1 style="text-align:center;">Facebook New JavaScript SDK - Example</h1>
			
			<div id="left" style="float:left; width:700px">
				<div id="like-button">
					<p>Facebook Like Button - Graph API</p>
					<fb :like></fb>
				</div>
				<div>
					<p>Facebook Connect as New JS SDK</p>
					<button id="fbLogin" type="button" onclick="javascript:fbLogin();">Facebook Connect - Login</button>
					<button id="fbLogout" style="display:none" type="button" onclick="javascript:fbLogout();">Facebook Connect - Logout</button>
				</div>
			</div>
			
			<div id="right" class="right">
				<p><strong>Console</strong></p>
				<ol>
					<div id="console"></div>
				</ol>
			</div>
		</div>
		<div id="fb-root"></div>
	</body>
	
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		google.load("prototype", "1.6.1.0");
		google.load("scriptaculous", "1.8.3");
		google.setOnLoadCallback(OnLoad);
		
		function consolelog(message){
			var li = new Element('li').update(message);
			$('console').insert(li);
		}
		
		function OnLoad(){
			consolelog('Google JavaScript API are loaded.');
			
			window.fbAsyncInit = function() {
				FB.init({appId: '210189452626', cookie: true, logging: true, status: true, xfbml: true});
				
				FB.Event.subscribe('auth.login', function(response) {
					consolelog('User is Logged In');
				});
				
				FB.Event.subscribe('auth.logout', function(response) {
					consolelog('Session was terminated!');
				});
				
				FB.Event.subscribe('edge.create', function(response) {
					consolelog("User liked <a target='_blank' href='" + response + "'>this page.</a>");
				});
			};
			(function() {
				var e = document.createElement('script');
				e.async = true;
				e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
				document.getElementById('fb-root').appendChild(e);
			}());
		}
		
		function fbLogout(){
			FB.logout(function(response) {
				$('fbLogin').show();
				$('fbLogout').hide();
			});
		}
		
		function fbLogin(){
			FB.login(function(response) {
				if (response.session) {
					$('fbLogin').hide();
					$('fbLogout').show();
					
					if (response.perms) {
						//To get all permissions granted by user.
						consolelog("<strong>Granted permissions:</strong> " + response.perms);
					} else {
						consolelog('User did not grant any permission');
					}
					
					//To get current user's profile picture
					var userImage = new Element("img", {"src":"https://graph.facebook.com/" + response.session.uid + "/picture"});
					$('console').insert(userImage);
					
					//To get user details
					FB.api('/me', function(response) {
						consolelog('Welcome <strong>' + response.first_name + ' ' + response.last_name + '</strong>!');
					});
					
				} else {
					consolelog('FB login was not successful.');
				}
			}, {perms:'publish_stream'});
		}
	</script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:fb="http://www.facebook.com/2008/fbml"

xmlns:og="http://opengraphprotocol.org/schema/">

<head>

<title>Facebook New JavaScript SDK - Example</title>

.right{

border: 1px solid #ffffff;

float:right;

height:100%;

overflow:scroll;

width:258px

}

</style>

</head>

<h1 style="text-align:center;">Facebook New JavaScript SDK - Example</h1>

<p>Facebook Like Button - Graph API</p>

</div>

<div>

<p>Facebook Connect as New JS SDK</p>

<button id="fbLogin" type="button" onclick="javascript:fbLogin();">Facebook Connect - Login</button>

<button id="fbLogout" style="display:none" type="button" onclick="javascript:fbLogout();">Facebook Connect - Logout</button>

</div>

<p><strong>Console</strong></p>

<ol>

</ol>

</div>

</body>

google.load("prototype", "1.6.1.0");

google.load("scriptaculous", "1.8.3");

google.setOnLoadCallback(OnLoad);

function consolelog(message){

var li = new Element('li').update(message);

$('console').insert(li);

}

function OnLoad(){

consolelog('Google JavaScript API are loaded.');

window.fbAsyncInit = function() {

FB.init({appId: '210189452626', cookie: true, logging: true, status: true, xfbml: true});

FB.Event.subscribe('auth.login', function(response) {

consolelog('User is Logged In');

});

FB.Event.subscribe('auth.logout', function(response) {

consolelog('Session was terminated!');

});

FB.Event.subscribe('edge.create', function(response) {

consolelog("User liked <a target='_blank' href='" + response + "'>this page.</a>");

});

};

(function() {

var e = document.createElement('script');

e.async = true;

e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

document.getElementById('fb-root').appendChild(e);

}());

}

function fbLogout(){

FB.logout(function(response) {

$('fbLogin').show();

$('fbLogout').hide();

});

}

function fbLogin(){

FB.login(function(response) {

if (response.session) {

$('fbLogin').hide();

$('fbLogout').show();

if (response.perms) {

//To get all permissions granted by user.

consolelog("<strong>Granted permissions:</strong> " + response.perms);

} else {

consolelog('User did not grant any permission');

}

//To get current user's profile picture

var userImage = new Element("img", {"src":"https://graph.facebook.com/" + response.session.uid + "/picture"});

$('console').insert(userImage);

//To get user details

FB.api('/me', function(response) {

consolelog('Welcome <strong>' + response.first_name + ' ' + response.last_name + '</strong>!');

});

} else {

consolelog('FB login was not successful.');

}

}, {perms:'publish_stream'});

}

</script>

</html>

Gaurang Jadia

Nothing is permanent except change

Category Archives: Facebook