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:

wpid1445-You_Will_Need.jpg
  • 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

wpid1439-Step_1_Admin_User_ID_Number.jpg
  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

wpid1440-Step_2_Website_Name.jpg
  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

wpid1441-Step_3_Content_Type.jpg
  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

wpid1442-Step_4_Post__Page_Title.jpg
  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

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

Step 6: Featured Image URL

wpid1444-Step_6_Featured_Image_URL.jpg

1. In the area <meta property=”og:image” content=”http://YOURDOMAIN.com/images/THUMBNAIL.jpg” /> 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 { ?>http://YOURDOMAIN.com/images/DEFAULTIMAGE.jpg <?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.

“Never let the truth get in the way of a good story”

Facebook Twitter LinkedIn Google+ 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>