Home
How To

How to Add Official Facebook Fan Box Plugin on Google Blogger?

How to Add Official Facebook Fan Box Plugin on Google Blogger?
facebook fan

World's leading social media service provider is Facebook. There are billions of active users using this service for chatting, sharing, promoting and Business purposes. There are endless opportunity providing by Facebook free of cost. Facebook is holding a strong position and no other social media service can beat them.

If you are new to Blogging you won't see any site without Facebook Fan Page or Box. Because Facebook fan increase the brand image of any website or Blog. And we can easily judge any site's popularity by the number of Facebook Fan. There are many readymade Fan box widget available over the net but most of them take time to load or have some bugs because those are tweak by designer or used heavy coding script. Only few widget that developed by professional developer that load faster on landing page of Website and Blog. So from my point of view we should use official  Facebook Fan Box only in our Blog which can perform smoothly. Currently Facebook is providing Light and Dark version of their Fan box. So you have only two option about color.

Getting Facebook Fan Box Code from Official Site

You can integrated or add Official Facebook Fan Box on Google Blogger easily. First we have to avail code from Facebook site.

Step 1 Go to https://developers.facebook.com/docs/plugins/like-box-for-pages/ and log in to your Facebook account by clicking on Log in button from top right corner of the screen.

Step 2 Now you will see a box with customization option. There Under Facebook Page URL writeyour Facebook Page URL. My Fan page name is BloggerSpice so I have written the URL as http://www.facebook.com/BloggerSpice.

Step 3 In case of Width and Height of the widget you can set according to your widget area size. Remember that the Plugin width and Height will measure by pixel. By default 300px is the best measurement for width.

Customization


Step 4 You can also choose Color Scheme light or dark. For white and light color Blogger template light option is suitable and for Black or Deep color template dark option is suitable.

fan box

Step 5 For showing your Fan's Faces just tick on checkbox beside Show Friends' Faces. Uncheck the Show Header option to remove the Facebook Header.

Step 6 If you want to show your shared post with your Facebook Fan Box then you can put tick on checkbox beside Show Posts option. Beside of this if you want to show Border in your Fan box then you can Put tick on checkbox beside Show Border.

social post

Step 7 After completion of your customization click on Get Code button. And instantly a pop up window will appear with Plugin Code.  Code will display in several script like HTML5, XFBML,IFRAME,URL

Step 8 Now select the IFRAME because we will use IFRAME code for integration. And copy the whole code.

IFRAME code

How to add the Facebook Fan Box code in Blogger Gadget?

In this part we will learn that how we integrate Facebook Fan Box code (IFRAME code) in Blogger Gadget.

Step 1 Go to https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now paste the IFRAME code of Facebook Fan Box which you have copied in "HTML/JavaScript" Gadget.

Now you can check your Blog that Facebook Fan Page is showing with Fan Faces. If you have any query then feel free to leave a comment below.

2 comments

  1. Not Work System Change
    • Eveything is ok.. nothing has changed. you have to login in your Facebook account first.. after then go to below link---

      https://developers.facebook.com/docs/plugins/like-box-for-pages/

      and setup your facebook like box. Thanks
Go Up