How To Make Facebook Comments Responsive in WordPress
August 8, 2012
wordpressOn 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
Active Projects
Here are some of the projects I am currently working on. Some are side projects, some are client projects, and some are just for fun. I like to build things and I like to share what I learn along the way. If you have any questions about any of these projects, feel free to reach out.
🏗️ JSONL Tools
I am working on a set of tools to help me work with JSONL. JSONL is a simple format for working with JSON data. I am working on a set of tools to help me work with JSONL data. I will use these tools to help me work with my own data as well as help me build my own APIs. Read more about this project in my blog post about building JSONL Tools.
🤖 Make Storytime
Personalized children's stories generated by AI. This is an app I am building with my kids.
📠 Fax Online
Yea, I know. But there is a long tail for everything and believe it or not there was an underserved market for people that need to send a fax online. Some people (like me!) just need to send a one time fax.
Read more about this micro Saas project in a blog post about building an online fax service.
🥑 Free URL Indexer
Free URL Indexer is a free tool to help you index your backlinks and get them into Google faster. It's a simple tool that I built to help me with my own SEO efforts and I decided to share it with the world. It's a free tool and I don't even ask for your email address. Just paste in your URL and click the button.
👉 See all projects