Facebook分享按钮呈现不正确 [英] Facebook share button is rendered incorrectly

问题描述

我使用以下代码获取Facebook分享按钮，Facebook喜欢，Facebook发送和Google +1：

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>

问题是：Facebook共享按钮被渲染为iframe样式宽度和高度为1000px，并显示出预期的视图范围。以下屏幕截图将会更清楚：

顺便说一句：文档是RTL方向，共享按钮应放在其他按钮旁边。使用FireFox 18.0进行屏幕截图。

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.

推荐答案

此问题的最终解决方案在以下 a href =http://quran.2index.net/viewAyah/1933 =nofollow>链接 。基本上，这取决于创建一个直接链接到Facebook上的sharer.php。当然，我删除了额外的Javascipt链接标记，如 RohitKumarChoudhary 答案所述。如下：

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>

这篇关于Facebook分享按钮呈现不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！