Facebook Canvas APIs to SetSize Completely Broken - javascript

I am currently trying to solve an issue so that my facebook application is resized appropriately as it is currently getting cut off before the bottom (Aka you can't scroll to the bottom of my hosted app using the scrollbar.) I have spent a lot of time trying to figure out this issue so any help would be appreciated. Currently my calls to FB.Canvas.setSize({ height: 2000 }); return true however nothing happens and I still cant reach the bottom of my app. I even tried calling on a button click however I still get the same result.
Update: After trying some ideas, I was able to get this to work if I load the Facebook SDK sync into my homepage and call setSize there. However I still am not having any luck when it is loaded Async or Sync into a different page that my canvas navigates to? Just setting the size on my homepage won't work since each page has a different size. Has anyone seen issues like this
Here is the code:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXX', // App ID
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : false // parse XFBML
});
FB.Canvas.setSize({ width: $(document).width(), height: $(document).height() });
setFriends();
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
$(document).ready(function() {
if (FB && FB.Canvas) {
FB.Canvas.setSize({ width: $(document).width(), height: $(document).height() });
}
});

I just had a similar problem creating an app for a client. I couldn't get the scroll bars to drop. Finally got those to go away and then had the same issue as you with it cutting off the bottom of my app. Here's the the link to the forum post at which I found it. Facebook changed just a bit of code:
Instead of FB.Canvas.setSize() it's now FB.Canvas.setAutoGrow().
Hope it helps.
http://facebook.stackoverflow.com/questions/8559679/remove-horizontal-and-vertical-scrollbar-from-facebook-apps

I usually call setSize without any parameters and that seems to work for me.
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
What do you have your Canvas height set to in the advanced app settings? I found using "fluid" caused problems and had to set it to "Settable (Default: 800px)".

I really was hoping to explicitly set the size since it doesn't change outside of page load. I didn't want to have the extra perf costs of Facebook checking for resize every time interval and changing the size based off of that.
Good call. This advice from http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/
To reduce your users CPU cycles, you can also use the setSize function.
FB.Canvas.setSize
Once you’ve loaded the Javascript SDK, you can use FB.Canvas.setSize() to get rid of those scrollbars. Put the following code before the closing HEAD tag on your index page:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1400 });
}
</script>
This tells Facebook to resize your iFrame once the page has loaded and again whenever the size of your content changes.
Again, these functions will only work if you set your Canvas Height to “Settable.”

Related

How to display a gif of preload while loading comments facebook?

I have a javascript code customized so that when scroll down the page to where is the facebook comment box not loaded. At the time the scroll reaches the site comments are loaded and appear.
But it takes about two seconds and I would like to appear while charging a lively until comments are fully charged gif.
I tried to add but does not disappear when displaying the comments. Probably because javascript really do not know when they have been fully charged comments.
Is there any way to fix it?
function loadAPI() {
var js = document.createElement('script');
js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=73773988950&version=v2.0';
document.body.appendChild(js);
}
window.onscroll = function () {
if (document.getElementById("coments")) {
var rect = document.getElementById('coments').getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadAPI();
window.onscroll = null;
}
}
Actually if dynamic content itself place a gif you know that javascript knows what he is charging and shows once loaded, removing the gif.
Put the loading gif in a <div> where you later want your facebook comments to appear and load the facebook comments into that div instead of appending them to the <body>.
Have the following tag:
<body onload=" myFunction()">
With a javascript function myFunction() to display an image only.
Just had a quick look , and apparently you can't use onload with div, however there is a full discussion here:
Onload-in-div-whynot

jwplayer 6: how to dynamically load file, using javascript api?

I am trying to migrate from jw5 to jw6.
In jw5, I was able to dynamically load a video:
myplayer.load({file: 'myfile.mov', image: 'mysplash.jpg'});
This does not work in jw6. I have spent a lot of time looking through the online documentation, and have not found any references to .load. I am beginning to fear this is no longer supported. The document 'migrating from jw5 to jw6' has this cryptic comment:
The jwplayer().setup() call is now the only valid method to embed media
Does this mean it is no longer possible to dynamically load the player with a new file, for example in response to a click event, using the javascript api? Must all files be specified in a playlist, during the initial player setup?
Thank you.
I got this problem too and I found what is the issue.
Instead of JWP5, JWP6 does not work with the load() function if no media is specified upon setup.
If I used this code:
jwplayer("container").setup({
width: 640,
height: 480
});
after that, the load() function is not working.
The workaround is to specify initial some existing dummy media file:
jwplayer("container").setup({
width: 640,
height: 480,
file: '/some/summy/file.mp4'
});
after that JavaScript function load() can load new media.
This is the BUG !!!
You should still be able to use the load() call in JW6. http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
load(playlist)
Loads a new playlist into the player. The playlist parameter is required and can be either an array with playlist items or a string that points to the location of an RSS feed.
If you are having issues getting load() to work in JW6, please provide an example for debugging, thanks.
This is an old post however i would like to give an example of what i would do (JWplayer6)
var playerInstance = undefined;
button.onclick = function(newData){
if (playerInstance === undefined){
playerInstance = jwplayer("myElement");
playerInstance.setup({
width: 640,
height: 480,
file: newData
});
} else {
playerInstance.load(newData);
}
};
Dummy content loads the player with data the user may not want, and the bonus of pre-loading the player on the page offers only a slight advantage to loading on a request. (waiting for the player js to execute)

Using jQuery to insert Javascript code into a DIV

Okay, so I'm working on a responsive site and I'm trying to handle Adsense in the best way possible that doesn't get me banned! What I'd like to do is use jQuery to add in my Adsense code only if the browser width is less than 533px. This way, I can display a smaller ad that will fit the window properly and not break the layout. I'm having some trouble getting the Adsense javascript added though. This works:
(function($){
//detect the width on page load
$(document).ready(function(){
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 533){
$('.ads').prepend("THIS IS WHERE I WANT THE ADSENSE CODE TO GO");
}
});
But when I include my Adsense code to replace THIS IS WHERE I WANT THE ADSENSE TO GO, it doesn't. This is the Adsense code:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I've also tried to include the Adsense javascript code in a .html file and use jQuery.get and jQuery.getScript for a .html and .js file. I just can't get it to work.
I could do it with a simple PHP header detect, but I want the ads to display based on width, not device type.
Anybody know how this can be done?
(Reposted as no replies to previous question)
I'm not sure if this will work or not, but it's worth a shot:
/* these should be global */
google_ad_client = "ca-pub-1234567890";
/* Test Ad */
google_ad_slot = "1234567890";
google_ad_width = 250;
google_ad_height = 250;
$(function(){
//detect the width on page load
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 533){
$.getScript('http://pagead2.googlesyndication.com/pagead/show_ads.js');
}
});
The problem you're facing is that Google doesn't really support AdSense ajax. The normal way of including adsense code uses the URL of the page where it lives in order to render the right content.
Now, suppose you could reduce the adsense code to a particular URL. You could do something like this:
// note, this url is just a suggestion, not something that will likely work
var url = 'http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1234567890&ad_slot=1234567890&ad_width=250&ad_height=250';
var adsContainer = $('.ads'); // though, if there's only one, use id, not class
$.ajax({
type:'GET',
url:url,
async:true,
success:function(html) {
adsContainer.html(html);
return false;
},
error: function(html) {
adsContainer.html('SOME DEFAULT AD MESSAGE');
return false;
}
});
But I think this is almost assuredly the kind of thing that will get you in trouble with Google.
Google used to have an adsense ajax program:
https://developers.google.com/adsense-for-ajax/
But it is now "unavailable". The reason you can't put your code in an external .html or .php file and ajax on your own server is that the javascript doesn't get executed by an engine on the client side by the ajax call. You are injecting raw javascript into a page that has already been interpreted by the javascript engine.
Could you use node.js or some kind of server side javascript parser to serve your .html file? Maybe, but that's a lot to solve this problem.
My advice is this: include multiple, smaller ads that will look good if stacked on a big page, or tiled if crammed together on a small page.
Have you tried lading the external .js like this?
var script = document.createElement('script');
script.src = 'http://pagead2.googlesyndication.com/pagead/show_ads.js';
script.type = 'text/javascript';
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);

Google Chrome/Windows/FB.Canvas.setAutoGrow issue

The issue is obvious here.
https://www.facebook.com/TabascoUK/app_202624839826809
Using Google Chrome on Windows XP, FB.Canvas.setAutoGrow miscalculates frame size by two pixels. I would report it as a bug, but (1) I didn't manage to reproduce the same behavior on all computers, even though they have the same setup. (2) I've looked at the all.js and it looks Okay – no obvious reason for the error.
I've tried reseting cache, updating browser, etc. But there still is 2px error.
What can be causing it?
I haven't had any issues long time ever since this was posted. But since Chuck Morris seems to be experiencing the same issue, I will share my experience.
First of, I had erroneous assumption that FB.Canvas.setAutoGrow can be called at any time in code. It made sense since it then starts interval, which should detect any DOM changes. Well, it isn't exactly that way.
Anyway, the trick is to load Facebook JS after the DOM is loaded. In my experience this helps to get around all glitches. If you are using jQuery, something like this will do.
$(function(){
window.fbAsyncInit = function()
{
FB.init({/*[..]*/});
FB.Canvas.setAutoGrow(91);
FB.Canvas.scrollTo(0,0);
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
});
Guy,
I really appreciate you following up on this, I was really hoping that your way was going to work in my setup, because it's a lot cleaner than my hack fix, but it's still miscalculating the iframe by 2pixels. Anyways, this is what I did just in-case if anyone runs into this.
window.fbAsyncInit = function() {
FB.init({/*[..]*/});
// Additional initialization code here
FB.Canvas.setAutoGrow(91);
FB.Canvas.scrollTo(0,0);
//FB.Canvas.setAutoGrow is miscalculating the height by 2 pixels in webkit browsers
//so we shorten the content by 2 pixels right away, and a second later if things were a little too slow
window.setTimeout(function() {
$("#footer").css("height", "74px");
}, 250);
window.setTimeout(function() {
$("#footer").css("height", "72px");
}, 1000);
};
I had the same issue and i found i was added
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
But in chrome you have to add by the following way
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
Different protocol not work in chrome always use https
or the best way could be
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

Facebook: Howto remove vertical scrollbar of iFrame in Application Tab

I've finished up my facebbok App and currently got stuck when watching the application as an facebook application tab....: the vertical scrollbar is displayed.
Actually I've used the following code to auto resize the application iframe:
window.fbAsyncInit = function() {
FB.init({appId: FBAPP_ID, status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize(100);
//FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
The iframe successfully gets resized when I load the application tab, but the vertical scrollbar is visible. The body of my app has a width of 520px, the application settings are set to auto-size and iframe-mode. When I add overflow:hidden to the html-element the scrollbar is not visible - but I dont want to use overflow:hidden on the html-tag because the page is also be available as standalone-page.
Does anybody has some ideas how to get facebook to hide the vertical scrollbar when the content fits the iframe height? (or is this currently a facebook problem (...again) ?
Thanks in advance
Denis
After trying all of the solutions here, the final one which made the difference in Firefox was adding overflow: hidden for both the <html> and <body> styles.
CSS code as follows:
html {
overflow: hidden;
}
body {
width: 520px;
margin: 0;
padding: 0;
overflow-x: hidden;
}
IE7 also sometimes shows scroll bars unless you set <body scroll="no"> so keep that in mind also.
There have been issues with this feature since iframe tabs were introduced. The bug tracker contains quite a bunch of related reports. Basically, our experience is that it is completely unreliable. Sometime it works as advertised, sometimes it only works in some browsers, sometimes it works depending on the way you load the JavaScript SDK, sometimes one method works and the other doesn't, and sometimes it does not work at all.
This is the code that I use that works for me
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '7575671676127', //enter your app id here
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true// parse XFBML
});
FB.Canvas.setAutoResize(7);
</script>
Go to your App Settings -> Facebook Integration and choose "IFrame Size" = Auto-resize
Just make sure, you put overflow:hidden style rule for body element. Other case the firefox sometime decides to show the scrollbar anyway.
Actually FB.Canvas.setAutoResize() is known now as FB.Canvas.setAutoGrow();
it refresh every 100 milliseconds
Facebook docs
so code should look more-less like this atm
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '666',//your app id
status : true,
cookie : true,
xfbml : true
});
FB.Canvas.setAutoGrow();
</script>

Categories

Resources