CODEWITHSUNDEEP
htmlcssfacebook-social-plugins
user5635857
user5635857

Reputation:

How do I make my Facebook page plugin responsive?

I wish to make my Embedded Facebook Plugin responsive to screen width.

The plugin I am using is from this site, and I have checked the box saying Adapt to plugin container width.

Currently my plugin is not responsive.

.socialDivContainer {
  margin: 0px 0 0 0;
  text-align: center;
  max-width: 500px;
}

.socialDivContainer div {
  display: inline-block;
  margin: 0;
  padding: 60px;
  margin: auto;
  max-width: 500px;
}
<div class="socialDivContainer">

  <div class="fb-page" data-href="https://www.facebook.com/flatworlddigital/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt- container-width="true" data-hide-cover="false" data-show-facepile="true">

    <blockquote cite="https://www.facebook.com/flatworlddigital/" class="fb- 
    xfbml-parse-ignore"><a href="https://www.facebook.com/flatworlddigital/">FlatworldWorks</a>

    </blockquote>
  </div>

</div>

Upvotes: 0

Views: 1467

Answers (2)

Jocelyn
Jocelyn

Reputation: 3

I've got it like this:

<div class="fb-page"
data-href="https://www.facebook.com/my_username" 
data-tabs="timeline" 
data-small-header="false"
data-adapt-container-width="true" 
data-hide-cover="false"
data-show-facepile="false">
<blockquote 
cite="https://www.facebook.com/my_username" 
class="fb-xfbml-parse-ignore"><a 
href="https://www.facebook.com/my_username">my_name</a>
</blockquote></div>

It's rendering at the default width and height no matter how I set the div or blockquote, unless I float the div right, which causes it to display very narrow.

Other issues with the same plugin:

It's not showing the cover image in the background at the top whether I set data-small-header to false or true.

I find the whole thing disappears if I don't have my profile set to professional mode.

Upvotes: 0

andyrandy
andyrandy

Reputation: 74004

Try to remove data-width="500", as it sets the plugin to a static width. It does not make sense to use that parameter in combination with the responsive attribute. I just tried creating the code without that parameter and it works for me.

Edit: Also, set data-adapt-container-width="true"

Upvotes: 0

Related Questions