I was reviewing the script provided by Facebook in order to run it's authorization. I ran into this puzzling bit of code:
(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'));
As an unnamed function in its own scope, it would seem like this could never be called, but there it is, included in the boilerplate script.
What is going on here?
The function is an Immediatly Invoked Function Expression
(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'));
If you notice the function has 3 arguments d, s, id then you will notice the function body.. At the end it calls it self passing in the args document, script, facebook-jssdk.
All this function does is creates a script such as.
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/sdk.js"></script>
and inserts it before the first script tag in the document.
Related
function init() {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1111";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))
}
window.onload = init;
Despite the fact that I am calling facebook comments plugin on load still i am getting a minus score on web-vitals
as its part of Main-Thread Blocking Time.
You should use a Web Worker to load the facebook_comments plugin.
Web Workers are a simple means for web content to run scripts in background threads.
Here's an example:
facebook_comments.js:
function init() {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1111";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'))
}
and then load it via the web worker:
new Worker('facebook_comments.js');
That should load the script in a background thread, resulting to an optimized TBT.
I want to change a hyperlink inside a script with a variable. It's the FB SDK, i want to display the SDK in the language the user chose on my website.
The variable is {$lang_fb} and returns the correct result (here:en_US) if I use it in normal php.
If I use the variable inside a script on a plain HTML page there is no result.
The 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/{$lang_fb}/sdk.js#xfbml=1&version=v2.5&appId=01234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
<script>
results in the identical code in the page
What can I do?
If you are in a PHP script, you need to put the php tags or escape the string.
Way one
<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/<?php echo {$lang_fb} ?>/sdk.js#xfbml=1&version=v2.5&appId=01234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Way two
<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/".{$lang_fb}."/sdk.js#xfbml=1&version=v2.5&appId=01234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
If you don't share more code we can't view what happens.
The soluition:
js.src = "//connect.facebook.net/{/literal}{$lang_fb}{literal}/sdk.js#xfbml=1&version=v2.5&appId=1234567890";
Thanks for your help!!!
Since you are using a file extension, that is not PHP related, you need to setup php to process this extension.
For apache you can do this with the file .htaccess:
AddHandler application/x-httpd-php .tpl
Of course you also need to require the Facebook SDK which creates {$lang_fb}.
$lang_fb is a php variable and will not work in javascript. Are you embedding your script tag within php file? If yes then you can simply use the following:
<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/"+<?php echo $lang_fb; ?>+"/sdk.js#xfbml=1&version=v2.5&appId=01234567890";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I keep getting the following error:
Invalid App Id: Must be a number or numeric string representing the application id. all.js:53
FB.getLoginStatus() called before calling FB.init().
I have tried fixing this by making a new app id and pasting it in the code, but it doesn't seem to work.
This is my code:
<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/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I'm building a simple web-widget similar to Facebook Like button, and I want to set some parameters(ex. websiteId) to use them in my dynamically added script(http://analytics.dev/bundles/andreistatistics/js/like-button.js).
My question is: is there a way to pass my param websiteId to use it in like-button.js file? I would also like to avoid conflicts with other wbesiteId params defined in DOM.
<div class="like-button-container"></div>
<script>
(function(d, s, id) {
var websiteId = 7;
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "http://analytics.dev/bundles/andreistatistics/js/like-button.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'my-like-button'));
</script>
I am trying to use some Facebook code in one of my pages.
The code is:
<script type="text/javascript">(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/all.js#xfbml=1&appId=000000000";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
However when I try to validate this as an XHTML+RDFa page I get an error. The error is caused by the & sign in this part "xfbml=1&appId". The WC3 validator recommends using:
&
even in urls it says.
However, when I change the ampersand sign to:
&
The script no longer works.
Is there a way to get this to work correctly and still validate?
You should be able to get it to validate by wrapping the code in a CDATA tag, like so:
<script type="text/javascript">(function(d, s, id) {
//<![CDATA[
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/all.js#xfbml=1&appId=000000000";
fjs.parentNode.insertBefore(js, fjs);
//]]>
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
/*<![CDATA[*//*---->*/
(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/all.js#xfbml=1&appId=000000000";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
/*--*//*]]>*/
</script>
Much of JavaScript will not be interpreted correctly by the XHTML parser. You need to escape it with CDATA.