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
|
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 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> <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> |
Like tag seems to be wrong in that code… should be like on working example page
Well, I have !!! But, I have added OpenGraph Tags in my page meta!!!
I’m new to web related stuff, so please spare if my question is trivial. What is the role the web server plays over here ? I tried to run your html file from the local file system, but that doesn’t work. Error console shows an error “FB not found”. I’m trying to understand if the FB javascript sdk has to be used in conjunction with a web server, or if it can be used stand alone in local static html files. What is expected of the web server?
Also, can you please share your application settings ?
Hello Kumar, I guess new Facebook JavaScript SDK is more clean but not like previous REST API. It is more specific in terms of usability.
When you get FB not found or undefined that means that object is not initiated properly. Here, FB [Object object] is undefined.
Now, about using webpage on localhost. My Facebook App has Callback URL, pointing to my hosted domain. If you want to use my example on the localhost then you need to register a Facebook App at http://www.facebook.com/developers/ and set up Callback URL.
If you have some questions then feel free to ask.
I’m not sure if I was able to communicate my question well. If I have a HTML file in my local directory, and load into the browser as say file:///home/user/fb.html, is it possible that I’ll be able to authenticate and make use of FB API ?
Basically I tried the javascript sdk (http://github.com/facebook/connect-js) example file jquery/login.html, and I tried running it from the local disk. It logged me in, but wasn’t able to make API calls (didn’t get a session. response.session was NULL).
Is what I’m trying to do possible?
Check OnLoad() function in the code.
window.fbAsyncInit = function() {
FB.init({appId: ‘210189452626’, cookie: true, logging: true, status: true, xfbml: true});
};
(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);
}());
You need to register your Facebook App and replace your appId with my appId, which is “210189452626”. Here is link to screenshot of my setting page. http://gaurangjadia.com/blog/2010/06/07/facebook-javascript-sdk-with-graph-api-and-prototype-js/facebookappsetting/
I tried changing the application setting’s URL to localhost, as in the screen shot you shared with me, and checked again (just to be clear, I’m loading file:///tmp/Facebook_JS_SDK.html in my browser).
Upon a little debugging, figured out that the document.location.protocol is ‘file:’, and the page was trying to load the facebook js from local file. I corrected that, but it still doesn’t take me very far. I do get a popup login window, and I’m logged in successfully, but after that it does nothing. (I do get actually logged into facebook, but the console log in your html indicates a failed login).
Would it be possible for you to try this and let me know how it goes?
Thanks a lot for your help.