Making FB comments responsive is possible!

The mobile version of FB comments is responsive, but for whatever reason FB did not make the “desktop” version responsive. I’ve seen several requests for this in this forum and a whole lot more on the internet in general, and the answer is usually that it’s not possible, because the comments are in an external iframe, so you can’t style it, not even with javascript due to cross-domain scripting violation.

After lots of testing in firebug I found a solution! You can see it in action on reisfavoriet.nl

To make the comments responsive you need to do 2 things:

1. go to Add Link to Facebook settings. On the comments plugin tab enter 100% in the width box. Yes it says to enter pixels, but entering 100% is working fine. Now check the output on your page. The iframe src should have an url parameter width=100% in it, and the comments box should now be 100% wide and several elements inside the div .al2fb_comments_plugin should adjust to your width when you resize your browser. If not then check your styling and that .al2fb_comments_plugin is not wrapped in something that is smaller than 100%

2. Now that your “comments wrapper” is responsive you’ll find that the iframe content is not resizing, and we cannot style inside the iframe. I tried to set the iframe to 100% width but that doesn’t work. Then I found out that the content *does* resize if you set a fixed width!

And so the solution is to use a script that every time the screen is resized it takes the new fixed width (in px) and sets the iframe to that width. I wrote the following script, which uses WP built-in jQuery. After load and resize of the page it takes the width of the al2fb_comments_plugin div and copies it to the iframe width.

<script>
jQuery(window).on('resize',function() {
jQuery('.al2fb_comments_plugin iframe').css('width', jQuery('.al2fb_comments_plugin').css('width') );
});
jQuery(document).ready(function() {
    jQuery(window).trigger('resize');
});
</script>

As you probably want it on every page you could add the script with a plugin that add scripts to the header, or you can put it in a text widget in the sidebar or footer.

NOTES:
* this depends on facebook functionality. It could stop working if they change their code
*no guarantees that it will work for everybody. There’s Always a chance it causes conflicts with other scripts etc. Use at your own risk.
* be aware the script also changes the default behavior of the mobile comments, which does use the 100% width iframe, but also works with my script. If you want it output on non-mobile browsers only then you could use a plugin like wp mobile detect or mobble/mobble shortcodes.
* this does not work on the comment widget, but if you want you can probably adapt the script etc. Or let me know and I’ll see what I can do.
*I’d really appreciate backlinks, likes or shares of my content or my facebook page, especially from you dutchies out there. THANKS!

https://www.ads-software.com/plugins/add-link-to-facebook/