CODEWITHSUNDEEP
htmlcssfacebookfacebook-social-plugins
Ammar Ul Hassan
Ammar Ul Hassan

Reputation: 906

How to make facebook social plugin fully responsive

I am using Facebook social plugin for developers on my website. It's not responsive on mobiles and tablets I followed few StackOverflow answers but still not able to solve my issue. I have a content row and and a span6 class in which my widget is placed.

my HTML is like this.

<div class="row content_row">
<div class="span6">
<div class="Facebook">
<h2><a id="about_us">Facebook</a></h2>
<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"><a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</a></blockquote></div></div>
</div>
</div>

i did apply some CSS From other answers but it also failed.

Css:

.fb-page, .fb-page iframe[style], .fb-page span {
 min-width: 100% !important; 
 width: 100% !important;
 }

Upvotes: 0

Views: 5256

Answers (2)

Kuofp
Kuofp

Reputation: 384

Restrictions

Using CSS3 transform

Set data-adapt-container-width="false" (or something went wrong under 500px)

This fb-plugin was set to 500x500

<script src="jquery.rwd-fb-plugin.js"></script>

<!--FB-page-plugin part1-->
<div id="fb-root"></div> <script>(function(d, s, id) { ... } </script>

<!--FB-page-plugin part2-->
<div class="fb-page"> ... </div>

$(function(){
    $('.fb-page').rwd();
});

Demo: RWD-fb-plugin

Upvotes: 1

maťo
maťo

Reputation: 1312

You need call fb-page div with new data-width and call function "FB.XFBML.parse();" every time, when is site resized. So JavaScript can help for this problem:

<div class="row content_row">
  <div class="span6">
    <div class="Facebook">
      <h2><a id="about_us">Facebook</a></h2>
      <div class="facebook-wrap">
      <div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-tabs="timeline" data-width="500" data-height="400px" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"><a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</a></blockquote></div></div>
      </div>
    </div>
  </div>
</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/en_US/sdk.js#xfbml=1&version=v2.2";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  $(function(){
    $(window).resize(function(){
      $('.facebook-wrap').html('<div class="fb-page" data-href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" data-width="'+$('.facebook-wrap).width()+'" data-height="400px"  data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/pages/IFix-And-Repair/242100755854336"><a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336">iFixandRepair - Wellington</a></blockquote></div></div>');
      FB.XFBML.parse();
    });
  });
</script>

Upvotes: 0

Related Questions