title: Facebook iframe shows up, empty, in middle of page
body: <p>Just today I noticed on our Wordpress blog that the Facebook iframe is showing up as a blank, bordered box in the middle of my page.</p>
  
  <p>The problem is that when Facebook's JS injects the content, it ends up with a div:</p>
  
  <pre><code>&lt;div id="fb-root" class=" fb_reset"&gt;
      &lt;div style="position: absolute; top: -2000px;"&gt;
          ...iframes here...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That "top: -2000px" is not enough to get it off of the visible screen, so it's stuck in the middle of my page.</p>
  
  <p>Is there some way to fix this? I can do something hacky like hide the #fb-root element or shove it way off the screen. That's the one div that's actually in my code -- the rest, including the offending style attribute, are injected by FB's code.</p>
  
  <p>My code just looks like:</p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;(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'));&lt;/script&gt;
  &lt;div class="fb-like" data-href="(actual URL here)" data-send="false"
          data-layout="button_count" data-width="150" data-show-faces="false"&gt;&lt;/div&gt; 
  </code></pre>