We Keep Coding

Facebook plugin load

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?

Display variable inside JavaScript

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>

Show JavaScript on click

I have the following code
<div class="AW-Form-2026756516"></div>
<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 = "http://forms.aweber.com/form/16/2026756516.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "aweber-wjs-ielieh3he"));
</script>
It shows a lightbox subscription form.
But I would like this to be displayed once a user has clicked on a Button and not automatically.
<div id="subscribe">Subscribe</div>
Many thanks for your help.

Use onclick event
<div class="AW-Form-2026756516">
</div>
<script type="text/javascript">
function ShowSubscribe(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://forms.aweber.com/form/16/2026756516.js';
fjs.parentNode.insertBefore(js, fjs);
}
</script>
<div id="subscribe">
Subscribe</div>

Since you are using button to trigger event. Try this.
<div class="AW-Form-2026756516"></div>
<script type="text/javascript">
function ShowSubscribe()
{
(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 = "http://forms.aweber.com/form/16/2026756516.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "aweber-wjs-ielieh3he"));
}
</script>
<div id="subscribe">
<button onclick="ShowSubscribe()">Click me</button>
</div>

<div class="AW-Form-2026756516"></div>
<script type="text/javascript">
function ShowSubscribe()
{
(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 = "http://forms.aweber.com/form/16/2026756516.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "aweber-wjs-ielieh3he"));
}
</script>
<div id="subscribe">
Subscribe
</div>

Show or hide subscription form upon click

I have the following subscribe form:
<div class="AW-Form-2026756516"></div>
<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 = "http://forms.aweber.com/form/16/2026756516.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "aweber-wjs-kocxshsyj"));
</script>
I would like this to show or hide when the user clicks Subscribe button (Possibly dropdown effect or basic).
<div id="subscribe">Subscribe</div>
Many thanks for help.

You can do this:
$('#subscribe').click(function(){
$('.AW-Form-2026756516').slideToggle(); // or fadeToggle() or just toggle()
});

Validation failed because of a single character in Facebook Connect code

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.