How To Make Facebook Comments Responsive in WordPress

On most WordPress themes we develop the Facebook comment platform is used. Some like it because it's social... Others like it because it's the best way to keep comment spam out. At 48Web, we've made it the default comment system in our WordPress Bootstrap Starter Theme. When I got down to implementing Facebook comments in our WordPress starter theme I immediately ran into an issue of responsiveness. The code Facebook gives you has a static width. This is good for 80% of the themes and is easy to change. But when you are creating a theme framework/starter theme you never know how someone else will implement the layout. Not to mention a 450px Facebook comments doesn't look great when the browser is narrowed (like you would see on mobile). So, here's how we implemented it to be responsive, and simply grow to its container size.

How to Make Facebook Comments Responsive In WordPress

1. Add rules to your CSS file of choice (see ours) 2. Update comments.php to load Facebook Comments Here's a gist with everything you need to implement responsive Facebook comments in WordPress. tip via http://wordpress.org/support/topic/making-facebook-comments-responsive