Facebook share button is rendered incorrectly

问题

I use the following code to obtain Facebook share button, Facebook like, Facebook Send and Google +1:

    <div id="fb-root"></div>
    <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/ar_AR/all.js#xfbml=1&appId=<?php echo Configure::read('FBappId');?>";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>

<!-- FaceBook SHARE BUTTON HERE -->
    <a name="fb_share"></a>
<!-- End FACEBOOK SHARE -->
    <div class="fb-send" data-href="<?php echo $URL;?>" data-font="tahoma"></div>

    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
            type="text/javascript">
    </script>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="" data-show-faces="false" data-font="tahoma"></div>
    <span>
    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone size="medium"></g:plusone>

    <!-- Place this render call where appropriate -->
    <script type="text/javascript">
      window.___gcfg = {lang: 'ar'};

      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
    </span>

The problem is the Facebook share button is rendred in an iframe styled with width and height 1000px and it renders out of expected view range. The following screen shot will explain more clear:

By the way: The document is RTL direction and the share button should be placed next to other button. The screen shot is taken using FireFox 18.0.

回答1:

<fb:share-button type="box_count"></fb:share-button> Use this only where you want to show share button.

回答2:

Same thing happened to my 'Login With Facebook' button 2 days ago, not sure if this is a bug from FB?

Anyway I have used a CSS hack to fix it...not ideal!

.fb_iframe_widget iframe{width:auto!important; height:auto!important}

回答3:

The final solution for this issue, is demonstrated in the following link. Basically, it depends on creating a direct link to the sharer.php on the Facebook. Of course I removed the extra Javascipt link tag as regarded in RohitKumarChoudhary answer. as follows:

<div class="socials">
<div id="fb-root"></div>
<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/ar_AR/all.js#xfbml=1&appId=xxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send" data-href="http://quran.2index.net/viewAyah/1933" data-font="tahoma"></div>
<!--<a name="fb_share"></a>--> 
<a href="http://www.facebook.com/sharer.php?app_id=xxxxxxxxxx&sdk=joey&u=http://quran.2index.net/viewAyah/1933&display=popup" target="_blank"><img src="/img/../images/facebook16.png" alt="" />مشاركة</a>


<div class="fb-like" data-send="false" data-layout="button_count" data-width="" data-show-faces="false" data-font="tahoma"></div>
....
</div>

来源：https://stackoverflow.com/questions/14364323/facebook-share-button-is-rendered-incorrectly