How to add the Facebook like button to WordPress. We're finally making use of the Facebook Social Plugins for the Thesis theme, Genesis framework, etc.

Add Facebook Like Button to WordPress

Written by in Tutorials |

This is part 4 of 7 in the Facebook Social Plugins series:

By now you should have your Facebook app ID, the JavaScript SDK added to your page(s), and the Open Graph protocol <meta> tags added to your <head>. We finally get to make use of all that with Social Plugins — specifically the Like button. We’re not going to mess around with the iframe version as we’re going for full integration — XFBML or bust. It’s time to party.

The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user’s friends’ News Feed with a link back to your website. ~ Like Button

The Like Button Attributes

The standard (default) Like Button plugin XFBML code looks like this:

<fb:like></fb:like>

The above code will render a like button similar to the one you see before and after this post. However, we can customize this code using the following attributes:

  • href – this is the page you want liked. If no URL is entered it defaults to the current page.
  • send – specifies whether to include a Send button with the Like button.
  • layout- there are 3 different layouts:
    • standard – displays social text to the right of the button and friends’ profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
    • button_count – displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
    • box_count – displays the total number of likes above the button (see example at beginning of this post). Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
  • show_faces – this toggles the faces on/off for the standard layout.
  • width – …umm…the width.
  • action – you can choose whether the button says ‘like’ or ‘recommend’.
  • font – options are: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, and ‘verdana’.
  • colorscheme – you can choose ‘light’ or ‘dark’.
  • ref – for tracking referrals. For instance, the ref on the like button above this post is ‘top’ and below is ‘bottom’. That way I know which button is being clicked more.

To create a like button similar to the one that’s floated to the right at the beginning of this post I would use the following:

<fb:like layout="box_count" show_faces="false" send="false" width="55"></fb:like>

Add the Like Button to WordPress

For General WordPress Users

Open up your single.php file or equivalent and add the following code wherever you want the Like button to appear:

<div class="fb-like"><fb:like layout="box_count" show_faces="false" send="false" width="55"></fb:like></div>

For Thesis Theme Users

Open your custom_functions.php and add the following:

//ADD BOX COUNT LIKE BUTTON TO RIGHT OF EVERY POST
function fb_like() {
	if (is_single()) { ?>
		<div class="fb-like"><fb:like layout="box_count" show_faces="false" send="false" width="55"></fb:like></div>
	<?php }
}
add_action('thesis_hook_before_post', 'fb_like');

Don’t forget to add some CSS styles to your custom.css file to get the button to float right:

.fb-like {
	float: right;
	margin: 0 0 5px 15px;
}

Like Button Analytics (Insights)

Facebook Insights Dashboard

Facebook Insights Dashboard

Since you’ve already added the appropriate <meta> tags (fb:admins and fb:app_id) all you have to do is claim your domain to start receiving Domain Insights.

  1. Go to your Insights Dashboard.
  2. Select the green “Insights for your Domain” button.
  3. Enter your domain and link it to either you or your corresponding Facebook page.
  4. Click ‘Check Domain’.

Now you should have access to the number of likes, shares, feedback, reshare rate, and demographics.

Enjoy this post? Consider sharing it: