Facebook Iframe Source Code

by 7 replies
15
Hi,

I have been searching around for the source code for the facebook Iframe. I have came across this code:

Code:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' 
height='270' />
Now when i fill in the swfsrc and the imgsrc and add it to the Iframe Facebook - it is not working is I'm missing something?

I have design a fanpage to add a embed video inside the design. Now I'm trying to figure out how to get it working. Would anyone have any idea how this works?

Thanks in advance
~Albert
#website design #code #facebook #iframe #source
  • Below is my code that I'd use. It averts all the common iframe issues with the 800px cut off, scrollbars, borders, etc..
    I'd just embed the Youtube video with the embed iFrame Youtube provides.
    Just change the App ID to match yours and the video ID to match your Youtube video.

    Don't forget to go to your facebook application settings and set both the regular and secure canvas URL's. Select the auto-resize option and do not allow the application to be socially searchable.

    Then add the tab to your page.

    PHP Code:
    <!DOCTYPE HTML>
    <    html>
        <    head>
            <    title>Facebook iFrame</title>

            <    style type="text/css">
                    body {
                    width:520px;
                    margin:0; padding:0; border:0;
                }
            </    style>

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

        </head>

        <body style="overflow:hidden;">

            <iframe width="520" height="423" src="http://www.youtube.com/embed/CHANGEME!!!!!" frameborder="0" allowfullscreen></iframe>
            
            
            <script src="http://connect.facebook.net/en_US/all.js"></script>
            <script>
                FB.init({
                appId : '???CHANGETHISVALUE!!',
                status : true, // check login status
                cookie : true, // enable cookies to allow the server to access the session
                xfbml : true // parse XFBML
                });
            </script>
            </body>

            </html> 
    • [ 1 ] Thanks
  • Thank you for the fast reply

    Here the thing if i create a new app - would that create a new page? The reason i say this is i have a fanpage all ready set up with fans. So what i did was create a new app and it made a new page.. something i don't want to do.. So what do i do now?

    Thank you,
    ~Albert
    • [1] reply
    • [DELETED]
      • [1] reply
    • Well, you create an app through Facebook.com/developers and every new App will have its' own page. You can remove these pages from social search, but if you're using iframe's you're going to have to have a working app.

      All this app really needs is your canvas URLs (the location of the page on your server you want to iframe).

      Once you've saved those settings (in application settings -> Facebook integration), go to your app page and click "Add to page". Now you'll be able to add that app to any page you're the administrator of.

      This video might be of use.
      If you use my code as an HTML and replace the App ID in the code, you should be fine.

      Additionally, you're going to want to place with iFrame on a server with an SSL certificate to allow secure/HTTPS people to view it.

      YouTube - &#x202a;How To: Set up a custom facebook iframe application tab 2011&#x202c;&rlm;
      • [ 1 ] Thanks
  • Thank you, Orun
  • Banned
    [DELETED]
  • i really found the iframe thing interesting and i used it on a fanpage also...thanks for sharing..
    • [1] reply
    • @orvn: Is there away to automatically re-size the webpage that will be show within the iframe so that the webpage will be as big as the iframe in width and height, not more, not less?!

      Please let me know!

      Thanks!!
Join the discussion

Next Topics on Trending Feed