I was reading facebook javascript SDK when I saw the following syntaxt that I don't understand:
(function(){...}());
Does anyone know what does it do?
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: 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);
}());
</script>
it's an anonymous function, that gets called immediately after its declaration. It's used to create local variables without clobbering up the global scope. the variable e will not be visible nor accessible outside the function block
Related
Facebook comments component load same JavaScripts many times and slows our page with 1.2+seconds sometimes load for 29sec
Please help.
the script is in the bottom of the HTML source, we get it from Facebook developer API
http://www.247polls.com/polls/should-marijuana-be-legalized/
FB.XFBML.parse();
Will load your comments even if the page loading has not been completed:
<script>
window.fbAsyncInit = function () {
FB.init({appId: 'YOUR-APP-ID', version: 2.4, xfbml: true});
if (typeof facebookInit == 'function') {
facebookInit();
}
};
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
function facebookInit() {
console.log('Loading comments...');
FB.XFBML.parse();
}
</script>
Another thing to improve the speed is limiting the count of comments to show with num_posts to 5.
Keep rocking!
add js.async=true; and make sure you follow this doc :
https://developers.facebook.com/docs/plugins/comments/
ref: https://geekflare.com/load-facebook-like-and-share-button-faster/
I have the following code in a script tag in my HTML page:
window.fbAsyncInit = function () {
if (FB != null) {
FB.init({
appId: 'myAppID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.getLoginStatus(function (response) {
console.log("callback");
}, true);
}
};
(function () {
var e = document.createElement('script'); e.async = true;
var protocol = "http:";
if (document.location.protocol == "https:")
protocol = "https:";
e.src = protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
The page is loaded in an Android WebView from a domain matching the registered one in FB's app settings.
For no apparent reason, the callback no longer fires. It worked just yesterday, but today it doesn't work, without me changing any code or app setting.
I placed a console.log() call before the getLoginStatus call, and it seems that the call itself is reached and executed; also I can see that some files are loaded from static.ak.facebook.com. It's just that the callback isn't called.
The application is not in a Sandboxed mode, which seemed to have caused this behavior for others.
I should also mention that the same code works perfectly in a standalone browser (desktop & mobile).
What gives?
I have a simple site, I want to code that when ever a user on my site Like my Page which is embeded in it another button should appear below it saying "Proceed to Next Step"
Hope so you got my idea.
So, in essence, you have to use the FB API to achieve what you want. Here is the example:
$(document).ready(function()
{
window.fbAsyncInit = function() {
FB.init({ status: true, cookie: true, xfbml: true });
FB.Event.subscribe('edge.create', function(href, widget)
{
//Liked event - do something here
$('#something').show();
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
});
I am totally new to JavaScript and the Facebook SDK. Could someone describe in English the following feature:
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: 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);
}());
i.e. the standard way of "reading" this in English. The "(function (){" bit is where I fall over. I can see what it's doing: after running this bit async goes on and does the stuff in function(), but what JavaScript feature is this and what are the components?
The syntax is a little strange. The first bit
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
Is a function expression. In the context of its use, the developer could also have written:
function fbAsyncInit() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
See this JSFiddle for an equivalent. Either way, calling is identical:
fbAsyncInit();
the following code:
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
Is calling the Init function on the FB object and passing an object literal as a parameter.
This bit here takes a little more explanation:
(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);
}());
This article might help: What does this JavaScript/jQuery syntax mean?
All variables in JavaScript are 'hoisted' to global scope unless they are in a function. The convention you see is an anonymous function that is automatically invoked. We could have written:
function MyFunc(){
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);
};
MyFunc();
But that would have been extra code and extra variables in memory.
I'm trying to switch over to the new Facebook JavaScript SDK from the old JavaScript library (where I was using Connect) and I'm unable to get the permission dialog to appear. I'm trying to get the permission dialog that's shown under the "Data Permissions" section here.
My old call was this (with appropriate initialization):
FB.Connect.showPermissionDialog('publish_stream');
I tried changing to this (again, with appropriate initialization) but it's not working, it runs without error but the callback is never run:
FB.login(function(response)
{
if (response.session)
{
if (response.perms)
{
alert('user is logged in and granted some permissions: ' + response.perms);
}
else
{
alert('logged in but didnt grant permissions');
}
}
else
{
alert('not logged in');
}
},
{perms:'publish_stream'});
This is the initialization code I'm using:
window.fbAsyncInit = function()
{
FB.init({appId: 'xxxxxxxx', status: true, cookie: 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);
}());
After MUCH tinkering around with the code trying to get this to work I finally found out where the error was. The JavaScript code needs to be place at the end of the HTML, near the </body> tag. I moved it there and everything worked!