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.
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.
Asynchronous JavaScript SDK
Color Indication Information:
- Your Application ID
Specify your Facebook application ID here.
Enjoy :-)
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&version=v2.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<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&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>
<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 :-)
47 comments:
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
You are welcome Nikki :)
Cheers...
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.
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...
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
<body <---this is the missing word in my earlier comment
Hi Dear,
Don't close <body tag manually. Just add JavaScript code in next new line :)
Cheers...
still no good,it ask me to close column :((
body expr:class='"loading" + data:blog.mobileClass' this is before,#add < > before body and after mobileclass,here wont allow comments with html
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...
hey,i figured it out,i put it outside the bracket,thanks a lot!!!:D
Glad you figured it out dear :)
Enjoy Blogging...
Cheers...
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?
Well you even see the thumbnail image right here.
Hi Denis,
Can you drop me your blog address? :)
Cheers...
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!
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...
Thank you Mayura! It did help mate :D !!!
Wish you good luck!
You are welcome mate :) Enjoy blogging...
Cheers...
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 ?
Hi Chris,
Can you drop me your site URL where you implementing comment social plugin here? :)
Cheers...
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
I'm trying to place the FacebookComments Plugin:
http://developers.facebook.com/docs/reference/plugins/comments/
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...
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
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...
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.
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...
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 :)
Ohw yeah :) Just noticed. Thanks for pointing it out mate. I ll correct it. Really appreciate your help mate :)
Have a great day !
Cheers...
thanks but I want to make user post one time to any page he visits
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...
Can you give an example with more complete?
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...
thankyou....,can you please tell me how to put facebook registration plugin in blogger
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...
where i get application id. i search so much but i didn't find it
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...
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...
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
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...
hii....cn i create facebook login...on a webpage on my local host
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...
thnx fr the code...i read the code...but i couldnt understand wats app-id
It's the same Application ID I've mentioned here in this post :) You can get an App ID here - Facebook App for Web.
hi i want to implement "login with facebook " button in the header of my website
please help
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...
Post a Comment