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.
How to Make the Facebook Like Box Responsive
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&width=700&height=185&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" style="overflow:hidden; width:700px; height:185px;"></iframe> </div>
<div class="facebook"> <iframe src="//www.facebook.com/plugins/likebox.php?href=href=http%3A%2F%2Fwww.facebook.com%2Ftechclause&width=700&height=185&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" style="overflow:hidden; width:700px; height:185px;"></iframe> </div>
- Replace techclause with your Facebook fan page username.
- If you are using Blogger here is how to add Widget to blogger blog.
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 | Tweet |
|
|
Looking for More Tricks?
