Monday, 22 August 2011
Add A Facebook Like/Fan Box To Blogger
Do you like this story?
Here is a tutorial on adding a Facebook Like box (formerly a Fan box) to Blogger/blogspot. It’s a good way to promote your Facebook page. A Like box lets your readers:
- See how many users already Liked your page.
- Like your Facebook page with just one click, without having to visit the page.
- Read your page’s recent posts (if you choose to display them).
(Looking for Like button instead? Learn how toAdd Facebook Like button here)
Now let’s proceed shall we?
I) Get your Facebook page ID URL
- Visit Facebook and go to your page.
- Copy the
IdURL from your browser’s address bar.It’s at the end of the url.Trim the URL until you get something like this:http://www.facebook.com/pages/Blogger-Sentral/115496238467364
[http://www.facebook.com/pages/PAGE-NAME/PAGE ID]
II) Configure your Like box
- Go to Facebook Like box configuration page (opens in a new tab/window). You will see a configuration box, like this (Facebook has replaced Facebook Page ID with Facebook Page URL):
- Now paste your page
IDURL inside the Facebook PageIDURL text box. - Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
- Click Get Code button when done. You’ll be given two codes, titled iframeand XFBML. You only need the iframe code.
- The iframe code should look more or less like this (do not copy this code):
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogger-Sentral%2F115496238467364&width=292&connections=10&stream=false&header=true&height=280" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:280px;" allowTransparency="true"></iframe>
Update February 2011:
It seems Facebook (perhaps erroneously) has the box height fixed to 62px. This allows only your Facebook page title and the Like button to appear inside the box. The faces will be hidden. To show them, you must increase the height. For example, to show two rows of faces, change theheight
to 280px. There are twoheights
in the code, make sure you change both. - Copy the code (the code provided by Facebook, not the code in no.5).
- In Blogger, go to Design > Page Elements and click an Add-A-Gadget link. Select HTML/Javascript gadget and paste the code in the content box.
- Save and view your blog.
- Enjoy!
This post was written by: kashif
For Suggestions and complains email us at pakcompany@yahoo.comTwitter
Subscribe to:
Post Comments (Atom)
2 Responses to “Add A Facebook Like/Fan Box To Blogger”
26 August 2011 at 13:08
Thanks man for full explanation i want it for my blog.
26 August 2011 at 17:06
your welcome brotheryour welcome brother
Post a Comment