Question

118

Facebook Page Plugin - rerender / change width dynamically (Responsive / RWD)

rated 0 times [ 124] [ 6] / answers: 1 / hits: 18502 / 9 Years ago, wed, may 6, 2015, 12:00:00

I'm using Facebook's Page Plugin widget. On Facebook's page, it is written:

If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

How can I dynamically change this plugin's width without page refreshing (with, for example, Firefox responsive view - CTRL+M shortcut).

And yeah, I have read THIS post, but none of these solutions tells how to rerender the plugin.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

travion

Add To Favorites

Follow

Total Points: 137

Total Questions: 96

Total Answers: 103

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

travion questions

1 Tagify set data in tagify input on click

Mon, Dec 16, 19, 00:00, 5 Years ago

1 Laravel - How to Import Vue Component to Another Component

Sat, Oct 19, 19, 00:00, 5 Years ago

1 Date conversion in react js

Fri, Sep 20, 19, 00:00, 5 Years ago

1 How can I style react semantic components?

Wed, Nov 14, 18, 00:00, 6 Years ago

1 Problem with onChange for Masked Input in React

Sun, Oct 28, 18, 00:00, 6 Years ago

View All

answered 9 Years ago jaleelh · Accepted Answer

For JavaScript/jQuery approach, you may want to listen to on window resize event and reload the Facebook Page Plugin Div container. Make sure that the FB Page plugin is wrapped around a parent div so we can use its size when we reload the div.

<div id=pageContainer>

    <div class=fb-page data-href=https://www.facebook.com/facebook data-width=500 data-height=250 data-small-header=false data-adapt-container-width=true data-hide-cover=false data-show-facepile=true data-show-posts=true><div class=fb-xfbml-parse-ignore><blockquote cite=https://www.facebook.com/facebook><a href=https://www.facebook.com/facebook>Facebook</a></blockquote></div></div>

</div>



$( window ).resize(function() {

    var container_width = $('#pageContainer').width();    

    $('#pageContainer').html('<div class=fb-page data-href=https://www.facebook.com/facebook data-width=' + container_width + ' data-height=250 data-small-header=false data-adapt-container-width=true data-hide-cover=false data-show-facepile=true data-show-posts=true><div class=fb-xfbml-parse-ignore><blockquote cite=https://www.facebook.com/facebook><a href=https://www.facebook.com/facebook>Facebook</a></blockquote></div></div>');

    FB.XFBML.parse();    

});