8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Facebook iframe page and scrollbars

by FreelanceScribe
6 replies
  • WEB DESIGN
    • |
Deos anybody have the gen on how to remove the scrollbars from a FB page embedded in an iframe app? They show by default even if set to "auto-resize" and the page length exceeds 800px. I am using standard HTML/CSS (not Wordpress).

I have followed the instructions given by Facebook, but that did not fix it.
They say:
Insert this just before </body>:

<script>
FB.init({
appId : 'ID199405000078106',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

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

I have done so, but the scrollbars are still there.
Anybody has a clue?
#facebook #iframe #page #scrollbars
  • Profile picture of the author ankitsharma
    Originally Posted by aesweb View Post

    Deos anybody have the gen on how to remove the scrollbars from a FB page embedded in an iframe app? They show by default even if set to "auto-resize" and the page length exceeds 800px. I am using standard HTML/CSS (not Wordpress).

    I have followed the instructions given by Facebook, but that did not fix it.
    They say:
    Insert this just before </body>:

    <script>
    FB.init({
    appId : 'ID199405000078106',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    </script>

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

    I have done so, but the scrollbars are still there.
    Anybody has a clue?
    Add the JavaScript to your iFramed page
    First, load Facebook's Javascript SDK by adding the following code just before the </body> tag of your index page:
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
    FB.init({
    appId : '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
    });
    </script>
    MAKE SURE you change "YOUR-APP-ID-HERE" to your application ID!
    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 </head> tag on your index page:
    <script type="text/javascript">
    window.fbAsyncInit = function() {
    FB.Canvas.setSize();
    }
    // Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
    FB.Canvas.setSize();
    }
    </script>
    This tells Facebook to resize your iFrame once the page has loaded and again whenever the size of your content changes.
    So those scrollbars aren't a necessary evil. Getting rid of them is a piece of cake!
    {{ DiscussionBoard.errors[3704544].message }}
    • Profile picture of the author FreelanceScribe
      I tried again to put exactly those scripts into my page, the first one just before </body>, the other just before </head> The scrollbars are still there.
      Signature

      Kindle author and freelance writer. Special offers on writing eBooks, manuals or reports. eBook: Facebook Advertising: "Strategies, Tactics, Tools & Tracking", http://www.amazon.com/dp/B00ADV5LT6. Amazon Author page http://amazon.com/author/alexbeckis.

      {{ DiscussionBoard.errors[3707223].message }}
  • Profile picture of the author sknollii
    Bump... need more my friends!

    Sam
    {{ DiscussionBoard.errors[3708773].message }}
  • Profile picture of the author sknollii
    I have added the code and I still have the scroll bards... It is almost there though!

    Thanks guys,

    Sam
    {{ DiscussionBoard.errors[3708882].message }}
    • Profile picture of the author lowridertj
      Try this.. This is what I used in a couple clients, as well as personal setups

      HTML Code:
      <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId  : '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
});
</script>
 
 <script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize(90);
}
</script>
      Note the 90 inside setsize()

      This is to give the page time to render and display correctly.

      In your app settings make sure it is set to iframe and auto resize


      If this still dont work for you PM me the url to the app I will have a look at the page setup.

      TJ
      Signature
      Web Automation Software - http://botguru.net
      1000s of software sold over the past 8 years. What can I build for you?
      {{ DiscussionBoard.errors[3709109].message }}
      • Profile picture of the author FreelanceScribe
        Frustrating this.
        I have tried this script on 2 different iframe app pages, both pages longer than the default 800px.

        Sorry TJ, I can't PM because I need 50 posts before this is allowed. Neither can I post a link but I'll try.

        The script fixed and removed the scrollbars on one site, but I have to refresh the page for all of it to show. URL is facebook at com/MyBodyShape.

        On the other site, the script did not remove the scrollbars using the identical script. This is at facebook at com/SwissMansions.

        Should width and length be inside the script, e.g.:
        FB.Canvas.setSize({width 500, length 1400});
        I tried this but no good.
        Signature

        Kindle author and freelance writer. Special offers on writing eBooks, manuals or reports. eBook: Facebook Advertising: "Strategies, Tactics, Tools & Tracking", http://www.amazon.com/dp/B00ADV5LT6. Amazon Author page http://amazon.com/author/alexbeckis.

        {{ DiscussionBoard.errors[3716238].message }}

Trending Topics