When using facebook comments social plugin within a jquery tab element, it now returns a 0 width iframe resulting in a blank page (tab). Call has been working for months (years) within the tab, but now a problem since a month. If I place the call outside the tab, the plugin works fine. Call is
<ul class="css-tabs">
<li><a id= "t1" href="#tab1">#ISUSkating</a></li>
<li><a id= "t2" href="#tab2">Facebook</a></li>
<li><a id= "t3" href="#tab2">Timetable</a></li>
</ul>
<!-- tab "panes" -->
<div class="css-panes">
<!-- TAB 1 -->
<div></div>
<!-- TAB 2 -->
<div id="fb_comments" style="height:530px; overflow-y:auto; background-color:white;border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px;">
<fb:comments href="http://livemanager.eurovision.edgesuite.net/isu/site/index.html" num_posts="10" width="300" colorscheme="light" order_by='reverse_time'></fb:comments>
</div>
<!-- TAB 3 -->
<div id="companion_right" style="height:250px; width:300px;"></div>
</div>
<!-- activate above css tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
$(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>
Add this to your CSS.
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}