Description: Add Responsive Facebook Like Box Widget into your Blogger blog. You can add Facebook like box into your Blogger sidebar and below to Blogger post content.
Do you want to add a responsive widget for your Facebook page like box into your Blogger? I am already using responsive Facebook like box into my blog. You can look over in the right sidebar under my social widget if you are a desktop user. If you are a mobile user, you can view my social widget above to the footer area. If you are a Blogger or have a small business, I highly recommend you to use your Facebook page like box into your website as it is the best way to expose your Facebook page in front of your audience, visitors and subscribers. The more exposure leads more likes and returns more fans. Today, users are more likely to visit websites using their Smartphone. You can't ignore your Smartphone's visitors because Smartphone has become the must have device for almost everyone. You should make your blog responsive so that different device's users can get better user interface. This blog has a responsive design so each section of this blog including widgets will also change its width according to the device resolution.
If you also have the responsive design, you shouldn't like to add fixed width Facebook like box. You can use responsive like box for non-responsive design too as it will calculate the width with the parent container. Therefore, if you have a responsive design you should use responsive Facebook like box so that it can fit in the parent container as the parent container is also responsive.
Go to Layout -> Add a Gadget (from sidebar or footer) -> Select HTML/JavaScript, and paste second code here. Finally click on save. Facebook like box added successfully.
If you wish to display your responsive Facebook box widget only in the post pages not in the homepage or label page, you will have to paste your second code within the line mention below,
If you want to hide your Facebook like box for other pages, here is a complete guide to hide or show any widget in Blogger.
Next: You may also interested to add Facebook open graph meta tags in Blogger.
 |
| Responsive Facebook Like Box | Photo Credit:@Pixabay |
If you also have the responsive design, you shouldn't like to add fixed width Facebook like box. You can use responsive like box for non-responsive design too as it will calculate the width with the parent container. Therefore, if you have a responsive design you should use responsive Facebook like box so that it can fit in the parent container as the parent container is also responsive.
How to Add Responsive Facebook Like Box Widget for Blogger
- Go to official Facebook page plugin here.
- Type your Facebook page URL as mention below,
Make a tick on 'adapt to plugin container width' if you want to responsive Facebook like box. Now, make a tick on other options if you want to show them in your Facebook like box. Finally, click on 'Get Code' - Once you click on 'Get Code', you will get options like the following preview,
Now, select your Facebook page in App ID (Your page is not in the list, it means you haven't created Facebook app for your page. I recommend you to create a Facebook app for your Facebook page, link your existing page and either install Facebook JavaScript SDK mention in the previous link or mention in this post.) - Skip this step if you have already installed JavaScript SDK to Blogger. As in the above preview, copy JavaScript code, and paste it just below to <body> tag inside your Blogger source code (Blogger dashboard -> Template -> Edit HTML). The default JavaScript code may give you error while saving your template. Therefore, look at the link starting from 'js.src' in the JavaScript, and replace '&' with '&' without code. It will work like a charm. Second code is used to display your Facebook like box. You can display like widget to your sidebars or in the post content section, follow the steps.
Responsive Facebook Like Widget in Blogger Sidebar
Go to Layout -> Add a Gadget (from sidebar or footer) -> Select HTML/JavaScript, and paste second code here. Finally click on save. Facebook like box added successfully.
Add Responsive Facebook Like Box Below Post Content
You can also display your Facebook like box below to post content in your Blogger. Go to Template -> Edit HTML -> Click anywhere in the source code and press 'Ctrl + F' find <data:post.body/> in your template, you may have this code more than once. You can write anything i.e., checking... below to <data:post.body/> and look which one is desired for you. Once you get it remove checking... and paste the second code here. That's it.If you wish to display your responsive Facebook box widget only in the post pages not in the homepage or label page, you will have to paste your second code within the line mention below,
<b:if cond='data:blog.pageType == "item"'>
your second code here.
</b:if>If you want to hide your Facebook like box for other pages, here is a complete guide to hide or show any widget in Blogger.
Next: You may also interested to add Facebook open graph meta tags in Blogger.
