15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

Facebook Iframe Source Code

by SDStudio
7 replies
  • WEB DESIGN
    • |
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
#code #facebook #iframe #source
  • Profile picture of the author orvn
    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> 
    Signature
    Orun Bhuiyan[@orvn] [linkedin] See what I've been doing lately by visiting my marketing agency's site. SEOcial specializes in content marketing and integrated optimization. We create conversions for businesses by gracefully connecting the realms of design, development and marketing.
    {{ DiscussionBoard.errors[3928186].message }}
  • Profile picture of the author SDStudio
    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
    Signature
    Need Roadside Assistance
    {{ DiscussionBoard.errors[3928325].message }}
    • Profile picture of the author rautella
      [DELETED]
      {{ DiscussionBoard.errors[3928959].message }}
      • Profile picture of the author orvn
        Originally Posted by rautella View Post

        HI,

        Are you looking for the fan page code? like here, [online money making tricks] on the right hand side??

        If yes you can create your own from this url

        Select which one you are looking for?? But for this you need to have a fan page created on the facebook.

        Please check and let me know if you still have any issue?

        Thanks
        Hey there!
        Guess what buddy I am linking your Online Money Making Tricks competition and devaluing your SPAM link.
        Never forget that the best way to earn money through internet is to not be a douche and SPAM.
        Signature
        Orun Bhuiyan[@orvn] [linkedin] See what I've been doing lately by visiting my marketing agency's site. SEOcial specializes in content marketing and integrated optimization. We create conversions for businesses by gracefully connecting the realms of design, development and marketing.
        {{ DiscussionBoard.errors[3930306].message }}
    • Profile picture of the author orvn
      Originally Posted by SDStudio View Post

      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
      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.

      Signature
      Orun Bhuiyan[@orvn] [linkedin] See what I've been doing lately by visiting my marketing agency's site. SEOcial specializes in content marketing and integrated optimization. We create conversions for businesses by gracefully connecting the realms of design, development and marketing.
      {{ DiscussionBoard.errors[3930281].message }}
  • Profile picture of the author SDStudio
    Thank you, Orun
    Signature
    Need Roadside Assistance
    {{ DiscussionBoard.errors[3932579].message }}
  • Profile picture of the author tonymontana007
    i really found the iframe thing interesting and i used it on a fanpage also...thanks for sharing..
    {{ DiscussionBoard.errors[3949600].message }}
    • Profile picture of the author oleynick
      @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!!
      {{ DiscussionBoard.errors[4296303].message }}

Trending Topics