Many other blog posts on adding a Facebook likebox on Blogger have become outdated since, earlier, like box plugin was used for this purpose but now it has been deprecated by Facebook.
Let's see how we can add a Facebook like box widget as in the below image on Blogger blog page.
Head over to Facebook's Page Plugin docs → https://developers.facebook.com/docs/plugins/page-plugin.
Enter your Facebook page URL as asked on that page. You'll get the preview of how your like box will look as shown in the image below.
If the preview doesn't show up, it means that your page is not published yet. In that case, head over to your Facebook page and publish it first.
By default, the box shows the page's posts too. Now, many of us including me wouldn't want that. So for that just remove the value 'timeline' from the field 'Tabs' and let it be blank.
Next click on the button 'Get Code' right below the preview. You'll get a popup as shown below.
There are two tabs at the top. Click on 'IFrame'.
Copy the code in the IFrame tab.
I want it in my right sidebar so I click on the option there as seen below.
Click on the gadget HTML/JavaScript.
Add your code in the 'Content' box and the 'Title' field blank.
Click on Save. Then click on Save Arrangement button in the top right corner.
And, you're done! Your blog now has a Facebook like box of your page.
Wanna go a step ahead and add a Facebook Like button too for each of your posts?
I have done that for my blog and have written about it too here,
How To Add A Facebook Like Button To Each Blogger Post
Let's see how we can add a Facebook like box widget as in the below image on Blogger blog page.
Step-1:
Head over to Facebook's Page Plugin docs → https://developers.facebook.com/docs/plugins/page-plugin.
Step-2:
Enter your Facebook page URL as asked on that page. You'll get the preview of how your like box will look as shown in the image below.
If the preview doesn't show up, it means that your page is not published yet. In that case, head over to your Facebook page and publish it first.
Step-3:
By default, the box shows the page's posts too. Now, many of us including me wouldn't want that. So for that just remove the value 'timeline' from the field 'Tabs' and let it be blank.
Step-4:
Next click on the button 'Get Code' right below the preview. You'll get a popup as shown below.
There are two tabs at the top. Click on 'IFrame'.
Copy the code in the IFrame tab.
Step-5:
Now you need to paste the code wherever you want the like box to appear.
For that, go to your Blogger dashboard and click on Layout option in the sidebar. There, click on 'Add a Gadget' where you want the box to appear.I want it in my right sidebar so I click on the option there as seen below.
Step-6:
Click on the gadget HTML/JavaScript.
Add your code in the 'Content' box and the 'Title' field blank.
Step-7:
Click on Save. Then click on Save Arrangement button in the top right corner.
And, you're done! Your blog now has a Facebook like box of your page.
Wanna go a step ahead and add a Facebook Like button too for each of your posts?
I have done that for my blog and have written about it too here,
How To Add A Facebook Like Button To Each Blogger Post
You can do a similar thing with Twitter by adding 'Click to tweet' links which I've covered here, How To Add A Click To Tweet Link To Your Blog Or Website
