Configure Facebook Like Button In WordPress

To effectively use the like button with WordPress you must first have a like button built into your template. This guide shows you how to get the basic information needed for a like button to display the correct information on Facebook.

You will enter in some information and I will show you how to pull the Permalink, Title and Featured Image URL for each individual post/page when it is “Liked”.

Configuring the Meta Properties for the like button in WordPress is actually fairly simple since WordPress comes with a lot of useful built in PHP functions.

You Will Need:

  • A like button installed
  • Basic knowledge of HTML and PHP

Configuring Open Graph Facebook Meta Data

  1. Admin User
  2. Website Name
  3. Website Type
  4. Page/Post Title
  5. Page/Post URL
  6. Featured Image URL

Enter The Following Meta Data

<!– Facebook meta –>
<meta property=”fb:admins” content=”XXXXXXXX” />
<meta property=”og:site_name” content=”TITLE OF WEBSITE” />
<meta property=”og:type” content=”company” />
<meta property=”og:title” content=”TITLE OF POST/PAGE” />
<meta property=”og:url” content=”POST/PAGE URL” />
<meta property=”og:image” content=”IMAGE URL” />

This code will go between the <head> and </head> portion of the WordPress “header.php” file. You can find this file in YOURDOMAIN.COM/wp-content/THEME_NAME/header.php.

Step 1: Admin User ID Number

  1. Enter your Facebook User ID Number In the line <meta property=”fb:admins” content=”123456789″ /> in between the “content” quotes.

*NOTE – find your facebook id

Step 2: Website Name

  1. Enter your human readable Site Name in the line <meta property=”og:site_name” content=”David Blane Studios” /> between the “content” quotes.

Step 3: Content Type

  1. Enter your Post/Page content type in the line <meta property=”og:type” content=”company” /> between the “content” quotes.

*NOTE – The Facebook OpenGraph page on Types

Step 4: Post / Page Title

  1. This is pretty easy actually. In the area where it says <meta property=”og:title” content=”YOUR WEBSITE’S TITLE” /> insert the following WordPress code in between the content quotes: <?php wp_title(”); ?>

Step 5: Post / Page URL Permalink

  1. In the area <meta property=”og:url” content=”” /> insert the following WordPress code in between the content quotes: <?php echo get_permalink(); ?>

Step 6: Featured Image URL


1. In the area <meta property=”og:image” content=”” /> insert the following WordPress code in between the “content” quotes:

<?php if ( has_post_thumbnail()) {$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘large’); echo $large_image_url[0]; } else { ?> <?php } ?>

*NOTE Featured Thumbnail Must Be Enabled In Your WordPress Theme!

2. The first half of the code (in blue) means, grab the featured thumbnail URL. There are several sizes so refer to the WordPress Codex regarding featured thumbnails.
3. After “else” the code means IF THERE IS NO FEATURED THUMBNAIL DISPLAY THE FOLLOWING. This code highlighted in red is the image for your site’s default image that will be displayed when no featured thumbnail is found.

I am a writer, web developer, photographer and beer-lover. I like to create things and make them work well and efficient.

Twitter Google+ 

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

1 Comment

  1.   |  Sunday, 02 December 2012 at 10:21 am

    Thanks a lot for the this post. Newbies like me do appreciate informative sites such as this one.Anyway, I was also hoping you’d have information about adding a facebook like button to an object, e.g. photo quotes or quotes.

Leave a Reply