Sunday, 3 March 2013

How to Make Facebook Like Box Responsive

If you are using responsive layout for your blog or website, you should make the Facebook like box responsive. After using responsive layout for my Blog, there was everything responsive except the Facebook like box. Finally I have found a quick solution to make the Facebook like box responsive with a bit of CSS and a div to enclose the iFrame. The responsive Facebook like box will make your blog more beautiful on mobile devices. So here, I am going to share how to make your Facebook like box responsive.

Facebook Like box, Responsive Facebook Like Box

This is how responsive Facebook like box looks. Resize your browser or have it on a mobile or other smart devices such as Tablet, iPhone or iPad to see its responsive design. Once you have added like box code to your blog it looks like this. See the live demo below.


How to Make the Facebook Like Box Responsive
Here is the step by step guide to make the Facebook like box responsive on your blog. Follow the below instruction for Responsive Facebook like box.

Step: Add HTML and CSS to Facebook Like Box Code.


  • Add this HTML and CSS code as widget on your Blog. Copy the below code to add responsive Facebook like box to your blog/website.
<style> .facebook { overflow: hidden; border: 1px solid #d5d5d5; } </style>
<div class="facebook"> <iframe src="//www.facebook.com/plugins/likebox.php?href=href=http%3A%2F%2Fwww.facebook.com%2Ftechclause&amp;width=700&amp;height=185&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" style="overflow:hidden; width:700px; height:185px;"></iframe> </div>

Once you have followed the above step to get the code for Responsive Facebook like box. Now add this code to your blog to make the Facebook like box responsive on your blog. 
This is a quick trick to make your Facebook like box responsive. Hope you like this hack to make the Facebook like box responsive. Follow the above step, and if you face any issue regarding making the Facebook like box blogger, ask me via comment box below.

Share

Looking for More Tricks?

Chiranjeev - Founder & Editor at TechClause

Chiranjeev kumar is a Tech Blogger from India. At TechClause he writes on Technology, How to Guides, SEO, Blogging and Social media.

Connect With Me: Facebook Twitter Google Plus