CHAPTER 10 • Integrating the Social Web 241
The second part is the code that will actually output the Facebook Like button, and this is the
part of the code that carries your specific settings, such as whether the faces of users who
liked a post should show up and things like that:
<div class="fb-like" data-href="http://tdh.me" data-send="true" data-width="450"
data-show-faces="true">
You’ll notice that "http://tdh.me" is stored in data-href in the preceding code. That’s
where you want the_permalink(), like this:
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true"
data-width="450" data-show-faces="true">
Just put this code snippet within the loop in your various theme templates (such as single.
php) where you want to let people like things, and you’re ready to go.
But what about that XFBML thingy? That code is a bit more versatile and is probably the right
way for you to go if you do a lot of things with Facebook on your site. It might be a bit
daunting, however, as it doesn’t use familiar HTML tags through and through, so if you just
want a Like button, you might prefer the HTML5 solution. Either way, all details on how to
load the JavaScript SDK so that you can use the XFBML code instead are available here:
http://developers.facebook.com/docs/reference/javascript.
Obviously, you need to change the code here as well to get it to work with WordPress. Just as
with the HTML5 option, there’s a place where you want to use the_permalink() instead
of "http://tdh.me" (or whatever you put in). The code you want to alter is the one for
including the button:
Just swap out "http://tdh.me" for the_permalink() in href within the loop as well,
and you’re good to go, like this:
<fb:like href="<?php the_permalink(); ?>" send="true" width="450"
show_faces="true"></fb:like>
When using XFBML, you can use the fb HTML tag for various Facebook features — fb:like
here, for example. Don’t forget to include the JavaScript SDK; otherwise, this tag won’t work.