Boost Engagement: Add Facebook Page Widget to Blogger Easily

Before you make any changes, always back up your Blogger or Blogspot theme/template. This is a crucial step! If anything goes wrong while you're making updates, you can easily restore your blog to how it was before. This simple precaution can save you a lot of time and potential headaches.

1. Add the Widget: Go to your blog's Layout section. Choose to add a new widget, specifically an HTML/JavaScript widget, in your right sidebar. Copy and paste the code provided below into the blank Content box. Remember to change "Gritld" in the URL to your actual Facebook page username or vanity URL to link correctly to your page. After pasting, save the widget.

<center><div class="fb-page" data-href="https://www.facebook.com/gritld" data-width="360" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false"  data-show-facepile="true"></div></center>

2. Insert Facebook SDK: Next, you need to add the Facebook SDK (Software Development Kit) script. This is a small piece of code that allows Facebook features to work correctly on your site. Copy and paste the provided SDK code just before the </body> tag in your blog's HTML. Once done, save your theme.

<!-- Facebook SDK -->
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v20.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Now, refresh your blog. You should now see your Facebook page displayed on your site! This allows your visitors to easily like and share your Facebook Page directly from your blog, without having to leave your site. This can help increase your Facebook engagement and drive more traffic to your social media presence.