Set page tab content height

Question

How can I set the hight for my page tab content that is from a google site? It works fine, I just want the vertical scroll bars not to be longer than the actual facebook page size.

The code I'm using now

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({
    appId      : '576155032405795',                        // App ID from the app dashboard

  });

  FB.Canvas.setAutoGrow();
};

// Load the SDK asynchronously
(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";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Anvesh Saxena · Answer 1 · 2013-05-13T05:24:42.633

0

You may want to look into the setAutoGrow() or setSize() functions of JavaScript SDK. Both may help you but you will have to judge which one to use, from the setAutoGrow()'s documentation

This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles).

and from setSize()'s documentation

Call this whenever you need a resize. This usually means, once after pageload, and whenever your content size changes.

So you need to judge accordingly.

Edit

I would like you to use setAutoGrow() function in your code. You will need to put this code in the page that is been rendered within the Page Tab. And as you have mentioned that is your content is retrieved from page within your Google sites, then this is where you would be required to add the code.

You will have to insert the following code within your page just after the body opening tag

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({
    appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
  });

  FB.Canvas.setAutoGrow();
};

// Load the SDK asynchronously
(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";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Here the channel.html will contain just the following line of code

<script src="//connect.facebook.net/en_US/all.js"></script>

edited May 13 '13 at 05:24

answered May 12 '13 at 07:27

Anvesh Saxena

4,458
2
23
30

Thank you for your answer. I don't know much about coding, so I might need some extra help if you dont mind. I found a similar quastion that you answered and there was a piece of code there to do what I guess I want to get. I understand that I have to use either of those functions that you suggested, but I don't know where to insert the code. As I described in my original quastion, the content of my page tab is pulled from a site on Google sites. Is that where I have to place the code? – Zoltán Regőczy May 13 '13 at 01:35
@ZoltánRegőczy I have edited my answer. I guess that just solve the problem that you are facing. Reply back if face any further problem – Anvesh Saxena May 13 '13 at 05:26
well, the only problem is, that Google sites does not allow to upload individual html files. only I can copy the content to a new page. – Zoltán Regőczy May 13 '13 at 06:51
I also tried the following code I found in another answer of yours, but it did not work either: – Zoltán Regőczy May 13 '13 at 07:10
Did you get any error over the console or was there no change and scroll bars were still there? Cause the code you have mentioned should have worked. Also check if you added `// Load the SDK asynchronously (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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));` this code also to load SDK. – Anvesh Saxena May 13 '13 at 07:35
No error message, scroll bar still there. I added the code to load SDK. I don't know if it is important, but Google sites only allowes me to add extra code to the page in a HTML box. – Zoltán Regőczy May 13 '13 at 08:43
It would be nice if you could share the code in your question that you are using at present – Anvesh Saxena May 13 '13 at 08:44
I just did. Its basically tha code you gave me except for the line for channel URL. – Zoltán Regőczy May 13 '13 at 09:00
I'm sorry to bother you again, but would you be so kind to take a look at the code I put in my question? – Zoltán Regőczy May 15 '13 at 20:10
I am sorry for my delayed comment. Code looks correct, and should work. Could you provide the link to your page tab, if you could? Also could you just add the channel URL to check if that could be making error. – Anvesh Saxena May 16 '13 at 04:10
my page tab URL: https://sites.google.com/site/regoczyvendeghaz/ And I would also like to comment that I get the following error message to the first line of the code in the HTML field editor of Google sites: 1+36 - 78: failed to load external url all.js – Zoltán Regőczy May 16 '13 at 07:39
The page tabs url, the one having the issue. Also, you may remove the earlier comment. If you want – Anvesh Saxena May 16 '13 at 07:44
1

maybe it is not even possible ti insert this code to Google sites. take a look at this: Tips for writing HTML with the HTML Box tool: Code from one HTML box can’t interact with or refer to code outside of the HTML box, including other HTML boxes. This I found here: https://support.google.com/sites/answer/2500646?hl=is – Zoltán Regőczy May 16 '13 at 07:52
What do you mean by that: "The page tabs url, the one having the issue." – Zoltán Regőczy May 16 '13 at 08:01
By that I meant the URL for your Page Tab where this page is getting rendered.Also, have you added the complete code that you have inserted in question in the HTML box, along with the `
` and the script ? Cause, I couldn't find the `div` within your page. Also try adding `` and remove channel url from `FB.init`. Just read the documentation on the HTML box. I think you wont be able to make Facebook work as it works by loading stuff within an iFrame, which it doesn't supports. – Anvesh Saxena May 16 '13 at 08:21
Also, I might suggest you that you could utilize the [Heroku option](https://developers.facebook.com/blog/post/558/) and create your page tab embedding your page and load the file from Heroku's server where you can add the JavaScript required to work. Maybe that way you can make the things work – Anvesh Saxena May 16 '13 at 08:25
sorry, I got it wrong. My Page Tab URL is: https://www.facebook.com/RegoczyVendeghaz/app_576155032405795
included now, was added, channel URL removed.
– Zoltán Regőczy May 16 '13 at 08:36
Yes, I might have to try that, because it seems Google sites have limitations. – Zoltán Regőczy May 16 '13 at 09:01
Heroku command line tool is damn difficult to use for me, so I might just build my content in Wordpress that I know well and look for some free or cheap SSL. I picked Google sites to host my content because they provide free SSL, but it looks like they have other limitations :) – Zoltán Regőczy May 17 '13 at 04:00

Set page tab content height

1 Answers1