
Now a days, most of the web-based developers, whatever platform they works/specialized on (backend/front end/php/asp.net etc), do posses some JavaScript knowledge. Also, in almost all third-party apis, JavaScript implementation is very common. Facebook API isn’t different from that also. They do have a robust implementation of JavaScript API to access their data. In this tutorial, I will try to give an overview on the Facebook JavaScript api and show some examples that may help you to have a quick start.
Introduction To Facebook JavaScript SDK:
Among the all other platforms for developing Facebook application , JavaScript platform is very easy to use,integrate and light weight and can be used asynchronously, so can be used on external sites with minimal speed performance effects. There are also a several JavaScript ready code available for webmasters to use Facebook’s various functionality to integrate on their website without having to know any knowledge in JavaScript at all.
Implement Facebook Authentication Using JavaScript API:
Although, as like on other platforms, JavaScript also can access public data without any authentication, however I will start from authentication that will work as 2 in 1 solution, I guess. So, First step comes to use Facebook api is to authentication. However, although, Facebook authentication implementation on other languages like PHP/c# may seem a little complex to some developers. A matter of big relied is that, it’s really very simple and easy to implement authentication in case of JavaScript SDK. To begin, first register your Facebook application (by clicking the ‘Create New App button’). Now, go to the web page, on which, we need to implement the authentication. import the Facebook JavaScript SDK library on that page. Although it will work if you import it anywhere, but it’s always best practice to use import any js files(including this) at the bottom of the html body, just before closing the body tag(according to yahoo’s research of JavaScript performance).
use this code for importing the JavaScript SDK:
<script src="http://connect.facebook.net/en_US/all.js"></script>
Easiest way to authenticate is to use a facebook button , where user need to click for authentication. simple implimentation is as follows:
<fb:login-button autologoutlink="true" onlogin="OnRequestPermission();"> </fb:login-button> <script language="javascript" type="text/javascript"> FB.init({ appId: 'Your_Application_ID', status: true, cookie: true, xfbml: true }); </script>
The above code will render as a Facebook branded button which will show whether a user is logged in or not on your application/website. If not, it will show login text, after clicking on it, a small pop-up window will appear to the user with the request permission page. After use allows the permission, this window will close, the button will show logout text as user is now logged in after allows the permission.
Now, lets focus on the different parts from the above code. “<fb:login-button autologoutlink=”true” onlogin=”OnRequestPermission();”>” is a xfbml code blog which is rendered to functional html entity by JavaScript. Of course you need to tell fb that you are going to do this and thus, you will need to set the “xfbml” parameter to “true” on initialization. If you wish, you can also use your own designed button also. FB.Init() is the method triggered at document loading and it initializes the Facebook JavaScript api with your given settings like “appid”, “xfbml” etc. By the “status” parameter, you can tell the fb api whether to check the “login status” or not. By the “cookie” parameter, you are can tell whether to use cookie for saving the session state or not. Its important in the case, where you may want something to implement via server code. In those cases server will be able to get/retrieve the session status via cookie variables.
You can also implement this login functionality on some other way, on some other events. For that, please use “FB.Login()” method.
Call To Facebook Graph API From JavaScript:
Lets take a simple example to retrieve the user information who is currently using the application. Use the code as follows:
<button name="my_full_name" onclick="ShowMyName()" value="My Name" /> <script language="javascript" type="text/javascript"> function ShowMyName() { FB.api("/me", function (response) { alert('Name is ' + response.name); }); } </script>
The above code in turns calls the “https://graph.facebook.com/me” url and sets the returned JSON object to the ‘response’ variable. If you need to call some other type of api calls along with some parameters, then the first argument above will be a little different. Here is a javascript code samples that publish data to user’s Facebook timeline(user must have allowed ‘publis_stream’ access for this purpose. See facebook authentication guide for more about authentication details):
var message_str= 'Facebook JavaScript Graph API Tutorial'; FB.api('/me/feed', 'post', { message: message_str}, function(response) { if (!response || response.error) { alert('Couldn't Publish Data'); } else { alert("Message successfully posted to your wall"); } });
References:
Here I have tried to give you a very basic introductory overview and examples for facebook javascript API. You can refer to the official facebook javascript API documentation for more details options you can use. Also, you will be able to test and run your javascript api code in the javascript test console. Here are the links to those resources:
Happy coding 🙂
Hi,
Thank you very much to post this. It helped me a lot to complete my application.
Thanks a lot.
Good article. Thanks for putting this information. Great help ;-Q
😀 thnks for the info 😉 🙁 8) (^^^) :putnam: :42: 😛
i got this in popup dialog : An error occurred. Please try again later.
Awesome easy tutorial! 🙂 thanks a lot! better than facebook’s tutorial 😀
It’ s definitely much better then the facebook’s one. Nice work. Clear and easy to follow tutorial.
Thanks a lot before, how can i add some permission to access more information from users in that js code???
Great post. Here is a blog post I recently wrote that explains how to actually log a user into your site using “Login with Facebook.” I was surprised that I couldn’t find a great example of how to complete the process.
Basically, the Facebook Javascript API returns an access token to your client-side code. You can then submit that token to the server, use it to fetch the user’s Facebook UserID using the Social Graph API, which you can use as the unique ID for all users in your system (who are using Facebook credentials for login).
https://www.modernsignal.com/overview_of_login_with_facebook
I searched everywhere for three days, I am glad you provided a clear and perfect explanation to this…
Thanks a million!
Nice Tutorial.
Thankyou very much.
Hello Sir, I want to add button of add photos on my web application like facebook
And then I want to share selected image on facebook wall.
Please give me code or Any Idea. My EmailID is gautammithilesh15@gmail.com.
Thanks
Thank you sir, finally a post that makes sense. Facebook API docs are the stupidest and most unorganized thing i’ve ever seen. Thanks for these instructions!
Hello Ali Ahsan i really liked your post!
But when i pasted the code of updating the status from your website, it gave me the error “Couldn’t Publish Data” which might be because of response error. Can you tell me why am i getting the error?
Hello sir,
I’m trying to post an image on facebook page with different login not as a admin of the page. But i’m getting authorization issue. How can i achieve that using javascript API code. Please help kindly.
after clearing history in firefox …im getting error “Not Logged In: You are not logged in. Please login and try again” when i try to login with facebook …can anybody help me ??
Hi There!
I’m glad to finally find some example on Facebook’s Javascript SDK coding, I’m tryng to control an facebook video player embeeded on my website with no success, i just want to apply the “.pause()” method to stop the player sound from an external button (this button also hides the player and unhide another one via CSS, using jquery addClass / removeClass.
Thank you in advance for your help.
Thanks BRO! I’m found this article on 15 page in gnoogle. You must be FIRST!
fb v13 , don’t have publish stream , it post to page, but not to timeline, what is solution ?