Simple Step-by-step Guide on How-to Add Facebook Page Plugin on Blogger

Male opening his Facebook account.

Before you apply the following changes make sure to back up your Blogger or Blogspot theme/template first. So that in case you face any problems with applying the changes you can easily revert back to its previous condition by just restoring it using your backup.

1. In your blog's Layout section add a widget in your right sidebar by choosing the HTML/JavaScript widget and copy and paste the below code in the blank Content box then save. Don't forget to change vdbzone in the URL to your Facebook page user name or vanity URL.

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

2. Now add the Facebook SDK script by copying and pasting the below code before the </body> tag of your blog's HTML. Finally, 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=v11.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Refresh your blog and you should be able to see your Facebook page. Now, your visitors can like and share your Page without leaving your site.

Your voice matters. Discussions are moderated for civility before being published on the blog. Read my comment policy here.

Previous Post Next Post