facebook likes facebook like share button code how to facebook like button recommend button

You might wonder how do you add Facebook like or Facebook recommend button into your Website. Here is code and how to add Facebook Like Button plus Facebook Like button settings.

Related Articles:

facebook likes facebook like share button code how to facebook like button recommend button

Option 1

XFBML option:

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

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<fb:like href="www.dieselbarracuda.com"
send="true" 
width="450" 
show_faces="true" 
font="arial">
</fb:like>


(Inline Frame - iFrame) option:

<iframe src="http://www.facebook.com/plugins/like.php?

href=www.dieselbarracuda.com&amp;
send=false&amp;
layout=box_count&amp;
width=450&amp;
show_faces=true&amp;
action=like&amp;
colorscheme=light&amp;
font=arial&amp;
height=90" scrolling="no" 
frameborder="0" 

style="border:none; overflow:hidden;
width:450px; height:90px;" allowTransparency="true">
</iframe>

There is 2 different ways how to add Facebook like (or Facebook Recommend) button into your website.

facebook likes facebook like share button code how to facebook like button recommend button

Option 2

<meta property="og:title" content="DieselBarracuda" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.dieselbarracuda.com" />
<meta property="og:image" content="http://www.dieselbarracuda.com/images/logo.jpg" />
<meta property="og:site_name" content="DieselBarracuda" />
<meta property="fb:admins" content="100001062444906" />

Option 2 use tags which stands for Open Graph Tags. it works a bit better, but there will be a problem validate version of Facebook Like Button in W3C if you care about that. Plus you put these TAGS into your in your HTML document.

facebook likes facebook like share button code how to facebook like button recommend button

Option 1 settings

2 types of Facebook Like or Facebook Recommend Button codes.

XFBML and Iframe. The XFBML version is a bit better, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display etc.

The other version use iFrame which stands for (Inline FRAME) which is defined as: An HTML structure that allows another HTML document to be inserted into an HTML page.

facebook likes facebook like share button code how to facebook like button recommend button

Option 1 Like vs Recommend plus send button

Options for send button

<fb:like 

send="true" or send="false"

></fb:like>


Button type:


<fb:like 

action="like" or action="recommend"

></fb:like>

send button works only with XFBML code! Then you can choose for your button to read "Like" or "Recommend"

facebook likes facebook like share button code how to facebook like button recommend button

Styling Facebook Like button

A) standard (no need to specify - by default)

B) Button Count (horizontal style)

layout=button_count

C) Box Count Style (vertical style)

layout=box_count



and for light and dark themed websites facebook has light and dark theme of their button:

colorscheme="light"

colorscheme="dark"

Facebook gives you 3 different styles / types of button look:

Related Articles: