I am using FB like button on my webpage, sometimes it render and sometimes its not, When I see console for Error Log it showing error
The "fb-root" div has not been created, auto-creating
in all.js
I am using this 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/en_US/all.js#xfbml=1&appId=105911812857824";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true">
</div>
Use this following 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/en_US/sdk.js#xfbml=1&appId=694586437259261&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and also put this code also
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>
You have to provide data-href="your link for like" that will work for you.
There's a newer way to initialize the API.
You can put the appId in the init method instead of embedded in the URL.
They don't even suggest you use fb-root anymore. In fact I don't really see why you ever needed to. You'll still get a warning in the console but I don't see any reason to worry about putting it in manually.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.3'
});
};
(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'));
</script>
Related
I have logged in fb account to have session.
I have whitelisted my domain.
I followed below as listed in Send to Messenger Plugin
(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.com/en_US/messenger.Extensions.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));
Then I have,
<div class="fb-send-to-messenger"
messenger_app_id="xxx" #another question, is this same as the FB.init({appId: xxx})
page_id="fb_page_id"
data-ref="<PASS_THROUGH_PARAM>"
color="blue"
size="xlarge">
</div>
I already set up configurations in Facebook Developer page (see attached).
I put the facebook like button code as suggested by facebook developer documentation.
<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_GB/all.js#xfbml=1&appId=416733691671772";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.domain.com/" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-action="recommend" data-colorscheme="dark" data-font="arial"></div>
Strange thing is that, the code of facebook like button is there when I inspect element in firefox and chrome. And its showing on my localhost as well..
To debug problems with the 'Like' button, always use the Facebook debug tool: http://developers.facebook.com/tools/debug
I am trying to add facebook like to my mediawiki skin.
I have the code:
<html xmlns:fb="http://ogp.me/ns/fb#">
<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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "facebook-jssdk"));
</script>
<fb:like href=' . urlencode($wgTitle->getFullURL()) . ' send="true" width="450" show_faces="false"></fb:like>
On the pages where facebook like shows up I get the error FB.Type.createClass2 is not a function in firebugs and on other pages it simply doesn't show up and there is no error.
How do I get it to show up on every page?
Embed the Like button like this:
<div class="fb-like" data-href=" . urlencode($wgTitle->getFullURL()) . " data-send="true" data-width="450" data-show-faces="false"></div>
Case 1:
I use this code:
(from http://www.mybloggertricks.com/2011/06/add-facebook-like-button-below-post.html)
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>
When I click "like", a confirm button comes and when I click like in the new popup window that comes up, I am redirected to https://www.facebook.com/plugins/error/like/confirm
Case 2. I use an iframe from facebook developers,
<iframe src="//www.facebook.com/plugins/like.php?href=data:post.url&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80&appId=324750880918583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
the "data:post.url" used under href does not give me the url of the blog, but the string itself.
Case 3. So I tried the XFBML version from the link in Case 2, part of the code of which is:
<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_GB/all.js#xfbml=1&appId=324750880918583";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This is the error that blogger shows when I try to save the template.
Error parsing XML, line 1201, column 68: The reference to entity
"appId" must end with the ';' delimiter.
Fixing any one of the above would help me greatly.
You have to cut this script from the HTML:
<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_GB/all.js#xfbml=1&appId=324750880918583";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
then go to Blogger Layout, Add a Gadget, HTML/JavaScript, then past the script there.
This should work! :)
I am having problem in getting response from facebook login button.
And will be very thankful for any instant help.
I am using following 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/en_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
... but I am getting the error in my javascript console : "FB is not fefined " and no alert message for auth responeId is recieved to me.
Please help its very important
Or if you want to still load the JS SDK async style, you can wire up your event handlers in the window.FbAsyncInit() like such:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
};
<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_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1">
</div>
<script type="text/javascript">
FB.Event.subscribe('auth.authResponseChange', function(response) {
if(response.status=="connected")
{
document.getElementById("fblogin").value=response.authResponse.userID;
}
});
</script>
You can see this style (which is Facebook's preferred style) documented here: https://developers.facebook.com/docs/reference/javascript/
You are loading facebook javascript sdk asynchronously through following 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/en_GB/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
So, your FB is not defined until it gets loaded.
Try loading FB syncronously. Put following code and remove the above one,
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>