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() . '&layout=button_count&show_faces=true&width=250&height=20px | |
&action=like&font=trebuchet+ms&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'); |
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() . '&layout=button_count&show_faces=true&width=250&height=20px | |
&action=like&font=trebuchet+ms&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'); |
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.
Warren says
I’m using genesis framework, and news theme also, works great! One question though, I get this:
Warren likes Site Redesign on PLR Internet Marketing.
(you can see the title tags on my facebook page which I’m sure isn’t supposed to happen.)
Bill Erickson says
That’s exactly how it’s supposed to happen. It uses whatever is in the doctitle as the name of the page. If you want this to be something different, change the code in the function facebook_like_head()
Haroun Kola says
Thanks for this great tutorial. I want to not display the button on selective posts and pages. How would I do that.
I mean
if (is_post(4,12,13)) or (is_page(2,245))
{do nothing}
else
{show button}
How would I do that?
Bill Erickson says
Refer to the conditional tags page to see how to do that: http://codex.wordpress.org/Conditional_Tags
Instead of putting your code in the else, you can test for NOT by using !
So if you want it to not show up on the about or contact pages, do
if( !is_page( 'about' ) && !is_page( 'contact' ) ) {
do_something();
}
That can be read “if this is not the about page and it’s not the contact page, do the do_something() function.”
For posts, use is_single() instead of is_post()
Haroun Kola says
Thanks Bill, that’s exactly what I wanted 🙂
John says
Got following error
Parse error: syntax error, unexpected ‘<' in /home/content/27/7477727/html/wp-content/themes/church/functions.php on line 81
using Genesis, church child theme. Please help. Thanks in advance.
Bill Erickson says
I’ll need to see the full code of your functions.php file to see what you did wrong, but my guess is you included a
Sid says
in fact it does give a “Parse error, unexpected “<"…." I am using Genesis Framework 1.8.2 and Décor child theme. I can restore the site by removing your code from function.php.
Bill Erickson says
You seem to be having the same issue as John. My guess is you have included a
Sid says
Removing <?php was the first thing I tried. Your code had <? php at the start, which causes error. I removed it, error went away, but then facebook like does not appear either. I am using Genesis Framework with Décor child theme.
Bill Erickson says
My code has it because https://developers.facebook.com/docs/reference/plugins/like/