• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1411
  • Last Modified:

facebook custom fan page: doctype or iframe

We have a facebook fan page here using FBML:

http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702

except it shows up different all over the place depending on the browser and browser version.

Can you show me how to use a doctype or iframe to solve this problem?

Thanks.
0
weikelbob
Asked:
weikelbob
  • 6
  • 2
3 Solutions
 
Mike DSolution ConsultantCommented:
Hi,

the Image returns a 404

http://nlpdvds.com/wp-content/uploads/2011/01/nlpca_facebook_home.jpg

If you know that
it shows up different all over the place depending on the browser and browser version
, why not do us (and with that yourself) a favor and include screenshots, ideally highlighting the differences?

JD
0
 
weikelbobAuthor Commented:
I had a problem with one of the pages. Let's take this page for now:

http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702?sk=app_7146470109#!/pages/NLP-Institute-of-California/169772046384702?sk=app_6009294086

It looks good in all of my browsers, FF mac, safari, opera, FF PC, IE6, IE7 but it's messed up on other people's computers

The attached file AllMyBrowsersw.jpg has a line in it from pasting 2 screenshots together. It actually looks perfect in real life.

I think I need to go with an iframe. I don't think something this complex will work in FBML.
AllMyBrowsersw.jpg
FriendsPC.jpg
0
 
Mike DSolution ConsultantCommented:
Without knowing the Code i can only guess... Might be a Cache issue; try adding '?x=123' or something to your Images... Or, post the Code, explain what you expect, describe what You're getting instead...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
weikelbobAuthor Commented:
You don't think that page is too complex for fbml?

You don't think an iframe is the only way to go?

I don't think I can post the code, but I can tell you what I'm doing.
<link rel="stylesheet" type="text/css" href="http://nlpdvds.com/wp-content/uploads/2011/01/style.css?v=17.45">

<fb:visible-to-connection>
   <div id="shop-wrapper">

      <div id="shop-top3-header">
<a href="http://www.nlpca.com"><img src="image here"></a>
      </div>

         <div id="shop-top3-wmdvd-journey">

      <div id="shop-top3-wmdvd">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p39&navicat=5&navisubcat=9&naviprod=39"><img src="image here"></a>
      </div>

      <div id="shop-top3-journey">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p69&navicat=5&navisubcat=9&naviprod=69"><img src="image here"></a>
      </div>

         </div>
         <div id="shop-top3-early-DSR">

      <div id="shop-top3-early">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p67&navicat=5&navisubcat=9&naviprod=67"><img src="image here"></a>
      </div>

      <div id="shop-top3-DSR">
<a href="https://nlpca.infusionsoft.com/cart/store.jsp?view=4&i=p59&navicat=5&navisubcat=9&naviprod=59"><img src="image here"></a>
      </div>

         </div>


      <div id="shop-shopsite">
<a href="http://www.shop.nlpca.com"><img src="image here"></a>
      </div>
         
      <div id="shop-menu">

         <div id="shop-menu-about">
<a href="http://www.nlpca.com/DCweb/NLPca_mission.html"><img src="image here"></a>
        </div>

         <div id="shop-menu-training">
<a href="http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702?v=app_7146470109&ref=sgm"><img src="image here"></a>
          </div>

         <div id="shop-menu-shop">
<a href="http://www.facebook.com/pages/NLP-Institute-of-California/169772046384702?v=app_6009294086&ref=sgm"><img src="image here"></a>
          </div>

         <div id="shop-menu-contact">
<a href="http://www.nlpca.com/DCweb/Contact_Us.html"><img src="image here"></a>
          </div>

      </div>

</div>
</fb:visible-to-connection>
</fb:fbml>

Open in new window

#shop-wrapper
{
float:left;
width:520px;
height:1461px;
}

#shop-wrapper2
{
float:left;
width:520px;
height:1174px;
}

#shop-top3-header
{
float:left;
width:520px;
height:178px;
margin-top:-3px;

}

#shop-top3-wmdvd-journey
{
float:left;
width:520px;
height:716px;
margin-top:-3px;
}

#shop-top3-wmdvd
{
float:left;
width:257px;
height:716px;

}

#shop-top3-journey
{
float:left;
width:263px;
height:716px;

}

#shop-top3-early-DSR
{
float:left;
width:520px;
height:278px;
margin-top:-3px;
}

#shop-top3-early
{
float:left;
width:259px;
height:278px;

}
#shop-top3-DSR
{
float:left;
width:261px;
height:278px;

}

#shop-shopsite
{
float:left;
width:520px;
height:137px;
margin-top:-3px;
}

#shop-menu
{
float:left;
width:520px;
margin-top:-3px;
}

#shop-menu-about
{
float:left;
width:143px;
height:54px;
}

#shop-menu-training
{
float:left;
width:119px;
height:54px;
}

#shop-menu-shop
{
float:left;
width:118px;
height:54px;
}

#shop-menu-contact
{
float:left;
width:140px;
height:54px;
}

#shop-spacer1
{
height:1256px;
width:1px;
float:left;
}

Open in new window

0
 
weikelbobAuthor Commented:
I went ahead and posted the code.

I don't have something like ?x=123 on any of the pictures
0
 
gwkgCommented:
Since Facebook is officially depreciating FBML as of tomorrow (March 11) it would make perfect sense to switch to an iframe.

http://www.insidefacebook.com/2011/03/09/fbml-deprecation-canvas-for-post/
0
 
weikelbobAuthor Commented:
gwkg, do you know what the easiest way is to drop in a simple iframe page for free?
0
 
weikelbobAuthor Commented:
Woops, I accidentally accepted one of my own comments.

I'll send a note to Community Support
0
 
weikelbobAuthor Commented:
Even though FBML is depreciated, we are using a very basic FBML setup and it is working. As you know, facebook is backwards compatible with FBML and I couldn't find a completely free iframe option
0

Featured Post

[Video] Create a Disruption-Free Workspace

Open offices have their challenges. And Sometimes, it's even hard to work at work. It's time to reclaim your office and create a disruption-free workspace. With the MB 660, you can:

-Increase Concentration
-Improve well-being
-Boost Productivity

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now