PDA

View Full Version : Anyone know how to size content inside of an iFrame? Get rid of scrolling bars.



Harold Mansfield
03-05-2012, 09:14 PM
As most of you know, the new Facebook developers thing is is based on iFrames. Which suck.

And the new Facebook tabbed pages dimensions are either 520px wide, or 810px wide.

iFrames are notorious for the scroll bars. Particularly if the content isn't perfectly sized at the source to fit into the iframe's size.
I'm fine adjusting the size of the iFrame for anything that falls in between those sizes. But I can't resize the content at the source to fit into the iFrame if it's wider than 810px.

So, there has to be a way to kind of "squeeze" the content so that it is sized to fit into the frame, and thus alleviating the need for left-right, top-bottom scroll bars.

Oh yeah. That works across all browsers.

Anyone have any tips or tricks on this?

vangogh
03-06-2012, 12:35 AM
I don't think you can ever control the content inside the iframe unless Facebook gives you that option. I thought they did allow you to set the width and height when creating the code, but maybe that was the old code. You can get rid of the scrollbars with



iframe {overflow: hidden;}


That will clip anything outside of the width and height of the iframe though and you won't be able to see it. Unless the contents inside the iframe are under your control you're going to be at the mercy of the site that does control the content. Check Facebook again though. I'm pretty sure they give you some control over the width and height of their widgets. Here's a link to the activity widget (http://developers.facebook.com/docs/reference/plugins/activity/). It looks like they let you set the width and height.

Is that what you're looking for or am I misunderstanding the question?

Harold Mansfield
03-06-2012, 12:46 AM
I don't think you can ever control the content inside the iframe unless Facebook gives you that option. I thought they did allow you to set the width and height when creating the code, but maybe that was the old code. You can get rid of the scrollbars with



iframe {overflow: hidden;}


That will clip anything outside of the width and height of the iframe though and you won't be able to see it. Unless the contents inside the iframe are under your control you're going to be at the mercy of the site that does control the content. Check Facebook again though. I'm pretty sure they give you some control over the width and height of their widgets. Here's a link to the activity widget (http://developers.facebook.com/docs/reference/plugins/activity/). It looks like they let you set the width and height.

Is that what you're looking for or am I misunderstanding the question?

No, you are speaking of the Facebook widgets and tools that they have for you to place on your website.

I'm speaking of creating custom tabs for your pages. They are rolling out timelines for Pages now, and all old HTML apps will be obsolete (June 2012) and the only way to create a custom tab on your page menu, is to create it as an app through Facebook Developers.

So, now the pages can be made in 2 sizes. 520px or 810px.

Now, I want to use an iFrame to display existing content from another URL. The max width of the FB page is 810px. The actual width of the content page is 1000px.
There has to be a way to make that content display at a max of say....800px ( basically shrinking it to fit inside of the iFrame) and still see 100% of it. No scroll bars.

Or maybe I don't even need the iframe. I just need to take that 1000px page and make it fit into a 800px area.

vangogh
03-06-2012, 01:33 AM
Oh, my bad. I did misunderstand.

Is the URL you want to include in the iframe one your control? If not I don't think you can control it. It's a security issue to not let one domain control the content on another domain and the content inside an iframe is on another domain. You'd need to have control over the page you want to include. If you do then you could add some css to that page like

iframe body {width: your-width; height: your-height;}

I'm not sure if that would work, but I think it would.

Harold Mansfield
03-06-2012, 01:36 AM
Yes, I do have control over the original content.
So you're saying I can control the iFrame out put from the CSS of the original content?

Hmnn. Interesting.
I'll give it a shot.

vangogh
03-06-2012, 10:53 AM
If you control over the content then you should be able to make it work. I'm not sure if what I suggested above will work, but it was my first thought to target the page only when it's in the iframe, but using iframe in the css. That may not work since your page may not be aware it's inside of an iframe. The more I think about it, the more I'm thinking it won't work, though it's easy enough to try and find out.

I have a feeling you may need to use some javascript to test if the page is inside an iframe or not and based on that have the javascript add a class to the html or body tags. You could test for


if (top != self)

in javascript on your page and then assign a class to the body or whatever element to change the width of the page.

Harold Mansfield
03-07-2012, 02:13 PM
Turns out that I also jumped the gun on the whole iFrame thing. Yes, it's one way of doing it, but turns out you can use almost any HTML file, but for some reason you have to make it a php file.
If you connect your tab content to a .html file, the whole thing won't work.
Really strange.

billbenson
03-07-2012, 03:02 PM
Turns out that I also jumped the gun on the whole iFrame thing. Yes, it's one way of doing it, but turns out you can use almost any HTML file, but for some reason you have to make it a php file.
If you connect your tab content to a .html file, the whole thing won't work.
Really strange.

That sounds like some sort of server issue Harold.

Harold Mansfield
03-07-2012, 03:16 PM
That sounds like some sort of server issue Harold.
That's what I thought too. I just can't wrap my head around what it could be because the files work when you open them in browsers.

MyITGuy
03-08-2012, 12:44 PM
Might be best to use PHP files anyway, this way you can use some SDK to determine if they have liked your page. If they haven't then they don't have access to the rest of the web content until they do.

Harold Mansfield
03-08-2012, 04:35 PM
Might be best to use PHP files anyway, this way you can use some SDK to determine if they have liked your page. If they haven't then they don't have access to the rest of the web content until they do.
I've got to learn more about that. If I can get that little thing down, it will be a tremendous help since the option of a "Welcome " page is also gone with timelines for pages.

MyITGuy
03-08-2012, 11:43 PM
I've got to learn more about that. If I can get that little thing down, it will be a tremendous help since the option of a "Welcome " page is also gone with timelines for pages.

Here's the SDK: https://github.com/facebook/php-sdk
Heres a YouTube video showing a few items: Create custom tabs on your Facebook page with iframes - YouTube (http://www.youtube.com/watch?v=iCUF3zV9xj0)

Harold Mansfield
03-09-2012, 10:43 AM
Yeah, I've been doing the new tabs thing since I switched over my own FB page. About 2 weeks now. I'm probably going to avoid iFrames unless I really need them to mimick something without having to rebuild it.

brbrown1988
03-15-2012, 09:45 AM
Hey guys. I've seen a lot of misinterpreted info on here so I figured I'd thrown in my own two cents. If any of these issues have been handled already, just ignore them.

First thing, PHP files are not a requirement to use in frames. Html works great with a few adjustments. CSS can definitely be used with inline styles or in reference to an external stylesheet on your server. On a recent test page I built, I set the wrapper width to 810px in my stylesheet and it looked great at first. However, I still noticed the scroll bars coming in and out. So I added the code below to my html to solve the issue:


<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>


Oddly enough, this clears the scroll bars 95% of the time on Safari & Chrome, but I still occasionally see them revisit. When they do, a hard refresh seems to reset them. Not sure if this would help, but I would also consider building your apps to 800px instead of 810px to allow room for the scroll bars (I think this was mentioned already). I tried this with the old app size and had no issues.
Not so sure now.

Also, I'm new to the forum thing...so if I did anything stupid I apologize in advance.

Brad

Harold Mansfield
03-15-2012, 10:55 AM
Hey guys. I've seen a lot of misinterpreted info on here so I figured I'd thrown in my own two cents. If any of these issues have been handled already, just ignore them.

First thing, PHP files are not a requirement to use in frames. Html works great with a few adjustments. CSS can definitely be used with inline styles or in reference to an external stylesheet on your server. On a recent test page I built, I set the wrapper width to 810px in my stylesheet and it looked great at first. However, I still noticed the scroll bars coming in and out. So I added the code below to my html to solve the issue:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Oddly enough, this clears the scroll bars 95% of the time on Safari & Chrome, but I still occasionally see them revisit. When they do, a hard refresh seems to reset them. Not sure if this would help, but I would also consider building your apps to 800px instead of 810px to allow room for the scroll bars (I think this was mentioned already). I tried this with the old app size and had no issues.
Not so sure now.

Brad

Thanks for chiming in Brad. Interesting that you mentioned this. I too had a fix at first that seemed to work, until the next day I went back and the scroll bars were back, and I haven't been able to get them to go away again. Even by recreating exactly what I did before.

I've been making my app/page sizes 780px wide. That seems to be the one dimension that get's rid or the bottom scroll bar no matter what. 750px (height) seems to be the optimum height to be without the up/down scroll bar.

As far as the iFrame and an HTML page. I may have confused the points. Yes, using an iframe, the content can be from anywhere. But when I make my apps/pages direct ( no iframes) and just build the code straight.. HTML page don't work on the Facebook end. I get an error message. When I change it to a PHP file, no problem. The content pops right up on the Facebook page.

But now that I've had to to play with it, I've decided not to use iframes at all anymore for Faceboook. I've checked out some other pages for inspiration, both large and small companies and seen some iframed pages, and it is not a good look. Mainly because almost all of them have scroll bars. It takes me back to the 90's when the internet was a little more "raw".

billbenson
03-15-2012, 11:30 AM
I still think the php thing is a server issue?? Did you try it on a different server?

Harold Mansfield
03-15-2012, 11:41 AM
But the files work. Facebook is where I'm getting the error message. That's why I don't see where the server issue is. I don't have a problem on that end.

brbrown1988
03-15-2012, 12:11 PM
Thanks for chiming in Brad. Interesting that you mentioned this. I too had a fix at first that seemed to work, until the next day I went back and the scroll bars were back, and I haven't been able to get them to go away again. Even by recreating exactly what I did before.

I've been making my app/page sizes 780px wide. That seems to be the one dimension that get's rid or the bottom scroll bar no matter what. 750px (height) seems to be the optimum height to be without the up/down scroll bar.

As far as the iFrame and an HTML page. I may have confused the points. Yes, using an iframe, the content can be from anywhere. But when I make my apps/pages direct ( no iframes) and just build the code straight.. HTML page don't work on the Facebook end. I get an error message. When I change it to a PHP file, no problem. The content pops right up on the Facebook page.

But now that I've had to to play with it, I've decided not to use iframes at all anymore for Faceboook. I've checked out some other pages for inspiration, both large and small companies and seen some iframed pages, and it is not a good look. Mainly because almost all of them have scroll bars. It takes me back to the 90's when the internet was a little more "raw".

Haha, true. I wouldn't give up on frames completely though. I think its just another bug they have yet to solve, just like the recent padding issue that was throwing all apps past 760px off center. For now you might be right though. Truthfully, its a little ridiculous to design an app at less than the max allowed size. Definitely an issue that needs to be addressed by the Fb developer squad.

I would provide samples of my work, but the company I work for has yet to make the switch to the "timeline," so the apps are still 520px for the time being. I'm currently using the preview mode and designing the apps accordingly. I am still a little unsure why you were getting a error message. The first thing that comes to mind is to be sure you provide a secure and nonsecure version of the URL & canvas URL on the developers site. I remember having a few issues with that. Sorry I wasn't more help.

Harold Mansfield
03-15-2012, 12:17 PM
The app creation seems to be solid. It's only when calling index.html on the actual tab that gets me the error message. Something about not being allowed. But when I open the html files in a browser, no problem.

What do you mean but his:


The first thing that comes to mind is to be sure you provide a secure and nonsecure version of the url & canvas URL on the developers site. I remember having a few issues with that


I did have problems with images. When calling them using "https" from where they are hosted, sometimes they wouldn't display. But when I just called them using "http", they popped right up.
I don't know why that is, I just know it worked.

brbrown1988
03-15-2012, 12:58 PM
As far as I know, the images do not have to be pulled from a secure source. What I was referring to was the URL and Canvas URL, which need a secure source in order to pull the page on Facebook. I have provided a sample screenshot to help out. You must have a secure sever in order to do this, but I think FB has just started providing a free service from Heroku. There must be two versions of your page. Secure and nonsecure. For me, it was as simple as inserting the code below into my secure html file and uploading it to the company server.


<section name=permitTags><directive ssl></section>

The canvas URL is just the folder containing your file on your server. Hope that helps.

207

billbenson
03-15-2012, 01:51 PM
By "server issue" I mean how the server is set up. It doesn't mean there is a problem with the server.

Harold Mansfield
03-16-2012, 01:31 PM
As far as I know, the images do not have to be pulled from a secure source. What I was referring to was the URL and Canvas URL, which need a secure source in order to pull the page on Facebook. I have provided a sample screenshot to help out. You must have a secure sever in order to do this, but I think FB has just started providing a free service from Heroku. There must be two versions of your page. Secure and nonsecure. For me, it was as simple as inserting the code below into my secure html file and uploading it to the company server.


<section name=permitTags><directive ssl></section>


The canvas URL is just the folder containing your file on your server. Hope that helps.

207

OK. Yeah, I have all of that down. I've almost got my page done.
I checked out Heroku. From what I understand, you can use their service for free to create apps and test them, but once you want to go live on your page using their service, they still direct you to buy an SLL through them,
Purchasing an SSL Certificate | Heroku Dev Center (http://devcenter.heroku.com/articles/ssl-certificate)

or host your app on their service using an IP based SSL for $100 a month.
SSL | Heroku Dev Center (http://devcenter.heroku.com/articles/ssl#acquirecert)

I am so glad that it's not 100% free.