I am trying to hack a little this facebook javascript code to make a call on an other js if the GET failed.
I have something like this :
<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/yi_YI/all.js#xfbml=1&appId=###";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="###" data-num-posts="10" data-width="646"></div>
Which give a 403 Forbidden (/* Not a valid locale. */). When it does something like this, I want to be able to load the en_US facebook sdk. So, I have tried :
<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/yi_YI/all.js#xfbml=1&appId=###";
try { fjs.parentNode.insertBefore(js, fjs); }
catch(err) {
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=###";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="###" data-num-posts="10" data-width="646"></div>
But, it doesn't work, keep getting 403 Forbidden, like if the try and catch(err) is not working.
You can't get the HTTP response status of a cross-domain request.
The reason you're getting a 403 is because Facebook doesn't support yi_YI as a locale – you will always get a 403. The locale you request must be on the list of supported locales.
use onerror method for script:
<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/yi_YI/all.js#xfbml=1&appId=###";
//handle loading error
js.onerror = function(){alert("script loading error")};
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="###" data-num-posts="10" data-width="646"></div>
Related
I am adding the facebook comments plugin to my website and have little coding knowledge.
I have added the following after the opening body tag:
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And the following where I want the comments to display:
<div class="fb-comments" data-href="https://www.bbuboxing.co.uk/featherweight.html" width="100%" data-width="100%" data-numposts="5">
If I or a visitor is not logged in to Facebook, the plugin displays a button saying log in to post but I can't click it to log in, the button isn't clickable.
How do I make it so that I(or a visitor) can click this button to log in?
you're missing your app id which needs to be appended to the end of the src property in the sdk script tag like this:
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11&appId=XXXX';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
replacing the XXXX with your registered facebook app id. if you haven't registered an app yet visit https://developers.facebook.com/ and go through the registration and signup process.
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 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 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.