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

    Question

  • Hello Everybody

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

    We are using GWT [Google Web Toolkit ] 2.0.1  framework & Our website developed in Java

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

    I added <script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript"></script> in my html file. Still  facebook Like box not display in Internet Explorer 6 - IE8

    Now My final Application.html file contains are

    ------------------------------------------------------------------------------------------------------------------------------

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

    <script type="text/javascript" language="javascript"     src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
    <script type="text/javascript">              FB_RequireFeatures(["Connect"], function(){  var x=1; } );          </script>
    <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'></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'></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'></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'></fb:fan>");
       }
            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 every browser with facebook like box  excluding IE6-IE8.

    It means There is probelm in IE ?

    My facebook.css contains are

    ------------------------------------------------------------------------------------------------------------------------------

    @charset "utf-8";
    /* FB Fan */

    body {
      color: #03869E;
    }
    /*.connect_widget .connect_widget_facebook_logo_menubar {
      border-color: #08AEBE;
      border-width: 0px;
    }*/
    .fan_box .connect_action {
      padding: 0;
    }
    .fan_box .connect_action .name {
      font-size: 12px;
    }
    /*.fan_box .profileimage {
      display: none;
    }*/
    .fan_box .full_widget .connect_top {
      background: #03869E none repeat scroll 0 0;
    }
    /*.fan_box .connect_top {
      padding: 6px 0 6px 6px;
    }
    .fan_box .connect_button {
      float: left;
      position: relative;
      color: #bbbbbb;
    }
    .name_block {
      float: left;
      position: relative;
    }*/

    .fan_box
    .full_widget {
        border: none;
    }
    .connect_top a {
        color: #ffffff;
    }
    .connect_top a:hover {
        color: #ffffff;   
    }
    /*.connect_widget {
        clear: left;
    }*/
    .fan_box
    .connections {
        background-color: #03869E;
        border: none;
        color: #ffffff;
    }
    .fan_box
    .connections_grid
    .grid_item
    .name {
        color: #ffffff;
    }
    -----------------------------------------------------------------------------------------------------------------------------

    What changes i need to do in my html file or java file to show facebook like Box properly with displaying our home page IE6-  IE8

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

    • Edited by vaibhav_wissen Friday, June 04, 2010 10:07 AM remove spell mistake
    Friday, June 04, 2010 6:44 AM

Answers

  • 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'>< /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'>");

    mainPanel.add(html);

    It works !!!! :)

    Now FB like box display in IE8 and  also Home Page

    It really works !!!! :)

    Saturday, June 05, 2010 12:47 PM

All replies

  • Hi,

    Please provide a link to your web site so that we can use the excellent debugging freechurs of IE8 to debug your pages.

    Also you may gain some insight by first validating your markup... validator.w3.org

    An immediate error I see is that your <head> block is missing a <title> tag.

    You should also test your web pages by running IE in noAddons mode to rule out third-party addons affecting the expected outcome.

    Also when testing your site from within your company firewall/proxy may be blocking facebook uri's.

    You should use feature detection for

    1. is javascript enabled in the browser..? use <noscript> block to alert the user.

    2. is the IE InPrivate Filtering enabled....window.external.InPrivateFilteringEnabled() - applies to IE8 browsers... place in a try block... if it is enabled you can display a message if the Facebook api's aren't present to tell the user to unblock the Facebook api's.

    3. Are the Facebook API's loaded (they could be blocked by other software or a proxy)

    if (typeof (window.Bootloader) == 'object') - Feture test for FB api's

    Regards.


    Rob^_^
    Friday, June 04, 2010 8:25 AM
  • 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'>< /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'>");

    mainPanel.add(html);

    It works !!!! :)

    Now FB like box display in IE8 and  also Home Page

    It really works !!!! :)

    Saturday, June 05, 2010 12:47 PM
  • I found by adding the correct xmlns:fb parameter works fine with IE8, then use the exact XFBML code that the Facebook generator provides:

     

     

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    

     

     

    The code can be generated here: http://developers.facebook.com/docs/reference/plugins/like-box

     

    Alternatively the iframe code may be used

    Monday, September 20, 2010 2:00 PM