≡ Menu

Removing Facebook iFrame Scroll Bars – An Adventure

  • Share
  • CevherShare
  • Share

The World Has Changed Forever

Well it is official, the world has changed forever – Facebook no longer accepts FBML Fan Pages.  This has created quit the buzz in the internet world and one that has certainly brought a good bit of attention to Facebook.  In that respect alone it has already proven to be a good move. 

Now it seems that although the creation of the fan pages will take a bit more time and skills the possibilities are broader and gives you the ability to create a more website oriented interface within your Facebook platform.  This is only going to bring more people and business into the Facebook machine. 

Once you get your Fan Page up and running you will need some guidance to attract Fans.  They don't just start clicking the Like button because you now have a Fan Page.  Believe me. 

One of the best Guides and How-To's I have found is a 30 Day Program called 3000 Fans in 30 Days.  This is an outstanding 30 day program that will produce results.  There is a small investment – less then $10 but if you are going to take the time to build a Fan Page then you need to make a small investment to attract fans.  Another way to look at it is the statistics today are saying that each fan is worth at least $1.00 if you are running your Fan Page correctly and monetizing it.  In other words this little investment can make you a lot of money if you follow the program. 

Click here to view the 3000 Fans in 30 Days Program

 

What’s Included In How To Attract 3,000 Fans In 30 Days?

Our guide, “How To Attract 3,000 Fans In 30 Days”, is a simple guide to building your company’s presence on Facebook. This 75-page guide to Facebook Pages teaches you:

  1. What’s New? – Our guide will walk you through all of the new features in the Facebook Pages product and explain how to use them.
  2. How To Develop A Successful Brand – The course doesn’t just provide lessons on how to use Facebook Pages but also how to build a more powerful brand on the web.
  3. Mastering The Art Of Conversations – Social media is a two-way conversation and Facebook is no exception to the rule. We walk you through some of the best strategies for more effectively engaging your audience.
  4. Creating A Content Strategy That Sells – At the end of the day, building out your online brand presence is not just about attracting fans but making sales. We will discuss some of the best tactics to developing content that will help you sell more.
  5. Using Facebook Ads To Promote Your Page – Want to get more fans through Facebook’s advertising platform. I will walk you through the process of building out an advertisement and discuss some of the best strategies to improving your results.
  6. Turn New Visitors Into Fans – As I just mentioned, not all visitors to your Facebook Page are fans. In this guide I walk you through the best techniques to converting new visitors into fans.
  7. More – There are over 30 priceless techniques to attracting more fans and developing a magnetic presence on Facebook.

Click here to view the 3000 Fans in 30 Days Program

In the midst of developing this tutorial program the problem of scroll bars in my pages was killing me.  I worked for three days to remove them and then finally had a fellow iFramer help me.  The problem was solved with this code which is different from a lot of the code you will find out there claiming to correct the problem.  So far is has worked flawlessly.  See The Code Below. 

FREE iFrame Templates & Video Tutorial Program

I have been developing a FREE Tutorial Program complete with templates and instructional videos to help you make your own iFrame Fan Pages. 


Create Your Own Customized iFrame Facebook Fanpages & Get Your Business Rockin Tutorials/Templates/Graphics

F R E E

 

 

 

 

 

Here is just one of the templates that are free in the course.  The whole point of the course is to teach you how to build these yourself and easily customize them.  There are a variety of template pages available though but the tutorials really give you the training you need to make them work for your particular needs and creativity. 

 


You can access the Free Tutorial Series Here.   Free iFrame Facebook Tutorial Lessons and Templates

iFrame Scroll Bars No More

If you are having issues with the iFrame scroll bars on your facebook fanpages try this code.  If you join the iFrame Facebook Tutorial class you will get access to the templates I developed with this code.  You will be able to see not only this code but the HTML code I used to develop the pages.  I used a variety of DIV tags instead of Tables. 

Please Leave Comments Below and let me know how it works for you. 

Insert this at the top of your html document. 

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”><head>

<style type=”text/css”>body {overflow: hidden;}</style>

<Body onLoad=”FB.Canvas.setSize({width: 520, height: 2000})”>.<Div id=”fb-root”></div>

<Script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>

<Script type=”text/javascript”>
FB.init({
appId: FB_APP_ID,Status: true,Cookie: true,Xfbml: true
});
window.fbAsyncInit = function().{
fb.canvas.setautoresize();
}
</Script>

</head>
<body>

insert Your Page Code Here

</body>

</html>

***  Important.  You set the Height to whatever you need it to be.  If you get bottom scroll bars you are exceeding your Width Size which is 520 px

{ 30 comments… add one }

  • doug March 29, 2011, 5:07 pm

    awesome code dude!!! thanks so much!!!
    (great to set the iFrame height)

    • Todd June 13, 2011, 4:24 am

      you are welcome doug – glad it worked for you

  • Rachel McCollin April 28, 2011, 3:33 am

    I tried this and the important bit seemed to be the overflow:hidden, so I just used that and it worked fine!

    • Todd June 13, 2011, 4:25 am

      Good feedback Rachel, Thanks

  • dele May 1, 2011, 4:13 pm

    Awesome code! Thanks. Now I can go to bed happy. :)

  • ERica June 4, 2011, 10:13 am

    Thank you so much this has been bothering me for weeks :) Work in 2 sec.s

    • Todd June 13, 2011, 4:23 am

      You are welcome Erica, Think you have the record in time it took to get it to work. :-)

  • James June 9, 2011, 8:58 am

    Thank you so much. :D

    • Todd June 13, 2011, 4:25 am

      You are welcome James. Love the Avatar

  • Chris June 13, 2011, 1:25 pm

    Hi Todd,

    I’m using the “Welcome” app that I would like to continue using. Static HTML: iframe tabs

    This code doesn’t seem to work with this no matter how I try it.

    Can you advise?

  • Sax June 18, 2011, 2:17 pm

    Thanks, that worked like a charm. :)

  • Sax June 18, 2011, 2:18 pm

    Oh, in case you have a hundred themes, put the exact code above in a PHP file and just include it in the section. Will save a lot of time in the future. :)

  • John from Media Ace June 27, 2011, 3:37 am

    Hey Todd,

    I was getting the scroll bars after I embedded a YouTube clip inside the HTML code (430px by 273px). No scroll bats appeared when I first embedded the clip but once I changed the background image to a full size image, suddenly the scroll bars were showing. Something tells me there’s certain things that can trigger the iFrame to show the scroll bars.

    I’ve added the overflow: hidden to the body tag in the external style sheet and deleted the overflow: hidden from you internal style sheet. Also, I’ve added my own jQuery to sit alongside your javascript code and all seems fine. Made basic adjustments in the header code to enable my jQuery and the scroll bars are gone. There’s a Dreamweaver error message coming up in one of your lines of code: window.fbAsyncInit = function().{
    That line there for some reason shows a syntax error but the facebook page has no scroll bars so overall it’s working.

    Let me know if you’re getting any other feedback. My Facebook page is http://www.facebook.com/pages/Media-Ace/107685985991692

    I’m also getting a gap that seems to be generated by the following code section on the third line: .
    That part, that comes after the Body onLoad, seems to create a white gap.

    Happy to hear from you guys but so far it’s working. Just a few tweaks and it’s perfect.
    Cheers
    John P

  • Tim July 1, 2011, 11:51 am

    Been battling this for some time now. This is the only code that I have been successful with. Thanks for sharing.

  • Howard Tiano July 7, 2011, 9:27 pm

    Thanks! The code works!!

  • Franklin Parrish July 15, 2011, 10:58 am

    I am having trouble with resizing the canvas. No mater what I enter for the FB.Canvas.setSize, some of the content is cut off when I have overflow: hidden. I’ve tried setting a min-height in the body but that doesn’t work either. Anyone have a solution? Thanks!

  • Franklin Parrish July 20, 2011, 8:05 am

    What do you think is the limit for the page before truncation? Here is the style sheet:

    @charset “utf-8″;
    body {
    background-image: url(../images/calSmithBackground.jpg);
    margin: 0px;
    padding: 0px;
    }
    #topStripeHolder {
    background-image: url(../images/topStripe.jpg);
    background-repeat: repeat-x;
    height: auto;
    width: 100%;
    min-height: 120px;
    margin: 0px;
    padding: 0px;
    }
    #masthead {
    background-image: url(../images/calSmithMasthead.png);
    background-repeat: no-repeat;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    height: 200px;
    background-position: -5px 0px;
    }

    #mastheadModal {
    background-image: url(../images/calSmithMasthead.png);
    background-repeat: no-repeat;
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    height: 200px;
    background-position: -40px 0px;
    }
    #firstReadHolder {
    height: auto;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    }
    #firstReadImageHolder {
    background-repeat: no-repeat;
    background-position: bottom;
    height: auto;
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    }
    #firstReadHolder #firstReadImageHolder img {
    margin-right: auto;
    margin-left: auto;
    border-top-width: 24px;
    border-right-width: 24px;
    border-bottom-width: 23px;
    border-left-width: 24px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    }
    #shadowHolder {
    margin-right: auto;
    margin-left: auto;
    width: 850px;
    background-image: url(../images/imageShadow.png);
    background-repeat: no-repeat;
    background-position: left top;
    height: 45px;
    }
    #mainContentHolder {
    height: auto;
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    }
    #leftContentHolder {
    height: auto;
    width: 450px;
    float: left;
    font-family: “Myriad Web”, Arial, sans-serif, Helvetica, “Trebuchet MS”;
    font-size: 14px;
    color: #000;
    }
    #rightContentHolder {
    height: auto;
    width: 350px;
    margin-left: 50px;
    float: left;
    font-family: “Myriad Web”, Arial, sans-serif, Helvetica, “Trebuchet MS”;
    font-size: 14px;
    color: #000;
    }
    .bookCallout {
    min-height: 250px;
    background-image: url(../images/onSaleSolid.png), url(../images/nowAvailableSubHead.png);
    background-position: right top, left top;
    background-repeat: no-repeat;
    padding-right: 30px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 120px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #021F59;
    border-right-color: #021F59;
    border-bottom-color: #021F59;
    border-left-color: #021F59;
    }
    #firstReadHolder #mainContentHolder #rightContentHolder #bookCallout_1 img {
    margin-right: 5px;
    margin-bottom: 10px;
    }
    #bookCallout_1 #bookImage {
    float: left;
    height: auto;
    width: 130px;
    clear: both;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: -30px;
    }
    .rightContentCalloutBox {
    height: auto;
    margin-top: 20px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #021F59;
    border-right-color: #021F59;
    border-bottom-color: #021F59;
    border-left-color: #021F59;
    }
    #footerStripeHolder {
    background-image: url(../images/calSmithFooter.jpg);
    background-repeat: repeat-x;
    height: auto;
    width: 100%;
    background-position: top;
    }
    .divFix10 {
    clear: both;
    width: 100%;
    height: 50px;
    }
    #footerHolder {
    font-family: “Myriad Web”, Arial, sans-serif, Helvetica, “Trebuchet MS”;
    font-size: 12px;
    color: #FF0;
    height: auto;
    width: 880px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    min-height: 100px;
    margin-top: 10px;
    }
    #navHolder {
    position: relative;
    z-index: 2000;
    height: 30px;
    width: 500px;
    top: 135px;
    right: 0px;
    left: 405px;
    font-family: “Myriad Web”, Arial, sans-serif, Helvetica, “Trebuchet MS”;
    letter-spacing: .2em;
    text-align: right;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    }
    .navHolder a:link {
    text-decoration: none;
    color:#000;
    }
    .navHolder a:hover {
    text-decoration:underline;
    /*color:#F00;*/
    /*background-color:#021F59;*/
    }

    .navHolder a:visited {
    text-decoration: none;
    color:#000;
    }

    #footer1 {
    float: left;
    height: auto;
    width: 200px;
    }
    #footer2 {
    float: left;
    height: auto;
    width: 200px;
    margin-left: 20px;
    vertical-align: top;
    display: inline-block;
    }
    #footer3 {
    float: left;
    height: auto;
    width: 200px;
    margin-left: 20px;
    vertical-align: top;
    }
    #footer4 {
    float: left;
    height: auto;
    width: 200px;
    margin-left: 20px;
    }
    .footerHolder a:link {
    text-decoration: none;
    color:#F9EC23;
    }
    .footerHolder a:hover {
    text-decoration:underline;
    /*color:#F00;*/
    /*background-color:#021F59;*/
    }

    .footerHolder a:visited {
    text-decoration: none;
    color:#F9EC23;
    }
    .footerList {
    list-style-type: circle;
    display: list-item;
    }
    .navLineHeight {
    line-height: 2.5em;
    font-weight: bold;
    }
    .emailListSubscribe {
    line-height: 20px;
    display: inline;
    }
    .emailFormFields {
    text-align: right;
    margin-left: 20%;
    }
    #mc-embedded-subscribe-form {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    mc-embedded-subscribe-form {
    background-color: #00C;
    }
    #mainContentHolder #rightContentHolder #mailingList #mc_embed_signup #mc-embedded-subscribe-form fieldset {
    border:none;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    color: #000;
    text-align: left;
    }
    .modalMasthead {
    width: 850px;
    }

    • Todd July 24, 2011, 5:35 pm

      your width is to large. the max is 520px but you want to build your page at 510px to compensate for edges or other extra px. I would start there. I know you have an issue with length but you must be getting scroll bars for the width as well. I dont see the part of the code that lets you set the width and length. onload

  • Damian July 24, 2011, 3:45 pm

    Thanks a lot for the code… works like a champ on my fb fanpages.

  • stan August 26, 2011, 1:25 am

    THAAAANNNKKKKSSS A LLLOOOT !! mate

  • fred September 21, 2011, 2:26 am

    Thanks very much . it work for me !

  • fred September 21, 2011, 2:27 am

    i guess the FB.Canvas.setAutoResize() sometimes may not set the correct height of fanpage

  • Nikolas October 5, 2011, 10:53 pm

    Your code is great, but the scroll bars disappear only in the owners administration page. All other visitors of the facebook page are still seeing the scroll bars.
    I changed the height pxs to make sure that it was adequate for the text, but I saw no difference.
    Can you advise?
    Thank you

  • Spela October 30, 2011, 8:31 am

    Thamk you so much!!! it work!!!!! THANK YOU. saved me so much time for the future.
    Spela

  • Rana January 20, 2012, 5:11 am

    Hi thanks a lot for this template, It works as said but some how when i developed new html that is not working. I found same blog which worked for me hope this help others http://www.phptechi.com/how-to-remove-facebook-iframe-app-scroll-bar.html

  • Claudia January 26, 2012, 5:36 am

    I love you!!! Thankss!!!!!!

  • Kingsley February 5, 2012, 1:20 am

    Thank you very much, this helps me out :)
    You are awesome man!

Leave a Comment