Bill Erickson

Blog / WordPress Development

Adding Facebook Like

Written by Bill EricksonPublished on September 9, 2010Updated on November 26, 2012

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained.

You can get the facebook code from Facebook directly. Instead of manually adding the open graph tags to the header, use WordPress SEO or MFields Open Graph Meta Tags to add it for you.

Adding the Facebook Like button to your website is pretty easy when you’re running a standard template – you drop some code in the header.php and single.php files. But if you’re running Genesis or Thesis, you’ll have to  use functions to add it.

For both of these themes there are plugins that let you add PHP code through the WordPress interface ( Thesis OpenHook and Genesis Simple Hooks). I would highly suggest not using these plugins, because if you type something wrong you might break your website and not be able to log back in to fix it.

For both of these themes I’ll be sticking the Facebook Like code right above the post content on the individual posts. If you would like it placed elsewhere, refer to a visual guide (Thesis Visual Hook Reference or Genesis Visual Hook Reference).

Facebook Like in Thesis

Paste this code in your custom_functions.php file:

<?php
/**
* Facebook Like on Single Posts - Thesis
*
*/
function facebook_like_single() {
if( is_single() )
echo '<iframe src="http://www.facebook.com/plugins/like.php?href=' . get_permalink() . '&amp;layout=button_count&amp;show_faces=true&amp;width=250&amp;height=20px
&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:20px"></iframe>';
}
add_action('thesis_hook_before_post','facebook_like_single');
/**
* Facebook Like header code - Thesis
*
*/
function facebook_like_head() {
if(is_single()) { ?>
<meta property="og:title" content="<?php global $post; echo get_the_title($post->ID); ?>"/>
<?php } else { ?>
<meta property="og:title" content="<?php bloginfo('name').' - '.bloginfo('description');?>"/>
<?php } ?>
<meta property="og:image" content="<?php bloginfo('template_url');?>/custom/images/logo.jpg"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php
}
add_action('wp_head','facebook_like_head');
view raw gistfile1.aw hosted with ❤ by GitHub

The first part checks to see if it’s a single post (so not the homepage, category page…) and if it is it sticks the facebook code right before the post content.

The second part sticks some information that Facebook wants in the <head> of the site. If it’s a single post (which it should always be since that’s only where the like code shows up) then it uses the title of the page. If it’s not a single post (if you changed the is_single() in the first code block to something else) it will show the site name followed by the site description. I then specify the image to use as the logo (location: /custom/images/logo.jpg). If you want to use a different image make sure to change this.

Facebook Like in Genesis

In your child theme, place this code in functions.php:

<?php
/**
* Facebook Like on Single Posts - Genesis
*
*/
function facebook_like_single() {
if( is_single() )
echo '<iframe src="http://www.facebook.com/plugins/like.php?href=' . get_permalink() . '&amp;layout=button_count&amp;show_faces=true&amp;width=250&amp;height=20px
&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:20px"></iframe>';
}
add_action('genesis_before_post_content','facebook_like_single');
/**
* Facebook Like header code - Genesis
*
*/
function facebook_like_head() {
if(is_single()) { ?>
<meta property="og:title" content="<?php global $post; echo get_the_title($post->ID); ?>"/>
<?php } else { ?>
<meta property="og:title" content="<?php bloginfo('name').' - '.bloginfo('description');?>"/>
<?php } ?>
<meta property="og:image" content="<?php bloginfo('stylesheet_directory');?>/images/logo.jpg"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<?php
}
add_action('wp_head','facebook_like_head');
view raw gistfile1.aw hosted with ❤ by GitHub

The first part checks to see if it’s a single post (so not the homepage, category page…) and if it is it sticks the facebook code right before the post content.

The second part sticks some information that Facebook wants in the <head> of the site. If it’s a single post (which it should always be since that’s only where the like code shows up) then it uses the title of the page. If it’s not a single post (if you changed the is_single() in the first code block to something else) it will show the site name followed by the site description. I then specify the image to use as the logo (location: /images/logo.jpg). If you want to use a different image make sure to change this.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Other articles in this series

A starter theme for building Hybrid WordPress Themes

May 29, 2023

A hybrid WordPress theme uses theme.json to define styles and customize the block editor while also using traditional PHP template files. Hybrid themes leverage the block editor for content but…

Custom recipe templates for WP Recipe Maker

October 7, 2019

I frequently work with food bloggers to improve the design, speed, and functionality of their websites. The recipe card is the most important element on the page. It should be…

How to Setup ConvertKit with a WordPress Form

April 13, 2017

Integrate ConvertKit and WPForms easily connects forms on your website to your ConvertKit email marketing account, enabling you to capture more leads and manage campaigns more effectively. WPForms‘ simple drag-and-drop form builder allows…

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Ryan Beale says

    Thanks for the tutorial, Bill! I will certainly be adding the Facebook Like button to one of my Thesis sites today! Best part of buying thesis is the community of devs like yourself who post awesome tutorials for the average blogger like myself to leverage and spice up my sites.

  2. peter bordes says

    Bill we just started using Thesis and are hevey social media users. we have started using Dig Dig for this. is there a better way or any reason Dig Dig might cause similar issues like the above plugins?

    • Bill Erickson says

      I’ve never used Dig Dig, but there’s nothing wrong with using a plugin to do it. I personally try to reduce the number of plugins used to the bare minimum, so I try to find ways to do things without the plugins (like this tutorial).

      The issues I mentioned above are specifically for those plugins – they don’t apply to others. Thesis OpenHook let’s you write code within the WordPress interface, and if you write the wrong code then you break your site.

  4. karen says

    Hey Bill,

    I added the code to the custom.functions.php but it’s not working. I just upgraded to 1.8. Does this work for the new version too?
    Thanks.

  6. Loren Nason says

    Thanks Bill,

    I got it to work mostly … but no matter what post I click on it grabs the Site name and Site description only.

    I have this setup on a site im working on behind maintenance mode so I can’t give you a link.

    Also when it grabs site name and description there is no space between “site””description”

    it is thesis 1.8

    • Bill Erickson says

      That’s strange. You might experiment by changing the property=”og:title”. Something like: if(is_single() … “test1” … }else { … “test2” };

      It sounds like it’s pulling the title from the }else{ condition, but if you’re on a single page it should pull it from the is_single() condition. Are you using any SEO plugins that rewrite site titles?

      • Loren Nason says

        Nope… no SEO plugins
        I’ve got
        Contact Form 7
        Reveal ID’s
        Stream Video Player
        Widget Logic
        Wishlist Member
        WP-DB Manager
        WP-email
        wp-prettyphoto

        Its weird
        I’ve disabled all plugins and same result
        I’ve taken out all custom_functions (except above) and same result
        I’ve change the WP title and desc to “blank” and same result

        I put the above code on a fresh install and another older install and works just fine

        stumped

  7. Don says

    Hi, Bill,

    Excellent tutorial. I have one question. In the picture at the top of the tutorial, the “example” implementation of this tutorial, the “like” button is after the posting date. In my attempt at this tutorial, the like button is between the Title and the Meta section. How can I get it inline with the meta like the example picture? Before or after? Using Genesis…

    Thanks in advance… Don.

    • Bill Erickson says

      Ah, you caught that! 🙂

      I simplified the tutorial to focus on the code for Facebook. In the screenshot, I used the following for the “In Single Post” part:

      add_filter('genesis_post_info', 'post_info_filter');
      function post_info_filter($post_info) {
      $facebook = '<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=button_count&amp;show_faces=true&amp;width=250&amp;height=
      20px&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:20px; padding-left: 10px;"></iframe>';
      if(is_single())
          $post_info = $post_info.$facebook;
          return $post_info;
      }

  9. fever18 says

    i cant find any header,footer or single.php file in my editor..
    how i can integrate twitter and facebook like button just below the post title..

    • Bill Erickson says

      You’re running News, which is a child theme of Genesis. Find the functions.php file in the News theme folder, and paste the code above marked “Facebook Like in Genesis”

  10. Griselda says

    Hey thanks for the code! It works on my site. Pls can you help me position it like the one in your snapshot above.