Categories
WordPress

How To Add Facebook Like Button On WordPress TwentyTen Theme

I’m dssecting the TwentyTen new WordPress theme to better understand what’s new on WordPress 3.0 theme system and to work on a theme the best way is to use it (on www.satollo.com).

One of the first task was to add the “like” button of Facebook, on single posts and on home and category pages.

To add it on single posts, just open the file “single.php” and find the line:

<div class="entry-content">

and after it add the code generated by Facebook:

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

the “href” parameter should be set to:

href=<?php echo htmlspecialchars(get_permalink()); ?>

The same procedure can be tried on “loop.php” the new theme file which prints out the posts list. Pay attention tha “loop.php” contains a lot of “if” and a number of places where the list is printed.

If you want to align the like button on the right of the title, just modify the “style” attribute of Facebook iframe generated code adding “float: right;” and then insert the generate code in to the H2 tag the surround the title (use only the button_count format and force the width to 90 pixels):

<h2><a href="<?php the_permalink(); ?>"...>" rel="bookmark"><?php the_title(); ?></a>
<iframe ... style="float: right; ... width:90px; height:21px;"></iframe>
</h2>

You can see the effect on main page of www.satollo.com.

4 replies on “How To Add Facebook Like Button On WordPress TwentyTen Theme”

Leave a Reply