September 6, 2011

How to Add Facebook Like Box to Your Website




You would be prefer to engage with social networks and broadcast your blog or website updates for your fans and follower to keep them up-to-date with your latest content. There are different kind of social channels you can think of nowadays. If we narrow down to Facebook, usually bloggers and webmasters create a Facebook fan page to send new updates of their site content and to engage with fans. The visitors can easily subscribe for new updates by just liking the Facebook page. But for that purpose, you have to redirect your blog or website visitors to your Facebook page. What if you can let your visitors easily subscribe or like your Facebook page while they are on your site?

Facebook offer a social plugin for websites which represent Facebook page of the site and visitors can easily like Facebook page - Facebook Like Box. Facebook Like Box is a popular social plugin you could find on most blogs or websites. It will enable users to like your fan page with a single click while on your blog or website and display how many fans on that particular page. The plugin can be personalized to display faces of existing fans and Facebook page stream too. It is very convenient for visitors who are interested in future updates to subscribe. Would you like to add it for your own site and gain more likes for your Facebook fan page while let them stay connected with your updates?

Before You Go:

Unless if you implemented Facebook JavaScript SDK in your site, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK for you.


Steps:

1. You just need to add this code to your website. Either use XFBML code or HTML5 code as you prefer.

Note: If you are a Blogger user, add your plugin code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

XFBML Markup

<fb:like-box href="[URL of Your Facebook Fan Page]" width="[Width in Pixels]" height="[Height in Pixels]" colorscheme="[Like Box Color]" show_faces="[Enable/Disable Showing Faces of Fans]" show-border="[Enable/Disable Border]" stream="[Enable/Disable Stream]" header="[Enable/Disable Header]"></fb:like-box>

Note: The XFBML markup of this plugin may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.

xmlns:fb="http://ogp.me/ns/fb#"

i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">


HTML5 Markup

<div class="fb-like-box" data-href="[URL of Your Facebook Fan Page]" data-width="[Width in Pixels]" data-height="[Height in Pixels]" data-show-faces="[Enable/Disable Showing Faces of Fans]" data-show-border="[Enable/Disable Border]" data-stream="[Enable/Disable Stream]" data-header="[Enable/Disable Header]"></div>


Color Indication Information

   - URL of Your Facebook Fan Page

   - Width of Facebook Like Box Plugin in Pixels

   - Height of Facebook Like Box Plugin in Pixels

Just specify height of your like box in pixels. Else you can leave it blank and let plugin decide the height automatically.

   - Color Scheme of Like Box

Here you are eligible to select the color scheme of the Facebook like box. Either specify light or dark here as you prefer.

   - Show Profile Pictures of Fans

You can show off profile pictures of your fans through your like box. Specify true if you would like to display faces, or else specify false here.

   - Facebook Like Box Border

Specify whether you need border for Like Box. Specify true if you would like to display border, or else specify false here.

   - Display Steam of Your Fan Page

Specify true if you would like to display stream of your public fan page or else specify false.

   - Facebook Like Box Header

You can elect to display default header with label 'Find Us on Facebook' here. Either specify true or false as you prefer.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Haider said...

Hi Mayura,

Thanks for the tips. I tries implementing the facebook like box and succeed also. But I had one problem. I can see that your facebook fan page url is "http://www.facebook.com/Mayura4Ever" and mine is something like this "http://www.facebook.com/pages/Rozi-Rojgar/298504280180990". How can I make it as http://www.facebook.com/RoziRojgar.
Please help me. My blog url is http://rozirojgar.blogspot.com/

Mayura De Silva said...

Hi Haider,

Welcome to Mayura4Ever :) You can find the answer for your query here ~ How to Claim a Username in Facebook.

Cheers...

Suntharan Muniandy @ Mr Sun said...

Very useful tips
Thank you very much..

Mayura De Silva said...

Hi Suntharan,

Thanks for your kind comments mate :)

Cheers...

Gissel said...

Thank you for this article, now here is the problem that I'm experiencing. When I get the code from facebook I copy it and paste into the add a gadget on my blog is not working. What I'm I doing wrong?

Mayura De Silva said...

Hi Gissel,

Which markup you have used to implement N which browser you are using? As a prerequisite, you need to implement Facebook JavaScript SDK on your blog to work it out dear :) You can follow this tutorial as it direct you to implement JavaScript SDK...

Cheers...

Tammy @ A Walk in the Countryside said...

I'm new to blogging and really appreciate the info. Very helpful!

Mayura De Silva said...

Hi Tammy,

You are welcome and thanks for stopping by :)

Cheers...

Unknown said...

Hi,
Thanks for the tip. I tried it going through all the steps (implemented Facebook JavaScript SDK and then pasted the code into a HTML/JavaScript element) on my Blogger page, but the Like box does not show up.
It should be showing up right underneath the Followers box, but nothing. I just see an empty space with the tools icon next to it (which all it is doing is indicating that there is a widget to edit/modify). Any ideas what I may be doing wrong?
Here's the code snippet (apart from the asterisks ofcourse):
**
Here are the relevant template modifications I made to implement JavaScript SDK:
<**body expr:class='"loading" + data:blog.mobileClass'>
<**div id='fb-root'/>
<**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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
You can observe the disappointing result here:
http://shadow69photography.blogspot.com/
Any help would be much appreciated.
Many thanks.

Mayura De Silva said...

Hi mate,

I can see your like box over there. And remove height=" " attribute from your like box code. If you got no value for height, you just remove it :)

Cheers...

Unknown said...

Thanks Mayura

Mayura De Silva said...

You are welcome mate :)

Cheers...

Unknown said...

Actually just figured out that while it works in Internet Explorer I don't see it in Firefox, so now am trying to figure out why this is happening :-)

Mayura De Silva said...

I just view your blog via Firefox and Chrome mate :) Works fine with like box. You may try clearing cache or see if there is any extension or add-on blocking it.

Cheers...

Kulwinder Kohli said...

when someone click on like, it asks to confirm and when click on confirm , a page comes with 404 error on facebook
! plz help me

Mayura De Silva said...

Hi Kulwinder,


Can you drop me the URL of your page where Like Box has been implemented? :)


Cheers...

Ankit said...

Your post seems good as I have added a like box to my blogger blog. Now I need to remove its border. Can you please help me?

Mayura De Silva said...

Hi Ankit,

Just specify border color as white or #ffffff. You will see no border around the like box :)

Cheers...

sam445 said...

how to make facebook like and twitter in tap system eg here is link http://io9.com/5989058/heres-what-it-looks-like-when-meteors-hit-the-rings-of-saturn

Mayura De Silva said...

Hi Sam,

Sorry I have no idea about that mate :) Try Google. You may find a tutorial on that or else you have to hire a developer to make one for your site.

Cheers...

sam445 said...

do u have any in your post eg:http://awesomescreenshot.com/07510o9tb3

Mayura De Silva said...

No mate, I offer design as a paid service only. You can search online for templates similar to that :)


Cheers...