CODEWITHSUNDEEP
iframefbmlfacebook-apps
Jonas Stawski
Jonas Stawski

Reputation: 6752

Change tab page to iFrame

I have an old Facebook app that installs on Facebook Pages. The tab page is not being hosted in an iframe, but instead Facebook is embedding the HTML into their website (I think this is called FBML). How do I change the tab to be hosted in an iFrame like the new Apps do.

Thanks,

Upvotes: 1

Views: 459

Answers (3)

Mtheza Funde
Mtheza Funde

Reputation: 1

<html>
<style>
  img {
    background-color: ;
    url("house.png");
    height: 80px;
    width: 80px;
    margin-left: 5px;
  }
  
  #bars {
    background-color: ;
    margin-right: px;
    margin-top: 30px;
    url("bars.jpg");
    width: 100px;
  }
  
  #name {
    background-color: ;
    font-size: 160px;
    hieght: 120px;
    width: 750px;
    color: hotpink;
    text-shadow: 5px 7px 4px silver;
    font-family: "sofia", sans-serif;
    z-index: +20;
    margin-left: 130px;
    margin-bottom: 0px;
  }
  
  #welcom {
    hieght: auto;
    width: 750px;
    background-color: ;
    letter-spacing: 70px;
    margin-right: 100px;
    font-family: serif;
    font-size: 22px;
    margin-left: 290px;
    margin-top: 0px;
  }
  
  #content {
    background-color: ;
    height: autor;
    width: autor;
    margin-top: 0px;
  }
  
  .pic {
    height: 400px;
    width: 1340px;
    margin-left: 0px;
    margin-top: 15px;
    opacity: 100;
    filter: alpha(opacity=20);
  }
  
  #facebook3 {
    margin-rigth: 300px;
    url("facebook3.png");
    width: 40px;
    height: 40px;
  }
  
  #massange {
    margin-left: 0px;
    url("massange.png");
    width: 40px;
    height: 40px;
  }
  
  #whatsapp2 {
    url("whatsapp2.png");
    width: 40px;
    height: 40px;
  }
  
  .sociol {
    background-color: red;
    margin-top: 0px;
    margin-left: 450px;
    url("facebook3.png");
  }
  
  .socio1 {
    background-color: blue;
    margin-top: 0px;
    margin-lef: 800px;
  }
  
  .socio2 {
    background-color: green;
    margin-lef: 200px;
  }
  
  #ceo {
    background-color: white;
    height: 60px;
    width: auto;
  }
  
  #pic1 {
    background-color: ;
    height: 350px;
    width: autor;
    margin-bottom: 0px;
  }
  
  .footer {
    background-color: ;
    height: 900px;
    font-size: 60px;
    text-decoration: none;
    text-align: center;
    opacity: 0.9;
    filter: alpha(opacity=80);
  }
  
  h2 {
    background-color: hotpink;
    color: blue;
    font-size: 15px;
    margin-left: 10px;
    margin: 0px;
  }
  
  #social {
    background-color: grey;
    height: 100px;
    widht: autor;
  }
  
  .footer a:hover {
    background-color: blue;
    color: black;
    text-decoration: none;
    border-radius: 15px;
  }
  
  ul li a {
    text-decoration: none;
    font-size: 100px;
    color: black;
  }
  
  ul li {
    margin: left: 300px;
    margin: 10px;
    display: inline-block;
  }
  
  #back {
    background-color: orange;
    height: 200px;
    width: autor;
  }
  
  .span {
    background-color: orange;
    font-size: 120px;
    position: relative;
    z-index: +20;
    margin-left: 0px;
    cursor: pointer;
  }
  
  .dropdown {
    position: relatie;
    desplay: inline-block;
  }
  
  .dropdown-content {
    display: none;
    background-color: blue;
    width: 1330px;
    height: 1900px;
  }
  
  .dropdown-content a {
    color: black;
    text-decoration: none;
    margin-top: 0px;
    margin: 50px;
    z-index: +20;
    display: block;
  }
  
  .dropdown-content a:hover {
    background-color: silver;
    z-index: +20;
    width: 200xp;
    height: 140px;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .advert {
    background-color: ;
    margin-rigth: 1500px;
    color: blue;
    height: 50px;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    margin-top: 0px;
  }
  
  .icons {
    background-color: red;
    margin-rigth: 70px;
    color: white;
    height: 100px;
    font-size: 20px;
    text-decoration: none;
    margin-top: 0px;
  }
  
  p {
    color: red;
    font-size: 15px;
    margin-top: 20px;
    color: grey;
    text-align: center;
  }
  
  #pro {
    background-color: hotpink;
    color: grey;
    height: 40px;
    width: autor;
    text-align: center;
  }
  
  address {
    color: orange;
    font-size: 15px;
    margin-top: 100px;
    color: red;
    text-align: center;
  }
  
  #copy {
    color: silver;
    font-size: 12px;
    margin-top: 200px;
    text-align: center;
  }
  
  #andyazi {
    color: blue;
    font-size: 52px;
    margin-top: 100px;
    text-align: center;
    margin-bottom: 100px;
  }
  
  body {
    background-color: hotpink;
  }
  
  p {
    color: blue;
    font-size: 20px;
    margin-top: 100px;
    text-align: center;
    margin-bottom: 100px;
    background-color: hotpink;
  }
  
  p3 {
    color: blue;
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 100px;
    background-color: hotpink;
  }
  
  #ceo {
    color: blue;
    font-size: 20px;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 40px;
    background-color: hotpink;
  }
</style>

<body>
  <!--STAGE1-->

  <div id=body>
    <div id=container>
      <div id=board>
        <div id=bars>
          <div class="dropdown"><img src="house.png">
            <di class="span">
              <div class="dropdown-content">
                <a href="#"><img src="sign in.png"> SIGN IN
                  <a>
                    <a href="#"><img src="service.png"> SERVICES
                      <a>
                        <a href="#"><img src="about2.png"> ABOUT
                          <a>
                            <a href="contac1t.html"><img src="contact.png"> CONTACT US</a>
                            <a href="#"><img src="sign up.png"> SIGN UP
                              <a>
                                <a href="help.html"><img src="help.png"> HELP</a>
                                <a href="downloads.html"><img src="new jobs.png"> JOBS</a>
                                <a href="buy.html"><img src="buy.png"> BUY</a>
                                <a href="ixesha2.html"><img src="time2.png"> S-HOURS
                                  <a>
                                    </span>
              </div>
          </div>

        </div>
        <div id=name>BEAUTSILVER</div>
      </div>
    </div>

    <!--STAGE2-->
    <div id=content>
      <div id=welcom><i>ESTIATORIO.</i></div>

      <div id=picture><img src="loogo.jpg" class="pic"></div>
    </div>

    <div id=ceo>CEO AND FOUNDER
      <BR>MR Funde Mthetheleli</div>
    <div id=pro>
      <p3>OUR PRODUCTS</p3>
    </div>

    </p7>
  </div>
  </div>

  <div class=icons<img src="facebook3.png" class="socio1"><img src="buy.png" class="sociol"><img src="call us.png" class="call"><img src="email.png" class="email"><img src="whatsapp.png" class="socio2"><img src="tweeter.png" class="socio2">
    <div class=advert>JOIN US ON SOCIAL PLATFORMS</div>
  </div>
  <div class=footer>
    <ul>

      <li>
        <a href="sign in.html"><img src="press.png"> PRESS ROOM</a>
      </li>
      <li>
        <a href="teams.html"><img src="gift.png"> GIFT CERTIFICATES<br>&COOKBOOK</a>
      </li><br>
      <li>
        <a href="contacts.html"><img src="contacts.png"> CONTACTS US</a>
      </li><br>
    </ul>

    <div id=andyazi>BEAUTSILVER | AVVIA</div>





    <div id=address>71PHALO STREET<br>MOTHERWELL<br>PORT ELIZABETH<br>6211</div>
    <h2>RESEVATIONS & HOURS<br> DIRECTIONS
    </h2>



  </div>
  </div>
  <div id=copy><i>copyrigth &copy: funde mthetheleli</div>
</body>
</html>

Upvotes: 0

Jonas Stawski
Jonas Stawski

Reputation: 6752

As of this writing, to change your tab to work as an iFrame instead of embedded HTML, you have to go to your app settings - advanced and under Migration enable Page Tab iFrames.

Upvotes: 1

Lix
Lix

Reputation: 47966

I beleive what you are referring to is one of the old "static FBML" applications that used to be around.

...tab page is not being hosted in an iframe, but instead Facebook is embedding the HTML into their website...

It would let you paste your FBML (Facebook Markup Language) code into a textarea in the settings of the static FBML app.

This is no longer a feasible option as Facebook has deprecated and is in the process of removing FBML.

FBML has been deprecated. Starting June 1, 2012 FBML apps will no longer work as all FBML endpoints will be removed...

What I believe you'll have to do is re-write your application utilizing the newer JavaScript/PHP SDK's (or any of the other non-official SDK's that are out there). You'll have to create a new app of your very own and then add it to your pages.

Upvotes: 0

Related Questions