Multiple Facebook Like Buttons on One Page

Nowadays, the Facebook Like button has become very important tool for sharing articles on world’s largest social network. Therefore, a large number of websites deploy this tiny button so as to allow users to share content easily.

Often, people want to put more than one Like button on a web page. For example, one to like the domain name of the website (e.g. www.example.com) and another to like the particular article (e.g. www.example.com/my-article) … Moreover, sometime you might want to show a like button opposite every item in a list of articles! To do so, follow these instructions:

Use Only One Div with ID “fb-root”

Many people simply copy the code provided by Facebook and paste it in their webpage. For the next button they will create another instance of the code from Facebook and paste it again in their web page. This creates multiple instances on fb-root div in your code. To avoid this just place the following code right before closing the body tag:

1	<div id="fb-root"></div>

Add Like Buttons

Now use the following code to add as many Like buttons as you want. Just keep pasting this code wherever you need the Like button:

1	<fb:like href="http://example.com" send="false" layout="button_count" show_faces="false"></fb:like>

Change the href value as required.

Add Facebook JavaScript Code

Now add the following JavaScript to initialize the Like buttons you have added. You need to add the following code just once and it should be placed after all the Like buttons have been added.

1	<script type="text/javascript">

2	window.fbAsyncInit = function() {

3	FB.init({appId: 'put your fb app id here', status: true, cookie: true, xfbml: true});

4

};

5	(function() {

6	var e = document.createElement('script'); e.async = true;

7	e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';

8	document.getElementById('fb-root').appendChild(e);

9

}());

10

</script>

All your Like buttons should be working fine now!