How to add Facebook Page widget on Blogger blog or website?

How to add Facebook Page widget on Blogger blog or website

For those who blog and also maintain Facebook Pages, it may be a good idea to add Facebook Page Widget to Blogger blog or website, so that visitors can know, like the page, share and easily see contents posted on the page without the need to visit Facebook. They could also visit your Facebook page easily from the blog. Facebook provides various Social Plugins to easily integrate with any kind of website.

Check out a tutorial video: How to create Facebook App and add Facebook page box to Blogger/Website?
 
How to add Facebook Page on your Blogger blog or website?

Step one: Create a Facebook App for your blog site

Skip this step if you have created the Facebook App for the website, or have already added a Facebook Comment on the website or Blogger blog as we discussed in the previous post. In the previous post, we discussed how to add Facebook Comment box on Blogger or website. If you have added Facebook Comments on the site, then you have a Facebook App and the Facebook SDK code should already be added to the website. There is no need to add again.

Skip to Step Two (B) straight ahead (at the bottom).


If you have not created a Facebook App then, you need to create a Facebook App first.

• Go to this link and to create Facebook app: https://developers.facebook.com
• Hover on the "My Apps" drop-down button near the Facebook Account name (top right corner) 
• Click on "Add a new app"

• The platform selection window will open. Since we are going to add comment box on a Blogger blog site, click on "Website"

• In the next page, enter the name of the Facebook App. Preferably keep a name related to your blog site so you can identify easily later on.
•  Choose a category for the app.
• Click "Create App ID"
• In the next page, scroll down and under "Tell us about your website", enter the URL of the Blogger blog site. Click Next to proceed.
• In the next page, scroll down to the bottom, and under "Next Steps", click on "Social Plugin"

• Facebook Social Plugins page opens. Click on "Page Plugin".

• In the "Page Plugin" section, click on "Web" -We'll get a Page Plugin Configurator and a code will be generate for the Page Plugin box.

Facebook Page Plugin Code Generator

Provide the details required in the Facebook Page Plugin Code Generator, which includes -


1. Facebook Page Url

Open a browser and open Facebook. Search for your Page and open it. Copy the link displayed in the browser address bar. Example: https://facebook.com/yourpagename


2. Other settings you can enable/disable are: Use Small Header, Adapt to plugin container width, Hide Cover Photo, Show Friend's Faces. Select whatever is required and the preview is displayed.

3. Get Code

Click on the "Get Code" button. The plugin code and instructions to add it on the website are displayed.


Note: Keep this page open, we will refer to it again.

Step Two: Integrating Facebook Page Plugin to Blogger Blog or website

Till here, we have created a Facebook App, configured it and the code is generated. Now let's integrate it with the site.


If you had added a Facebook Comment to the website or blogger blog as discussed in the previous post, you don't need to add the JavaScript SDK code again in the Blogger Template or website template. In that case, skip step A below.


A) Add the first code from Facebook (JavaScript SDK)

1. Login to Blogger and click on your blog for which you just created the Facebook App

2. Click on "Template"

3. Before proceeding, backup your current Blogger blog template by clicking on the "Backup/Restore" button on the top-right. Select to download a full template. Save it on your computer.


Before editing the Blogger template, it is a safe practice to always backup so that we can restore if something goes wrong. It is easier and time saving to revert to the previous configuration instead of troubleshooting and finding the line where the mistake was made.


4. With backup taken, click on "EDIT HTML". A page opens which contains the Blogger Template's XML code. Be careful when making any changes else it may break. But we have a copy backed up, don't we?

5. Refer the Facebook Developer page open: Facebook is telling us to "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag."

• Find the <body> tag: click any where inside the code once and press "CTRL+F" to show the search bar.
• Enter only "<body" without the ending ">" in the search bar and hit enter. The <body> tag may look like this.

         <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

The reason why we did not search with <body> is because there are some code in between <>, and the search will fail otherwise.

• Go back to the Facebook Developer page which we kept open, and copy the JavaScript SDK code displayed right under "Include the JavaScript SDK on your page once, ideally right after the opening <body> tag." The code looks like this:

         <div id="fb-root"></div>
        <script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=YOURAPPID";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

•     Go to the Blogger EDIT HTML page and paste the code right after the end of the <body> tag.
•     Click on "Save Template".
•     Now you should be getting an XML parse error which says:

Error parsing XML, line 663, column 64: The reference to entity "version" must end with the ';' delimiter.

• Edit the code by changing "&"(ampersand) highlighted in red below with "&amp;" highlighted in green

Before Edit: the culprit is the ampersand (&) before "version" and "appId" in the line starting with js.src
         <div id="fb-root"></div>
        <script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=YOURAPPID";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

 After Edit: replaced & with its entity name as shown below

         <div id="fb-root"></div>
        <script>(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 = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5&amp;appId=YOURAPPID";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

After editing, Save the Template and the parsing error should not appear again.

    B) Add the second code from Facebook (Page Plugin Code)

For Blogger, you can paste the second code in Blogger's HTML/JAVASCRIPT widget, drag and drop the widget to any area in the layout where you want the Facebook Page widget displayed.

•     Go to the Blogger > Layout > Add a gadget
•     Select "HTML/JAVASCRIPT"
•     Paste the second Facebook code in it
•     Save

For regular website, just paste the second code in the area you want to appear, preferably on sibebars.

Hope you found this post helpful.

If you have any queries on this and suggestions, please share your views in comments.

Related previous post:
How to add Facebook comment to blogger? (New Blogger Template)