Steps to Add Responsive Facebook Like Box Widget in Blogger 2023

GIGADEV SOLUTIONS March 02, 2023

 

Want to add responsive widgets to your Facebook page, like boxes in Blogger?

 I already use a Facebook-like responsive box in my blog. If you're a desktop user, you can see it on the right sidebar under My Social Widgets. If you are a mobile user, you can see the My Social widget above the footer area. If you are a blogger or run a small business, I highly recommend using a box like a Facebook page on your website as it is the best way to put your Facebook page in front of your audience, visitors, and followers. 

   More exposure leads to more likes and more returning subscribers. Today, users are more likely to visit a website using a smartphone. You cannot ignore your smartphone visitors because smartphones have become indispensable devices for almost everyone. You need to make your blog responsive so that users of different devices can get a better user interface. The blog has a responsive design, so each section of the blog, including the widgets, also changes its width depending on the device's resolution. 

If you also have a responsive design, you won't like to add a fixed-width Facebook box. You can also use responsive boxes for non-responsive designs as they calculate the width of the parent container. So, if you have a responsive design, you should use a responsive box like Facebook, so that it adapts to the parent container because the parent container is also responsive. 

How To Add A Responsive Facebook Like Box Widget For Blogger.

  •  Access the official Facebook Pages plugin here. 
  • Enter your Facebook page URL as described below. If you want a responsive Facebook style box, check "Fit plugin container width". 
  • Check the other options if you want to display them in a Facebook-like box.


  •  Finally, click Get Code After Clicking Get Code, you will get an option like the preview below. Now select your Facebook Page in App IN (your page is not in the list, which means you have not created a Facebook application for your page 

I suggest you create a Facebook application for your Facebook page, link your existing page and install the Facebook JavaScript SDK mentioned in the link above or mentioned in this article.) Skip this step if you have already installed the JavaScript SDK on Blogger. As with the preview above, copy the JavaScript code and paste it below the tag in your Blogger source code (Blogger Dashboard -> Templates -> Edit HTML).

 The default JavaScript code may generate errors when saving the template. So check the link given in "js". src' in JavaScript and replace' &' with' &' when there is no code. It will work like a charm. The second code is used to display your Facebook-like box. You can display a similar widget in your sidebar or post content section. 

Follow the steps below.

 Responsive Facebook Like 

Blogger Sidebar Widget Go to Layout -> And Device (from sidebar or footer) - > Select HTML / JavaScript and paste the second code here.

 Finally, click Save. 

Box-like Facebook was successfully added. 

Add a responsive Facebook box below post content You can also display your Facebook box below to post content on your blogger. Go to Templates -> Edit HTML -> Click anywhere in the source code and press "Ctrl + F" to find it in your template. 

You probably have this code more than once. You can write anything, ie. Check the...below to see which one you need. 

Once you get that, uncheck the box...and paste the second code here. That's it. If you want to display your responsive Facebook box widget only on the posting page, not on the homepage or tab page, then you need to paste your second code below. If you want to hide your Facebook box from other pages, here is a complete guide to hiding or showing any widget in Blogger. 

Next: 

You might also be interested in adding the Facebook Open Graph meta tag in Blogger.

Tags:

Post a Comment

0 Comments