CODEWITHSUNDEEP
internet-explorer-8facebook-likebox
Julien CHAZAL
Julien CHAZAL

Reputation: 231

IE8 only : Facebook Like Box Not Displaying

So i've got a problem like many others : Facebook Like Box is not diplaying in IE8 (IE7 OK). I found many posts about that, tried all solutions but did not succed... IE8 message : FB.FBXML Null or not an object

NB : there's a function which handle resizing of FB Like Box.

Here's my HTML5 code :

<!doctype html>
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"  xmlns:fb="http://www.facebook.com/2008/fbml"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
...
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
</head>
<body>
...
    <article>
    <div class="row" id="content">
            <div class="twelvecol last">
            <div id="fb-root"></div>
                <div class="fb-like-box" data-href="http://www.facebook.com/divstudio" data-width="1140" data-show-faces="true" data-stream="true" data-header="false"></div>
            </div>
    </div>
    </article>
...

<script>
$(document).ready(function(){
        var contentwidth = $('#content').width();
        $('.fb-like-box').attr('data-width', contentwidth - '40');
        FB.FBXML.parse(document.getElementsByClassName('.fb-like-box'));
});
</script> 

 <script>(function(d, s, id) {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) {return;}
                  js = d.createElement(s); js.id = id;
                  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                  fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>      
</body>
</html>

Any ideas ?

website : http://www.divstudio.fr/emergenza/jazz/actu.html

thx a lot

Upvotes: 2

Views: 6031

Answers (3)

Ethan Brown
Ethan Brown

Reputation: 27282

I had the same problem, and adding the appropriate xmlns attributes did not help. As it turns out, what was causing my problem is related to another problem: Facebook like box not showing up when user is not logged into Facebook. Igy and wasim kazi had the answers that led me to the solution. Here's how to solve the problem:

  1. Log onto the Facebook account that manages the page you want reflected in the like box.
  2. On the left nav bar, click on "Pages".
  3. Click on the page title to bring up the admin panel for that page.
  4. Click on Edit Page -> Edit Settings
  5. You'll see a box labeled "Country Restrictions". If there are ANY countries listed in this box, your like box will be blank if the user isn't logged onto Facebook AND it will be blank in Internet Explorer (7, 8, 9). This makes sense: the only way Facebook would be able to enforce geographic restrictions with any certainty would be by making sure the user is logged in. Why this affects IE (whether the user is logged in or not) is a mystery, but that was the cause of the problem in my case.

Upvotes: 3

Muhammad Tanweer
Muhammad Tanweer

Reputation: 912

You should add these lines to the tag.

xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"

If there are already any attributes in the tag, leave them as it is. So that the starting html tag becomes like this.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

Clear the cache if caching is enabled. It should work in IE-8

Upvotes: 4

sagesolutions
sagesolutions

Reputation: 501

I had the same issue with the facebook module for drupal 6.

I solved my problem by changing the markup type from XFBML to HTML5

I then added the HTML5 script in the <head> section:

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

I hope this fixes your problem as well.

Upvotes: 0

Related Questions