How to: add Like button to WordPress pages

In a comment on my older post explaining how to integrate Facebook Like button into your WordPress theme, Mike was asking how to add the button into pages, instead of posts like I had explained. In that post I will propose a solution to solve that issue.

The issue with the previous tutorial was with the code included in the header: it creates custom metadata for all posts, but not for pages. In order to address that problem, we simply have to add one more condition to the header:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
	<meta property="fb:app_id" content="your_app_id" />
	<meta property="fb:admins" content="your_admin_id" />
	<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } elseif (is_page()) { ?>
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "metadescription", true)); ?>" />
	<meta property="og:image" content="<?php echo(get_post_meta($post->ID, "thumburl", true)); ?>" />
<?php } else { ?>
	<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>

This solution makes use of the custom fields which allow you to add metadata into each post or page. It means that you will have to specifyeach metadata manually for each page, but that’s something you should already be doing for the metadescriptions of your pages anyway! ;)

Fill in the metadata in your admin panel

The custom field panel should appear at the bottom of your edit panel y default. If not, check the box in the screen options and the panel should appear. Then, you only have to fill in the info like I have done on the screenshot below.

The key name you use for each value only depends on what you set in the header. In our case, I have used “metadescription” for the description and “thumburl” for the image path.

Another way of handling images

As you may have seen on the code snippet above, there is a different way of creating the image thumbnail for posts and for pages. You can in fact use either of these techniques; one uses the_post_thumbnail function introduced with WordPress 2.9, the other makes use of the custom fields.

  • the_post_thumbnail
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
  • custom fields
<meta property="og:image" content="<?php echo(get_post_meta($post->ID, "thumburl", true)); ?>" />

And voilà !

That should be it. No need to worry about pages anymore. I would furthermore suggest you to use the same technique to define custom meta descriptions and keywords for each of your pages. That can help your SEO to have unique descriptions for each page.

Of course, if you know of another method, do not hesitate to let me know!

12 replies on “How to: add Like button to WordPress pages”

Should you be able to customize all the meta under “custom fields”?

I created name: metatype and value: musician, and the type appears to still be ‘article’

I just changed it to:

ID, “metatype”, true)); ? >

I should have seen that ;) Works now, but I am also getting this error now:

A required meta property is missing Your page’s type requires that a meta tag of the form be present.

Ah… must be because there is no image! Be patient with me! lol

I’ll try the custom field for it.

Works perfectly my man! Now I just need to figure out why when I like it, it’s not appearing under “likes”, but that’s another issue ;)

Thanks for all your help!!

Bizarre… if I like it from the page, it simply says on my FB page “xx likes domain.com”

Whereas it looks perfect in the FB Lint utility, and if I like it from there it says “xx likes (page name) on (site name)”

Wondering why it works on the Lint, but not on the page itself… Any thoughts? I guess that’s one for the Facebook Dev forums!

I added lines 12-16 and even added the content data without the php scipts/functions, but the pages still do not go into the facebook feeds. Any help would be great!

You may have forgotten to include line 2, which starts a loop. Without that you won’t be able to fetch the info in each meta data field. Try inserting that line before the others, and let me know how it goes!