How to Add Facebook Like Box on Blogger

How to Add Facebook Like Box on Blogger

In this post I will explain you, how to add Facebook Like box or Facebook Fan box in blogger

Facebook like box or Facebook  like button designed only for Facebook pages.  Facebook Like Box is a very useful widget to show users and like of the people for this blog or website. Facebook offers  a  Facebook Page Plugin that you can integrate into own blog or website.

Facebook Fan Page or Facebook Page are a great place to promote own blog or website. It helps will increase the number of your Facebook Fans or audience.  So Facebook Fan Box or Facebook Like button is essential part of most of the blog or website.

Lets start how to add Facebook Fan Box or Facebook Like button in blogger(blogspot) blog.

Follow These Steps

Step 1.   Make sure you have already created  Facebook Page or Facebook Business Page or Facebook  Fan Page if not first create the Facebook Page for this see my previous post(see How to Create a Facebook Page)

Step 2.   Go to browser and open this link https://developers.facebook.com/ screen shown below

Add Facebook Like Box on Blogger

Step 3.   Click Docs tabs(see on top menu) and just scroll down , screen shown below

Add Facebook Like Box on Blogger

Step 4.   Click Social Plugins and just scroll down, screen shown below

Add Facebook Like Box on Blogger

Step 5.   Click Page Plugin (see left side navigation) and  just scroll down,  screen shown below
Add Facebook Like Box on Blogger

Add Facebook Like Box on Blogger

Step 6.   Fill up required field like Facebook Page URL , this fields contain your Facebook Page or Facebook Business Page or Facebook Fan Page so login with Facebook account and copy the Facebook Page URL, if you are not remember your Facebook URL or not saved your Facebook Page URL, if you have Facebook Page URL, just copy and paste in this field. But I will show you using first login the Facebook account, after login you can see you Facebook pages already created by following ways

  • May by your Facebook Page display under SHOTCUTS, just click and copy the URL.
  • Click Pages under EXPLORE section at left side navigation,  screen shown below

 Add Facebook Like Box on Blogger


Next Click Your Pages, it display all Facebook Pages you have created,  choose one of the page you want to use as Facebook Like Box or Facebook Like Button. Copy the selected Facebook Page URL, URL look like

https://www.facebook.com/gowebtuts-515969281946037/ or
https://www.facebook.com/gowebtuts/

  • Other way just Click Dropdown menu at top right side and select your Facebook Page then copy the URL, Screen shown below 

Add Facebook Like Box on Blogger

In Tabs filed  timeline as a default.

In Width field fill up 300 you can change its your requirement(The pixel width minimun 180 to maximum 500)

In Height filed  fill up 250 you can change its your requirement(The pixel height minimum is 70)

In Use Small Header section by default unchecked but you can checked if you need but in this use as a default settings that is unchecked this field.

In Hide Cover Photo section by default unchecked but you can also checked if you don’t want to show cover photo on blog or website. In this post i will use default settings that is unchecked this field.

In Adapt to plugin container width by section by default checked, also you can unchecked . in this post i will use default settings that is checked.

Last and final field is Show Friend Faces by default checked, but if you don’t want to show Facebook Friends Faces on blog or website then you can unchecked.  In this post i will use default settings that is checked this field, screen shown below

 Add Facebook Like Box on Blogger

Step 7.   Click Get Code, it open popup, screen shown below

Add Facebook Like Box on Blogger

Above screen have followings options one is Javascript SDK and IFrame, you can apply any one method on your blog but best and easy way i will show you

Step 8.   Click IFrame, screen shown below

Add Facebook Like Box on Blogger

Step 9.   Copy the Code, code shown below

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fgowebtuts&tabs=timeline&width=300&height=200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="200" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Step 10.   Login in Blogger account (go to www.blogger.com) and select blog if you have more than one blog, new blogger blog dashboard, screen shown below

 Add Facebook Like Box on Blogger

Step 11.   Click Layout (see left side navigation) and choose place where to display Facebook Fan Page,  I will choose sidebar-right-1 then click Add a Gadget it will open popup just scroll down and find HTML/JavaScript then click plus(+) sign, screen shown below

Add Facebook Like Box on Blogger

Step 12.   Fill up title whatever you want to display on blog, i will fill up Like on Facebook and copy the code you have already created or saved, just paste in content area then screen shown below

Add Facebook Like Box on Blogger

Step 13.   Click Save button, screen shown below

Add Facebook Like Box on Blogger

Step 14.   Click Save arrangement button, screen shown below

 Add Facebook Like Box on Blogger

Step 15.   View blog (see left side navigation) screen shown below


Add Facebook Like Box on Blogger
Finally you can see your Facebook Like Box or Facebook Fan Box look like, shown below

Add Facebook Like Box on Blogger






                              I hope, it helped you to understand how to add Facebook Like Box or Facebook Fan Box on Blogger(blogspot) blog.

About MSK TUTORIAL

Hi...I am Md Sahjad Karim and I am Engineering Graduate (B.E in Computer Science and Engineering) working as a Web Developer and write Blog Articles. http://www.msktutorial.com/ was launched on july 2016 to provide free online hints, tips, guides and tutorials related to technology(PHP, CodeIgniter, WordPress, Blogger etc). My primary goal is to provide the good, quality and easily to understand the articles to readers around the world.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Thanks For Visiting Blog...