Menu
I am trying to embed on my site a plug-in to my Facebook Page with fully responsive behavior. Basically, I just want its width to change at different browser sizes; 480px when the browser is 480 or narrower; 250px when 481 < browser < 731, and 300px when browser is 731 or wider.
I realize that this question has been asked here before, but previous answers either no longer work thanks to FB changes, or require that the user refresh their browser window. But on this blog post I have found an actual example of a fully-functioning responsive FB Page plug-in; it changes size and other characteristics on-the-fly as the browser window is resized.
The blog post mentions the JavaScript they use, and a link to the site where you can see it in play. But they do not offer a stripped-down summary of all the CSS and HTML involved, and the code on their site is a bit complicated for my newbie eyes. I've tried adding their JavaScript to my site, but for some reason it's not working for me. As you change the browser width, my DIV #fbsection adjusts its width just fine, but the DIV .fb-page inside it will only change if you refresh.
I made my site in Dreamweaver CS 6 using their responsive template, and it incorporates their style sheet boilerplate.css and JavaScript respond.min.js. The relevant code is as follows:
(from the HTML document)
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="bluedolphin.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
</head>
<body bgcolor="#FFFFFF">
<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/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).on('resize', function() {
setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 500);
});
$(window).on('load', function() {
setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 1500);
});
CMSSpace.changeFBPagePlugin = function () {
//getting parent box width
var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
//getting parent box height
var container_height = (Number($('.fb-column').height()) - (Number($('.fb-column-header').height()) + Number($('.fb-column- header').css('margin-bottom').replace("px", "")) + Number(($('.fb-column').css('padding-top').replace("px", "")*2)))).toFixed(0);
if (!isNaN(container_width) && !isNaN(container_height)) {
$(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
}
if (typeof FB !== 'undefined' ) {
FB.XFBML.parse();
}
}
</script>
(also in HTML doc)
<div id= "fbsection">
<h1>Facebook</h1>
<p class="centered"><a href="https://www.facebook.com/pg/bluedolphinbodywork/">Like my Page</a> for the chance to be notified when I post special offers there, and please Invite your Facebook Friends, too! </p>
<div class="fb-page" style="max-width:300px; margin:auto;"
data-href="https://www.facebook.com/bluedolphinbodywork"
data-tabs="timeline"
data-small-header="false"
data-adapt-container-width="true"
data-height="1000"
data-width="300"
data-hide-cover="false"
data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/bluedolphinbodywork" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/bluedolphinbodywork">Blue Dolphin Bodywork</a>
</blockquote>
</div>
</div>
</div>
Relevant snips from my stylesheet bluedolphinbodywork.css:
#fbsection {
display: block;
margin-left: auto;
margin-right: auto;
max-width:480px;
vertical-align:top;
margin-bottom:5px;
padding-bottom:5px;
position: relative;
}
@media only screen and (min-width: 481px) {
#fbsection {
display:inline-block;
max-width:250px;
}
@media only screen and (min-width: 732px) {
#fbsection {
max-width:300px;
}
What am I doing wrong? Thanks for all replies.
559
I customised the solution to suit my needs as I just needed to resize the width and simplified the solution as follows:
function resizeFBPlugin(){
//getting parent box width
var container_width = ($('.fb-column').width() - parseInt($('.fb-column').css('padding-left'))).toFixed(0);
if (!isNaN(container_width)) {
$(".fb-page").attr("data-width", container_width);
}
if (typeof FB !== 'undefined' ) {
FB.XFBML.parse();
}
}
Html Code. Ensure your widget is wrapped under the div with class fb-column or whatever you choose to name your class.
<div class="fb-column">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="true" data-width="500" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook/" class="fb-xfbml-parse-ignore"> <a href="https://www.facebook.com/facebook/">Facebook/a></blockquote></div>
</div>
You can then run the function resizeFBPlugin on window load and resize. Good luck!
173
answered Aug 03 '26 05:08
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With