Facebook Like Button And Recommend Button With fb:like, iframe and html5
Posted by in Facebook Graph API September 20, 2011 8 Comments

Nowadays, you can see Facebook Like button or Recommend button on almost website/blogs. There are varying implementation ways to show this Facebook plugin on your website.

You can implement the Like/Recommend button with iframe, xfbml or html5 but with xfbml or html5, you need to load a JavaScript file from connect.facebook.net. There are also some main attributes that you need to get familiar with:

  • width: the width of the button. Actually, the button is rendered in an iframe so it’s the width of the iframe.
  • height: this attribute only works with iframe version.
  • href: the URL to like or recommend
  • action: the verb to display on the button, ‘like’ or ‘recommend’
  • send: specifies whether to include a Send button with the Like or Recommend button
  • layout: ‘standard’, ‘button_count’, ‘box_count’

When display the button on your website/blog, depend on the design or your need, the button could be a ‘Like’ or ‘Recommend’ button with its layout from very simple (just the button and count number) to quite complex (include Send button, faces and friend names).

Below is the list of situations that I often implement for the button. I’ll embed full html source code of a comprehensive demo page and a preview link right after that.

  • 1. Simple Facebook Like button (fb:like, iframe and html5) – no text, no face
  • 2. Simple Facebook Recommend button (fb:like, iframe and html5) – no text, no face
  • 3. Simple Facebook Like button (fb:like, iframe and html5) with Send button – no text, no face
  • 4. Simple Facebook Recommend button and Send button (fb:like, iframe and html5) – no text, no face
  • 5. Like Button (fb:like, iframe and html5) with count number & friend name – no face
  • 6. Recommend Button (fb:like, iframe and html5) with count number & friend name – no face
  • 7. Recommend Button (fb:like, iframe and html5) with count number & friend name & face
  • 8. Like Button and Send Button (fb:like, iframe and html5) with count number & friend name & face
  • 9. Recommend Button and Send button (fb:like, iframe and html5) with count number & friend name & face
  • 10. Recommend Button and Send button (fb:like, iframe and html5) with count number

HTML source code of the demo page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Preview Facebook Like Recommend</title>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
</head>
 
<body>
 
<h3>1. Simple Facebook Like button (fb:like, iframe and html5) - no text, no face</h3>
<fb:like send="false" layout="button_count" width="90" font="arial" action="like" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
 
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:25px;" allowTransparency="true"></iframe>
 
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="button_count" data-send="false" data-width="450" data-show-faces="false" data-action="like"></div>
<hr />
<h3>2. Simple Facebook Recommend button (fb:like, iframe and html5) - no text, no face</h3>
 
<fb:like send="false" layout="button_count" width="90" font="arial" action="recommend" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
 
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=recommend&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:25px;" allowTransparency="true"></iframe>
 
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="button_count" data-send="false" data-width="450" data-show-faces="false" data-action="recommend"></div>
<hr />
 
<h3>3. Simple Facebook Like button (fb:like, iframe and html5) with Send button - no text, no face</h3>
<fb:like send="true" layout="button_count" width="90" font="arial" action="like" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
 
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=button_count&amp;send=true&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:25px;" allowTransparency="true"></iframe>
 
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="button_count" data-send="true" data-width="450" data-show-faces="false" data-action="like"></div>
<hr />
 
<h3>4. Simple Facebook Recommend button and Send button (fb:like, iframe and html5) - no text, no face</h3>
<fb:like send="true" layout="button_count" width="90" font="arial" action="recommend" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
 
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=button_count&amp;send=true&amp;show_faces=false&amp;width=450&amp;action=recommend&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:25px;" allowTransparency="true"></iframe>
 
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="button_count" data-send="true" data-width="450" data-show-faces="false" data-action="recommend"></div>
<hr />
 
 
 
 
<h3>5. Like Button (fb:like, iframe and html5) with count number & friend name - no face</h3>
 
<fb:like send="false" layout="standard" width="450" font="arial" show_faces="false" action="like" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
 
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:25px;" allowTransparency="true"></iframe>
 
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="standard" data-send="false" data-width="450" data-show-faces="false" data-action="like"></div>
<hr />
 
<h3>6. Recommend Button (fb:like, iframe and html5) with count number & friend name - no face</h3>
 
<fb:like send="false" layout="standard" width="450" font="arial" show_faces="false" action="recommend" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
 
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=recommend&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:25px;" allowTransparency="true"></iframe>
 
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="standard" data-send="false" data-width="450" data-show-faces="false" data-action="recommend"></div>
<hr />
 
<h3>7. Recommend Button (fb:like, iframe and html5) with count number & friend name & face</h3>
 
<fb:like send="false" layout="standard" width="450" font="arial" show_faces="true" action="recommend" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
<hr />
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=recommend&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:75px;" allowTransparency="true"></iframe>
<hr />
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="standard" data-send="false" data-width="450" data-show-faces="true" data-action="recommend"></div>
<hr />
 
<h3>8. Like Button and Send Button (fb:like, iframe and html5) with count number & friend name & face</h3>
<fb:like send="true" layout="standard" width="450" font="arial" show_faces="true" action="like" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
<hr />
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=standard&amp;send=true&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:75px;" allowTransparency="true"></iframe>
<hr />
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="standard" data-send="true" data-width="450" data-show-faces="true" data-action="like"></div>
<hr />
 
<h3>9. Recommend Button and Send button (fb:like, iframe and html5) with count number & friend name & face</h3>
 
<fb:like send="true" layout="standard" width="450" font="arial" show_faces="true" action="recommend" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
<hr />
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=standard&amp;send=true&amp;show_faces=true&amp;width=450&amp;action=recommend&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:75px;" allowTransparency="true"></iframe>
<hr />
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="standard" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
<hr />
 
<h3>10. Recommend Button and Send button (fb:like, iframe and html5) with count number</h3>
 
<fb:like send="true" layout="box_count" width="450" font="arial" show_faces="true" action="recommend" href="http://www.facebook.com/4.Rapid.Development"></fb:like><br />
<hr />
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/4.Rapid.Development&amp;layout=box_count&amp;send=true&amp;show_faces=true&amp;width=450&amp;action=recommend&amp;font&amp;colorscheme=light&amp;height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:75px;" allowTransparency="true"></iframe>
<hr />
<div id="fb-root"></div>
<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_US/all.js#&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-like" data-href="http://www.facebook.com/4.Rapid.Development" data-layout="box_count" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
<hr />
</body>
</html>

Its output

Facebook Preview Like Button And Recommend Button

Facebook Preview Like Button And Recommend Button

{ Download Source Code } { demonstration page }

Tagged:

You should know:
Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com
  • Jean-Kamal Mougammadou

    Hello,

    Since yesterday, I couldn’t choose the iframe implementation for the like button (http://developers.facebook.com/docs/reference/plugins/like/). Isn’t it the same for you ?
    Here is a screenshot for example : http://bit.ly/raQISh
    I ‘m wondering if the Like button with iframe will diseappear…

    Thanks in advance for your help !

  • hoanhuynh

    Hello,
    I’m not quite sure why the iframe disappear. It may not be supported by Facebook any more, so let try with some of my examples in the demo link or try with html5/xfbml instead.
    H2.

  • Tierney

    Hi, I found your website when I was searching for instructions on how to add FBlike button on my website. Your codes are awesome, but I can’t figure out how to add one of them on my website. I wonder if you can point me in the right direction. Thank you.

  • http://www.facebook.com/paterok Christoph Paterok

    Thank you very much! I’ve searched two hours for something like this :)

  • http://reastablish.com/tag/product-reviews-expand-all/ reastablish

    You’re actually a just right webmaster. The web site loading speed is amazing. It kind of feels that you are doing any distinctive trick. Moreover, The contents are masterwork. you’ve done a magnificent task on this matter!

  • http://www.phonesexhoneys.co.uk/ Phone sex website

    Great post, really helpful, thank you.

  • kidboy282

    tks alot