IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer 6 - IE8 ?

Question

IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer6 - IE8 ?

Facebook like box display throgh my web application on every browser excluding IE-IE8

Now final Application.html file contains are

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"&gt;&lt;BR&gt;
< html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
<BR>< head>
< meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
< /head><BR>
< body>

< script type="text/javascript" language="javascript"     src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"&gt; < /script> <BR>
< script type="text/javascript">  FB_RequireFeatures(["Connect"], function(){  var x=1; } );          < /script> <BR>
< script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript"> < /script>

< /body>
< /html>



My Java code for LIke Box is as follows FBPageFanWidget.java

class FBPageFanWidget extends Composite {

public FBPageFanWidget() {
   VerticalPanel mainPanel = new VerticalPanel();
        mainPanel
                .getElement()
                .setInnerHTML(
                        "< script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'&gt;&lt; /script>< script type='text/javascript'>FB.init('');< /script>< fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'&gt;&lt; /fb:fan>");

        initWidget(mainPanel);
    }
}



We used proper facebook API_KEY & PAGE_ID

It's very important for us to Show Facebook like Box in Our web application  Because we have more IE users.

If we add FBPageFanWidget.java in our web applicaton then Our Home page is not display in IE because we add Facebook LikeBox

so we made changes in Our FBPageFanWidget.java



class FBPageFanWidget extends Composite {

public FBPageFanWidget() { 

VerticalPanel mainPanel = new VerticalPanel();

   if (!isIE())

  {

        mainPanel.getElement()

                .setInnerHTML("<script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'&gt;&lt;/script&gt;&lt;script type='text/javascript'>FB.init('');</script><fb:fan  profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'&gt;&lt;/fb:fan&gt;");
   }
        initWidget(mainPanel);
 }

 public native String getUserAgent() /*-{
        return navigator.userAgent;
    }-*/;

    private boolean isIE() {
        return (getUserAgent().indexOf("MSIE") > -1);
    }
}

when we did this changes Then Facebook Like Box display in every browser excluding IE6 - IE8 :(

and also display Our Home page in IE8 excludeing Facebook Like Box.

It means There is probelm in IE ? or what changes i need to do in my html file or java file to show facebook like Box properly with displaying our home page

It's very important for us to Show Facebook like Box in Our web application Because we have more IE users.

Please Reply ASAP.

Hope-for Best Co-operation from your side !!!!

Answer 1

Check your JavaScript logs. They may show an error which prevents the Like Box from loading correctly. Otherwise, your problem may be in CSS, which IE v6-8 may not handle properly.

Answer 2

Hello Everybody

Finally we Got answer

Instead of mainPanel.getElement().setInnerHTML("Our Previous Script") we used Javas HTML class & It works :)

HTML html = new HTML( "< script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'>&lt; /script>< script type='text/javascript'>FB.init('2ec94ee223c5d36386ab1bfb34bc1b64');< /script>< fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'>");

mainPanel.add(html);

It works !!!! :)

Now Facebook Like box display in Internet Explorer6 - IE8 :)

It really works !!!! :)