CODEWITHSUNDEEP
javascriptfacebookfirefoxfacebook-javascript-sdk
SaidbakR
SaidbakR

Reputation: 13552

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: enter image description here 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.

Upvotes: 0

Views: 3062

Answers (3)

SaidbakR
SaidbakR

Reputation: 13552

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>

Upvotes: 0

DaveB
DaveB

Reputation: 3083

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}

Upvotes: 0

Rohit Choudhary
Rohit Choudhary

Reputation: 2259

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

Upvotes: 1

Related Questions