Facebook Send: Adding A Button To Your Theme

Whilst there are dozens of plugins available to add a Facebook Like / Send button to your wordpress website, you may want to code the button into your theme.

There are two reasons you may want to code the button into your theme:

1. To place the button EXACTLY where you want it to appear… not all plugins give you that flexibility
2. To reduce the number of plugins being loaded on your website and improve load time.

Adding the button is a matter of a couple of edits to your theme.

Adding the Facebook Like / Send button…

The important thing is to decide where you want to place the Facebook Like / Send button! Generally, the button is placed at the end of posts, but it can be placed just about anywhere in the post and if you have some CSS Skills, you’ll be able to format the placement more effectively than I’m sharing here.

Let’s assume that we’re going to place the button just under our Post Headline.

For this example, I’m going to add the Facebook SEND button to the individual post pages on my site – however, the instructions can be adapted for any page template in your theme.

Go to wp-admin -> Appearance -> Editor

In the list of files, shown on the right hand side of the editing box, locate the file called single.php (if single.php is missing, then it’s likely that index.php will be required) and click on it.

Locate the ‘loop’ section within that file – the start of the loop will look something like:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

This is the part of the post that actually gets the information for the post from the database and displays the ‘elements’ on the screen.

‘the loop’ ends with the part:

<?php endwhile; endif; ?>

Next, within that loop, locate the part that displays the headline (because we want to display our SEND button under that area).

In most themes, that will be the part that looks something like:

<h2><?php the_title(); ?></h2>
[gcode]
(each theme will have a variation on this, but essentially you're trying to find the bit that shows the_title())
On the next line in the code is where we'll work out magic to insert the Facebook Send button.  Copy and paste the code below:
[gcode]
<!– facebook like button –>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<?php echo get_permalink(); ?>" show_faces="true" colorscheme="light" width="450" send="true">
</fb:like>

Save your update by clicking on the update file button, and you’re finished.

Test the button by viewing a single post and watching the Like and Send button appear.

For more customisation on the Like and Send button, checkout the Facebook Social Plugins – Like Button page.

Have you implemented the new SEND button on your wordpress website? How did you implement it, and if you used a plugin – which one did you use?