Facebook. Basically, if you use the internet, you’ve heard of it. In this brief tutorial, I will show you a rather easy way to integrate your WordPress powered website with one of the most popular social networking sites on the web today.
Facebook Setup
The first thing that you will need to do is register your site with Facebook. This is done by creating a new application. After you fill out the form, Facebook will provide you with an App ID and an App Secret – two rather long numbers used to identify your website. I suggest that you copy all information on this page and paste it somewhere safe for future reference. We will be using the App ID in our code.
HTML Meta Tags
Setting up a few meta tags in the head of your html document allows you to fine tune how your pages and posts will be displayed in Facebook. There are three different meta tags that you can add:
- Title: This should be set to the title of your post or page. The example below will pull this data from the global $post array.
- Site Name: The name of your website. Perhaps the most easiest thing to do here is set meta tag to use the value returned by WordPress core function get_bloginfo().
- Image: The image that will be used to create the thumbnail when your page is shared on someone’s Facebook Wall. In the example below, I have chosen to use the WordPress Post Thumbnail which is now known as the Featured Image in WordPress 3.0. If no Featured Image has been set, this meta tag will not be printed.
function mfields_facebook_meta() {
if ( is_singular() ) {
$image = '';
if ( has_post_thumbnail( get_the_ID() ) ) {
$image = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) );
}
print "\n" . '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '"/>';
print "\n" . '<meta property="og:site_name" content="' . esc_attr( get_bloginfo() ) . '"/>';
if ( ! empty( $image ) ) {
print "\n" . '<meta property="og:image" content="' . esc_url( $image ) . '"/>';
}
}
}
add_action( 'wp_head', 'mfields_facebook_meta' );
The Like Button
The following code will add the actual Like button to the end of your content.
add_filter( 'the_content', 'mfields_facebook_like_link' );
function mfields_facebook_like_link( $c ) {
return $c . "\n\t" . '<p><fb:like href="' . get_permalink() . '"></fb:like></p>';
}
Facebook SDK
The third and final step is to add the Facebook SDK to your page. You will want to change the value of the $app_id variable to the value of your site’s App ID.
add_filter( 'wp_footer', 'mfields_facebook_sdk' );
function mfields_facebook_sdk( $c ) {
$app_id = '999999999999999';
print <<<EOF
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '{$app_id}', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
EOF;
}
All Together Now!
Here is all of the code in one place for easy copying. Please place it your your active theme’s functions.php file or – better yet – use it to create a custom plugin.
<?php
/* FaceBook Meta Tags
=================================================== */
function mfields_facebook_meta() {
if ( is_singular() ) {
$image = '';
if ( has_post_thumbnail( get_the_ID() ) ) {
$image = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) );
}
print "\n" . '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '"/>';
print "\n" . '<meta property="og:site_name" content="' . esc_attr( get_bloginfo() ) . '"/>';
if ( ! empty( $image ) ) {
print "\n" . '<meta property="og:image" content="' . esc_url( $image ) . '"/>';
}
}
}
add_action( 'wp_head', 'mfields_facebook_meta' );
/* FaceBook Like Link
=================================================== */
if( !function_exists( 'mfields_facebook_like_link' ) ) {
add_filter( 'the_content', 'mfields_facebook_like_link', 20 );
function mfields_facebook_like_link( $c ) {
return $c . "\n\t" . '<p><fb:like href="' . get_permalink() . '" layout="button_count" font="tahoma"></fb:like></p>';
}
}
/* FaceBook SDK
=================================================== */
if( !function_exists( 'mfields_facebook_sdk' ) ) {
add_filter( 'wp_footer', 'mfields_facebook_sdk' );
function mfields_facebook_sdk( $c ) {
$app_id = '999999999999999';
print <<<EOF
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '{$app_id}', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
EOF;
}
}
?>
Here’s the WordPress plugin:
http://wordpress.org/extend/plugins/like
No coding necessary, you can customize the look and placement of the button in the settings interface.
Cool Plugin Bottomless. Thanks for posting. I’ve recently been diving into the Facebook Graph API. If you know of any great resources, it would be awesome if you could share!
Hi this is great, but it makes the site invalid when you run it through the markup validation – apparently there is no meta attribute “property” () guessing that’s a facebook flaw?
or the wrong doctype
Thanks for the code Michael. Now using the Meta tag snippet. This will become even more important now that Facebook added functionality to the Like buttons.
Hi Michael,
fantastic! this helps a LOT. one thing though, it seems if i like my posts, it uses the wrong image. i would rather it not use an image than the wrong one. how can i fix this.
thanks.
What would the correct image be? The code will use whichever image you have set as a “Featured Image” for the post. This should give you a great deal of control over which image is used when you like it on Facebook. The code will also not print a meta tag for image if you have not declared one as “Featured”. I believe in this case, Facebook will choose an image from the page to use instead.
For best results: Always choose a featured image.
I’m not too familiar with wordpress yet. My posts are mostly images only. Some of them contain text, but the idea behind my site is poetry and illustrations. When I tested your code, the first time it added one of the share button images of a social plugin. The next share added the gravatar thumbnail. I’m not too sure what you mean by setting a featured image.
Another thing: is there a way to turn the like button off for pages, so that it shows only in posts?
Thanks for your detailed work. You’ve won a subscriber.
Awesome Michael, as you can see from this post http://bt.io/GnUC, I was longing for such a solution. Amazing that all Like plugins I found so far, didn’t give me the flexibility of choosing an og:image per post. Thanks!
Hi Bob. Glad you found this useful! And thanks for the mention in your write up. It was interesting to read your story and hear all of the pros and cons of different solutions that you tried.
Hi, thank you the code works great. How can I add the Like
Button to the top of a post. I’m using
add_filter( 'the_content', 'mfields_facebook_like_link' ); function mfields_facebook_like_link( $c ) { return $c . "\n\t" . '<p><fb:like href="' . get_permalink() . '" layout="button_count" font="tahoma"></fb:like></p>'; }It’s pretty easy, you just need to switch the order around like this:
add_filter( 'the_content', 'mfields_facebook_like_link' ); function mfields_facebook_like_link( $c ) { return '<p><fb:like href="' . get_permalink() . '" layout="button_count" font="tahoma"></fb:like></p>' . "\n\t" . $c; }Great code Michael, it just came in handy. I’m using the OG meta data functions. I’m wondering though, is there anyway to specify a “featured image” or post-thumbnail size? The images that are in these blog posts are quite large and when squished into Facebook’s thumnbnail size look pretty bad. I have several different sizes of thumbnails already in my functions file, I’m just wondering if I could make one that’s 100px square and somehow add it into you code for the og:image?
Hi Lindsey, Thanks! This code was written a while ago. Since then, I have created a plugin which will add these meta tags for many other views in WordPress. You can download it from Github.
One enhancement made in the plugin is the use of:
instead of :
Hope this helps!
This was extremely helpful, thanks. One question: I see facebook allows multiple og:image declarations, and each will be an option in the like/share button pop-up. So, is there any way to add a function that will check the single post for all attached pictures and then produce new meta lines declaring og:images for each?
I know enough that when I look at http://codex.wordpress.org/Function_Reference I feel it is possible, but I’m not savvy enough to figure out how to test how many attached images there are or how to get their url’s.
Thanks, Derek
You’ll want to use the get_children() function for this.
Thanks. Before I spend maybe 2 hours trying to figure it out, as I know php but not necessarily all of the constructs to query the WP SQL database:
Do you by any chance happen to readily know the basic call I would use for the main line?
For instance, I imagine it would be something like:
$images =& get_children( ‘post_type=attachment&post_mime_type=image’ );
if ( empty($images) ) {
// no attachments here
} else {
foreach ( $images as $attachment_id => $attachment ) {
print “\n” . ‘<meta property="og:image" content="' . esc_url( $images ) . '
}
}
Does that look about right?
(I put one too many } at the end… typo)
Okay, my typo was not a typo… here’s what I tried:
$attachedimages =& get_children( 'post_type=attachment&post_mime_type=image' );
if ( empty($attachedimages) ) {
// no attachments here
print "";
} else {
foreach ( $attachedimages as $attachment_id => $attachment ) {
print "\n" . '';
//print "\n" . '';
}
}
It turns out, on a post with attachments, the logic above still results in going into the code. Any ideas perchane?
that stripped half my code, try again:
$attachedimages =& get_children( ‘post_type=attachment&post_mime_type=image’ );
if ( empty($attachedimages) ) {
// no attachments here
print ““;
} else {
foreach ( $attachedimages as $attachment_id => $attachment ) {
print “\n” . ”;
}
}
It turns out, on a post with attachments, the logic above still results in going into the code. Any ideas perchane?
Okay, sorry to have put a bunch of junk posts to your blog. Here’s the code I’m using that is very close, but not quite what I need:
http://wordpress.org/support/topic/simple-codexphp-coding-question-get_children?replies=2
There is a better, more robust solution to the Open Graph Meta tags for WordPress that I have uploaded to Github: https://github.com/mfields/mfields-opengraph-meta-tags/
Looks quite robust indeed. One note: you are missing the closing php tag at the end.
Thanks! Only thing is, you do not need a closing php tag at the end :)
Ah. Is that because it is assumed when you call (include) a separate php file?
It’s just not needed. Here’s some reading:
http://blogs.sitepoint.com/should-you-close-your-php-code-tags/
http://blogs.sitepoint.com/closing-php-tags-debate/
I still like this code better than any plugin I’ve found, thanks.
The lint tool show two errors:
Required Property Missing og:type is required
Required Property Missing og:url is required
any ideas on how to fix?
Thanks Matthew! There is better code on Github which is much more evolved than the code posted here. You can chek it out by clicking the following link:
Open Graph Meta Tags Hosted on Github
I explored your plugin after I wrote the comment. I used the manual code above and edited it slightly to get the duplicate meta info gone, once I installed your plugin. if you get a chance, I’d love to get your opinion on if I’ve done it right.
http://tothevillagesquare.org/blog is the main blog page. the linter doesn’t show errors on individual posts, providing I’ve aded a featured image. my code looks like this on the theme functions file:
/* FaceBook Meta Tags =================================================== */ function mfields_facebook_meta() { if ( is_singular() ) { $image = ''; if ( has_post_thumbnail( get_the_ID() ) ) { $image = wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) ); } if ( ! empty( $image ) ) { print "\n" . '<meta property="og:image" content="' . esc_url( $image ) . '"/>'; } } } add_action( 'wp_head', 'mfields_facebook_meta' ); /* FaceBook Like Link =================================================== */ if( !function_exists( 'mfields_facebook_like_link' ) ) { add_filter( 'the_content', 'mfields_facebook_like_link' ); function mfields_facebook_like_link( $c ) { return '<p><fb:like href="' . get_permalink() . '" layout="button_count" font="tahoma"></fb:like></p>' . "\n\t" . $c; } } /* FaceBook SDK =================================================== */ if( !function_exists( 'mfields_facebook_sdk' ) ) { add_filter( 'wp_footer', 'mfields_facebook_sdk' ); function mfields_facebook_sdk( $c ) { $app_id = 'TACOTACOTACOTACO'; print <<<EOF <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: '{$app_id}', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script> EOF; } }Hi – I copied the code from GitHub without making any changes into my site’s functions.php file but my site crashes every time. Should I be making any changes to it? I did get an App ID but don’t see where I need to add it to the code on GitHub. Thank you,
Newbie