September 17, 2011

How to Implement Facebook JavaScript SDK on Your Website




Have you ever heard of Facebook JavaScript SDK? If you have been trying out Facebook social plugins on your blog / website, then I'm sure you are familir with that term. Facebook plugins need to communicate with Facebook servers whenever they populate information and deal with user interactions. Due to this phenomenon, Facebook uses JavaScript functionality for their plugins. But JavaScript SDK provides many features like ensuring appropriate plugin being rendered on your site, authenticating users, sharing and more.

If you are using XFBML version of the Facebook plugins on your site, then you have to include Facebook JavaScript SDK to enhance the performance and functionality of your plugins. However you can use JavaScript SDK for different purposes.

If you are just looking forward to show social plugins, then the Basic JavaScript SDK is pretty enough. Even you can use the Facebook plugins without being a Facebook memeber too.

But if you wish to access more advanced features such as Authentication, Server-side API calls and so on, you need a Facebook application to initialize the JavaScript SDK. There you have to implement Asynchronous JavaScript SDK with Application ID, which requires you to be a Facebook user.

Asynchronous JavaScript SDK is the most efficient compared to Basic JavaScript SDK. Asynchronous version ensures faster web page loading, so you find minimum impact on the performance.

I don't know what's your next intention to use Facebook JavaScript SDK, but I'll walk you through both implementations and the choice is yours.


Steps:

The implementation is quite easier than you imagined. Just pick the right version for you and add the code snippet right after the <body> tag in your site's source code.

Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.


Basic JavaScript SDK

You can use this version of JavaScript SDK if you are not seeking for advanced features. If you just need to render only Facebook social plugins, this will be enough for you.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.2";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Asynchronous JavaScript SDK

This version of JavaScript SDK can be used to access more advanced features.

Note: To implement this version of JavaScript SDK, you need an Application ID to use with. Read How to Create a Facebook Application for Your Site.

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : '[Your Application ID]',
      xfbml  : true,
      version: 'v2.2'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>


Color Indication Information:

   - Your Application ID

Specify your Facebook application ID here.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* If you got any questions not related to this post, please ask it at our Support section.

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.

* Experiencing problems when commenting? Please report them at our Support section.


Nikki Rae said...

OMG I finally found the opening body tag and implemented the facebook java script sdk!!! Thank you sooooo much for your help!!! It took forever but I finally did it! Now on to the like box implementation... I will be asking more questions lol

Mayura De Silva said...

You are welcome Nikki :)

Cheers...

Nikki Rae said...

I did it! I finally got the like button on my blog but I'm worried it doesn't work. I do have some likes but those have come from the facebook fan page directly not from people clicking "like" on my blog.

Mayura De Silva said...

Hi Nikki,

The reason is you have implemented like button with thee reference to your Facebook page dear :) That's why it populates Facebook page fan count. If you wanna implement Facebook like button for Blogger posts, read Add Facebook Like Button for Blogger Posts.

Cheers...

yuk1e said...

hello,i have a problem,please help me,in my blogger template,there's only "".i closed it and it worked..but after that this script appear on my blog at the top left "expr:class='"loading" + data:blog.mobileClass'>"..i tried closing this too and this didnt work

yuk1e said...

<body <---this is the missing word in my earlier comment

Mayura De Silva said...

Hi Dear,

Don't close <body tag manually. Just add JavaScript code in next new line :)

Cheers...

yuk1e said...

still no good,it ask me to close column :((

yuk1e said...

body expr:class='"loading" + data:blog.mobileClass' this is before,#add < > before body and after mobileclass,here wont allow comments with html

Mayura De Silva said...

Hi Dear,

Preview your comment before publish it so you can see if it's rendering correctly :)

Now close your template editor without saving anything and open it again. Then add JavaScript SDK as below after body tag,

<body expr:class='"loading" + data:blog.mobileClass'>

[Add JavaScript SDK Here]

Cheers...

yuk1e said...

hey,i figured it out,i put it outside the bracket,thanks a lot!!!:D

Mayura De Silva said...

Glad you figured it out dear :)

Enjoy Blogging...

Cheers...

Denis said...

Hi there,
I have the same issue as yuk1e had. I tried what you have recommended but it didn't work. Also, my profile thumbnail has turned in to this: http://4.bp.blogspot.com/_9fTnB6RpmVA/TNBdrIcVhlI/AAAAAAAAAgQ/GMmLVsg8ClY/S220/Blog%2BPic.jpg

Any idea please?

Denis said...

Well you even see the thumbnail image right here.

Mayura De Silva said...

Hi Denis,

Can you drop me your blog address? :)

Cheers...

Denis said...

Thanks for a quick response Mayura, you're awesome! ;)
My blog is www.stillischill.com
The thumbnail issue as I mentioned seems to be solved for now, last night it was showing black and white exclamation mark in a triangle.
Thanks!

Mayura De Silva said...

Alright mate :) I was wonder what's going on. 'Cause profile picture has nothing to do with JavaScript SDK :) Glad it resolved by now. However to get rid of text appeared on top, you gotta follow 2 steps mate :)

i. Find expr:class='"loading" + data:blog.mobileClass'> in your template and remove it.

ii. Find <body> in your template and replace it with <body expr:class='"loading" + data:blog.mobileClass'>.

Save your template and that's all mate :)

Cheers...

Denis said...

Thank you Mayura! It did help mate :D !!!
Wish you good luck!

Mayura De Silva said...

You are welcome mate :) Enjoy blogging...

Cheers...

Chris said...

Dear Mayura,

I've been trying to place a "Facebook Comments Plugin" on my website for days now, I'm so frustrated.

I'm using SeaMonkey. I copy the SDK code after my <body tag, and then the plugin code where I want it, and when I go back to preview mode, ABSOLUTELY NOTHING HAPPENS. Not even a blank space, nothing. It's like I have done nothing.

I doing everything by the rules as Facebook commands, but no results. I have an APP ID and everything. Java Oracle is installed.... Everything.

Am I doing something wrong ?

Mayura De Silva said...

Hi Chris,

Can you drop me your site URL where you implementing comment social plugin here? :)

Cheers...

Chris said...

Awesome ! Thank you so much Mayura for giving it a look...

Here is a simple one I prepared, it's using the HTML code
I use for all my webs:

http://www.chrissyler.com/chrissylerformayura.html

I'm sure it has to be the placement of the code, I think it's a <div
code that's giving the problem.

I really appreciate your help ! Thank you so much !

Chris

Chris said...

I'm trying to place the FacebookComments Plugin:

http://developers.facebook.com/docs/reference/plugins/comments/

Mayura De Silva said...

I just looked into your page. But I couldn't find Facebook code there. Just follow these steps,

i. Add JavaScript SDK to your site as described in this post.

ii. Add Facebook Comment plugin code to your site.

Then let me know :)

Cheers...

Chris said...

Mayura, I'm so sorry, I sent you the wrong HTML.

Here is the link, and it has JavaScript the codes in it (both the JavaScript and Facebook plugin. At this link:

http://www.chrissyler.com/chrissylerformayura2.html

Thank you again so much for helping me out Mayura ! I really appreciate
it ! Let me know please. Thanks.

Chris

Mayura De Silva said...

Hi Chris,

Seem you have implemented JavaScript SDK correctly :) But comment box code is not correct mate. Add comment plugin code again to your site. If you want, you can refer - How to Add Facebook Comment Social Plugin to Your Website. If your comment plugin not rendering, please drop your question under that post mate :)

Cheers...

James Parker said...

This is a great extension, very easy to install and works in minutes.Once you have designed your Facebook app this creates authorization much smoother.

Mayura De Silva said...

Yep :) If you wanna go live with Facebook and its plug-ins, you should make use of this mate. Thanks for your compliments mate :)

Cheers...

Eugeniu Rubliovschi said...

hey there

at the "JavaScript SDK with Application ID" in the grayish area you left "/script>" out of the grayish area, it might confuse people up :)

Mayura De Silva said...

Ohw yeah :) Just noticed. Thanks for pointing it out mate. I ll correct it. Really appreciate your help mate :)

Have a great day !

Cheers...

Sobhynajjar said...

thanks but I want to make user post one time to any page he visits

Mayura De Silva said...

Hi Mate,

I didn't get your query. However here this post is not about any plugin. It's about JavaScript SDK - a functionality. What do you referring to? :)

Cheers...

Putri Arisnawati said...

Can you give an example with more complete?

Mayura De Silva said...

You just need to add it to your site after including relevant details mate :) There's nothing you need to change or so.

Why you wanna add JavaScript SDK? Unless you gonna use Facebook plugins on your site, there is no need of adding JavaScript SDK.

Hope it helps :)

Cheers...

Prashanth Reddy said...

thankyou....,can you please tell me how to put facebook registration plugin in blogger

Mayura De Silva said...

Hi Prashanth,

You're welcome mate :) Unfortunately I have no tutorial for Registration plugin. Also on Blogger if you use registration plugin, you need to have sign up form to make it worthy. Blogger itself has no way to register users. Anyway you may Google for it and there may be some resources on it.

Cheers...

jazz said...

where i get application id. i search so much but i didn't find it

Mayura De Silva said...

Hi Jazz,

You can find application ID at your Facebook application page. If you have no application created, read subtitle "JavaScript SDK with Application ID" again and create a Facebook application.



Cheers...

Mayura De Silva said...

Hi Jazz,

Most probably Facebook is thinking your site is a spammy one. Anyway is there any Facebook likes already or not? Try creating like box again and paste on your site to see if it works again. You can refer here and try creating like box too ~ How to Add Facebook Like Box to Your Website.

If you have more questions about Like Box, post your comments there.

Cheers...

Nicole said...

Hi ......... i just created faceboook login for my webpage using javascript sdk .. im not able to store user details in mysql database.... can u give code and help me

Mayura De Silva said...

Hi Nicole,

This post is about implementing JavaScript SDK only dear :)

You can take a web search for this purpose. Here's one related forum post ~ Store Facebook User Information in MySQL.

Cheers...

neha said...

hii....cn i create facebook login...on a webpage on my local host

Mayura De Silva said...

Hi Neha,

You can and if your localhost has the access to Internet as well :)

I've just elaborated implementing Facebook JS SDK here. For your purpose, you may want to refer to this documentation - Facebook Login for the Web with the JavaScript SDK.

Hope it helps :)

Cheers...

neha said...

thnx fr the code...i read the code...but i couldnt understand wats app-id

Mayura De Silva said...

It's the same Application ID I've mentioned here in this post :) You can get an App ID here - Facebook App for Web.

Suprriya Abhijit Sonawaane said...

hi i want to implement "login with facebook " button in the header of my website
please help

Mayura De Silva said...

Hi Supriya,

Make sure you have Asynchronous JavaScript SDK implemented. Then you can grab the Login Button code here - Facebook Login Button.

Further, refer to the documentation for more information - Facebook Login Documentation.

Hope they help :)

Cheers...