Facebook Like Box Disappearing - javascript

So whenever I add the first part of this script (everything from window.fbAsyncInit all the way to FB.Canvas.setAutoResize(100);), my Facebook Like Box doesn't pop up.
All I'm trying to do is remove the iframe scrollbars for the Like Box, which obviously has to be done in the submission to Facebook.
Why would adding this function at the top make the box disappear? How do I make the scrollbars go away?
I was trying to follow the instructions here:
http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
Here's my code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '388149184641600',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize(100);
(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=388149184641600";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


You're missing the closing bracket:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '388149184641600',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize(100);
}; // HERE
(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=388149184641600";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Related

Will fbAsyncInit() execute after the document is ready?

I have the following code from the Facebook's developer website:
window.fbAsyncInit = function() {
FB.init({
appId: '#SessionHelper.Current.partner.partnerVO.facebookID',
cookie: true, // enable cookies to allow the server to access
xfbml: true, // parse social plugins on this page
version: 'v2.3' // use version 2.2
});
UIAuthetication.initFacebook();
(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/" + HelperJSViewBag.getValue("Language") + "/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
This code is inside of a tag on my header. Want I want to know if the UIAuthetication.initFacebook(); line will be executed after all scripts of the page were loaded or if I should use $(document).ready to make sure that the UIAuthetication class will be available when the instruction UIAuthetication.initFacebook(); were called.

Can't connect to Facebook SDK.js with error status code 500

I'm getting a error 500 in the Chrome debugger trying to connect to the Facebook sdk.js file on this line
fjs.parentNode.insertBefore(js, fjs);
in the code here below that was working up to a few minutes ago.
Is there a limit on the number of times I can connecgt in a day or is the server down?
< script >
window.fbAsyncInit = function() {
FB.init({
appId: '1234',
xfbml: true,
version: 'v2.8',
cookie: true
});
FB.AppEvents.logPageView();
};
(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>

Would it matter where in the DOM tree that I insert the external JavaScript resource?

I am reading the official Facebook JS SDK script:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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>
It inserts the created <script> tag to the fjs.parentNode. Is that by design?
If I write replace:
fjs.parentNode.insertBefore(js, fjs);
with:
document.head.appendChild(js);
Would it still work?

Yes both will work but
fjs.parentNode.insertBefore(js, fjs);
This will insert JS before all JS file and other-side
document.head.appendChild(js);
This will insert after all JS in Head.

fb not defined for fb share dialog plugin

I have included following code in footer file of my project:
<script>
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init({
appId : '996999210390006',
xfbml : true,
version : 'v2.6'
});
};
(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'));
});
function sharefbDialog()
{
alert("fb");
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
}
</script>
Where i call sharefbDialog function onclick of anchor tag but it always gives fb not defined error. Initially I put fb.init code outside document.ready but even then it didn't work. I have look into all stackoverflow solution but no success.

you can also call the function this way.
<html5>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '996999210390006',
xfbml : true,
version : 'v2.6'
});
};
(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'));
function sharefbDialog()
{
alert("fb");
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
}
sharefbDialog();
</script>
<head>
<body>
<h2>Hello<h2>
<a href="" onclick="sharefbDialog();" >Testing </a>
</body>
</html5>

Google Analytics and FB's Like button

Hi I need track with google analytics how much people click on FB's Like button but it doesn't work (yes I read a few tutorials and still nothing).
I have this code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxx',
status: false,
cookie: true,
xfbml: true
});
FB.Event.subscribe('edge.create',
function(href, widget) {
$.fancybox.close('#div');
_gaq.push(['_trackSocial', 'facebook', 'like']);
}
);
};
(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=xxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
GA js code is in head tag and FB js code is immediately under body tag.
Thank for your time and your answer.

Categories