Ask your WordPress questions! Pay money and get answers fast!

Facebook thumbnail - grab first image from post WordPress

SOLVED

I have seen lots of tutes on this, but none work for my site. I use thesis and don't use the featured image function. Also I don't want to have to resort to using a custom field as there are over 9000 posts on my site (and it's just not possible to redo them all!)

I know there are other ways of grabbing the first image from a post though (ie this - http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it) , I have used timthumb around my site.

Just need help combining them.

Here's the facebook image code I found from a tute:
/**** ADD FB IMAGES***/ //Adding the Open Graph in the Language Attributes function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); //Lets add Open Graph Meta Info function insert_fb_in_head() { global $post; if ( !is_singular()) //if it is not a post or a page return; echo '<meta property="fb:admins" content="685991022"/>'; echo '<meta property="og:title" content="' . get_the_title() . '"/>'; echo '<meta property="og:type" content="article"/>'; echo '<meta property="og:url" content="' . get_permalink() . '"/>'; echo '<meta property="og:site_name" content="DDGDaily.com"/>'; if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image $default_image="http://dropdeadgorgeousdaily.com/wp-content/uploads/newavatar.png"; //replace this with a default image on your server or an image in your media library echo '<meta property="og:image" content="' . $default_image . '"/>'; } else{ $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' ); echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>'; } echo "\n"; } add_action( 'wp_head', 'insert_fb_in_head', 5 );

2011-06-07 by kateM82

Answers (2)

2011-06-07

Baki Goxhaj answers:

Here goes the finished script. It grabs the first uploaded image to the post.

/**** ADD FB IMAGES***/ //Adding the Open Graph in the Language Attributes function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); //Lets add Open Graph Meta Info function insert_fb_in_head() { global $post; if ( !is_singular()) //if it is not a post or a page return; echo '<meta property="fb:admins" content="685991022"/>'; echo '<meta property="og:title" content="' . get_the_title() . '"/>'; echo '<meta property="og:type" content="article"/>'; echo '<meta property="og:url" content="' . get_permalink() . '"/>'; echo '<meta property="og:site_name" content="DDGDaily.com"/>'; if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image $default_image="http://dropdeadgorgeousdaily.com/wp-content/uploads/newavatar.png"; //replace this with a default image on your server or an image in your media library echo '<meta property="og:image" content="' . $default_image . '"/>'; } else { $images =& get_children( 'post_type=attachment&post_mime_type=image&posts_per_page=1&post_parent=' . get_the_id() ); foreach( $images as $image_id => $image_post ) : $thumbnail_src = wp_get_attachment_image_src( $image_id, 'medium', true ); echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>'; endforeach; } echo "\n"; } add_action( 'wp_head', 'insert_fb_in_head', 5 );

kateM82 comments:

Will this only work on new posts? It doesn't seem to be working yet? Page source show og:image as the default heart thumbnail. And when I try and add the link into facebook it doesn't bring up any thumbnail, title or text?

Baki Goxhaj comments:

It script does not produce a image title or alt, but that can be added.

Added that.

Here goes the new version that will check for attached images the right way:

<?php /**** ADD FB IMAGES***/ //Adding the Open Graph in the Language Attributes function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); //Lets add Open Graph Meta Info function insert_fb_in_head() { global $post; if ( !is_singular()) //if it is not a post or a page return; echo '<meta property="fb:admins" content="685991022"/>'; echo '<meta property="og:title" content="' . get_the_title() . '"/>'; echo '<meta property="og:type" content="article"/>'; echo '<meta property="og:url" content="' . get_permalink() . '"/>'; echo '<meta property="og:site_name" content="DDGDaily.com"/>'; $images =& get_children( 'post_type=attachment&post_mime_type=image&posts_per_page=1&post_parent=' . get_the_id() ); foreach( $images as $image_id => $image_post ) : if( !empty( $images ) ) { $thumbnail_src = wp_get_attachment_image_src( $image_id, 'medium', true ); echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '" alt="' . get_the_title( $image_id ) . '"/>'; } else { $default_image="http://dropdeadgorgeousdaily.com/wp-content/uploads/newavatar.png"; //replace this with a default image on your server or an image in your media library echo '<meta property="og:image" content="' . $default_image . '"/>'; } endforeach; echo "\n"; } add_action( 'wp_head', 'insert_fb_in_head', 5 );

2011-06-07

Julian Lannigan answers:

Hi Kate,

Given you don't use the featured thumbnail, here is some code that will allow you select the first image found in your post content to be the image used as the facebook image. This gives you the utmost control over which image displays first with minimal effort.

The snippet is attached.

The snippet on gist for easier reading : [[LINK href="https://gist.github.com/1012138"]]https://gist.github.com/1012138[[/LINK]]

/**** ADD FB IMAGES***/ //Adding the Open Graph in the Language Attributes function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); //Lets add Open Graph Meta Info function insert_fb_in_head() { global $post; if ( !is_singular()) //if it is not a post or a page return; echo '<meta property="fb:admins" content="685991022"/>'; echo '<meta property="og:title" content="' . get_the_title() . '"/>'; echo '<meta property="og:type" content="article"/>'; echo '<meta property="og:url" content="' . get_permalink() . '"/>'; echo '<meta property="og:site_name" content="DDGDaily.com"/>'; echo '<meta property="og:image" content="' . catch_that_image(false) . '"/>'; echo "\n"; } add_action( 'wp_head', 'insert_fb_in_head', 5 ); //grab first image url from post content // base function from http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it function catch_that_image($inLoop = true) { global $post, $posts; $first_img = ''; if ($inLoop) { ob_start(); ob_end_clean(); } $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches[1][0]; if(empty($first_img)){ //Defines a default image $first_img = home_url("/wp-content/uploads/newavatar.png"); } return $first_img; }

kateM82 comments:

You're a genius. It seems to have worked (the right images are showing in the page meta) it's not passing through to facebook just yet, but from what I have read they have a cache too, so i'll see how it is tomorrow night.

Thanks for saving me days and days of brain pain yet again! You're a legend!

Julian Lannigan comments:

:) Glad I could help. Facebook definitely has a cache, and they usually will update in 24-48 hours. I suggest using the Lint tool to check the og meta values: [[LINK href="http://developers.facebook.com/tools/lint"]]Lint tool[[/LINK]]

kateM82 comments:

One more question, not sure if it's related.

I've noticed that ever since I started trying to get my theme to define the thumbnail about 60% of the time when you go to share a link - with straight from the site or pasting it straight into FB sometimes it pulls no meta details at all and just shows the link.

It gives no image, no title... etc..

I thought it might just be a facebook issue, but it's still happening.

I also thought it might have something to do with the site speed, but I have got that way down now so I don't think that should be an issue any more (my server is very slow today though... )

Have you ever come across this? Any idea if there is anything that can be done to stop it?

kateM82 comments:

For example I just tried this URL from the site in the Lintor tool and it said there was no meta

http://dropdeadgorgeousdaily.com/2011/06/guest-edit-designer-sara-phillips-just-cant-live-without/

but if you look at the page source of the post it shows:

<meta property="fb:admins" content="685991022"/><meta property="og:title" content="Guest edit: Designer Sara Phillips just can’t live without…"/><meta property="og:type" content="article"/><meta property="og:url" content="http://dropdeadgorgeousdaily.com/2011/06/guest-edit-designer-sara-phillips-just-cant-live-without/"/><meta property="og:site_name" content="DDGDaily.com"/><meta property="og:image" content="http://cdn.dropdeadgorgeousdaily.com/wp-content/uploads/guest-Sara-Phillips-designe.gif"/>

WHich is corre

Julian Lannigan comments:

Do you have an example url?

Julian Lannigan comments:

I suggest adding a newline at the end of each fb meta line.

add this to each of the meta lines:

."\n"

For example:

echo '<meta property="fb:admins" content="685991022"/>\n'; echo '<meta property="og:title" content="' . get_the_title() . '"/>\n'; echo '<meta property="og:type" content="article"/>\n'; echo '<meta property="og:url" content="' . get_permalink() . '"/>\n'; echo '<meta property="og:site_name" content="DDGDaily.com"/>\n'; echo '<meta property="og:image" content="' . catch_that_image(false) . '"/>\n';

Julian Lannigan comments:

The other thing I noticed was that you didn't have a space just before the closing forward slash on each line. Use the following code:
echo '<meta property="fb:admins" content="685991022" />\n'; echo '<meta property="og:title" content="' . get_the_title() . '" />\n'; echo '<meta property="og:type" content="article" />\n'; echo '<meta property="og:url" content="' . get_permalink() . '" />\n'; echo '<meta property="og:site_name" content="DDGDaily.com" />\n'; echo '<meta property="og:image" content="' . catch_that_image(false) . '" />\n';

kateM82 comments:

Tried it, it just made \n\n\n\n\n\n appear at the top of the page.

This is what I now have

/**** ADD FB IMAGES***/ //Adding the Open Graph in the Language Attributes function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); //Lets add Open Graph Meta Info function insert_fb_in_head() { global $post; if ( !is_singular()) //if it is not a post or a page return; echo '<meta property="fb:admins" content="685991022" />\n'; echo '<meta property="og:title" content="' . get_the_title() . '" />\n'; echo '<meta property="og:type" content="article" />\n'; echo '<meta property="og:url" content="' . get_permalink() . '" />\n'; echo '<meta property="og:site_name" content="DDGDaily.com" />\n'; echo '<meta property="og:image" content="' . catch_that_image(false) . '" />\n'; } add_action( 'wp_head', 'insert_fb_in_head', 5 ); //grab first image url from post content // base function from http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it function catch_that_image($inLoop = true) { global $post, $posts; $first_img = ''; if ($inLoop) { ob_start(); ob_end_clean(); } $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches[1][0]; if(empty($first_img)){ //Defines a default image $first_img = home_url("/wp-content/uploads/newavatar.png"); } return $first_img; }