I have a problem with executing javascript with .load function in jquery.
In my main js file I have something like it:
var dt = new Date();
$(".pp_social").load("trackingCode.html?"+ dt.getTime());
and in trackingCode.html
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="www.blah.com" data-send="true" data-width="450" data-show-faces="true"></div>
When I run it for the first time is fine.
Then any next time I invoke it, it omits javascript part.
Any ideas what coluld be wrong and why?
Cheers,
Bartek
Well, your script creates an element and gives it the id value "facebook-jssdk". There's a line at the top:
if (d.getElementById(id)) { return; }
Thus, once it's created the element, it'll never do anything again.
Related
I've added Facebook like button plugin on my website everything works perfectly, except one thing: the plugin loads after the rest of the page is fully loaded and it doesn't look properly. There is a script template for that plugin:
<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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I tried to add js.async = true; But it didn't work. Any other ideas?
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.
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>
If you go to here you will see a facepile half way down the page:
http://www.flirtwithme.co/main.php#home
Then if you click on another tab (across the top) like profile or mail and then go back to the 'Home Tab' the facepile doesn't appear again.
The page is using AJAX to replace the middle DIV.
This is the facepile code that is on the DIV that is being replaced:
<div id="fb-root"><fb:like-box href="facebook.com/seemeagaindating" width="237" height="498" show_faces="true" stream="false" header="true"></fb:like-box></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/all.js#xfbml=1&appId=192869610731913";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Can anyone give me advise on how to get the facepile to appear after I move between Tabs/DIV's.
thankyou
this is the code that worked:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
Hum .. Maybe you should insert the FB script and the #fb-root div on your main page (with no ajax) :
<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/all.js#xfbml=1&appId=192869610731913";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
And then add the likebox in your ajax content.
<fb:like-box href="facebook.com/seemeagaindating" width="237" height="498" show_faces="true" stream="false" header="true"></fb:like-box>
To be honest, I haven't tested this, so I don't know if it'll work but I think it could be a solution or at least a way to the solution.
(you don't have to put your like-box in the #fb-root div. It'll just be used to load stuff from facebook.)