BLOG

Tips

How to specify a Facebook thumbnail when sharing a post

Need: The ability to control the thumbnail to be used when sharing a post with Facebook.

The Catch: I was trying to share a post with Facebook that had no thumbnail attached to it.

I recently added a Facebook share icon to a clients site, but when I arrived at Facebook after clicking on it, the only thumbnail I was able to select from was an image that appeared sitewide in the sidebar (of course, I could always opt for not displaying an image at all).

The first thing that I needed to do was find a way to specify a thumbnail. To do so, we need to add the following piece of code to the HEAD section of the blog:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$szPostContent = get_the_content();
$szSearchPattern = '~<img [^>]* />~';
preg_match_all( $szSearchPattern, $szPostContent, $aPics );
$iNumberOfPics = count($aPics[0]);
if ( $iNumberOfPics > 0 ) : ?>
<?php $t1 = strpos($aPics[0][0], 'src="'); ?>
<?php $t2 = strpos($aPics[0][0], '"', $t1 + 6); ?>
<?php $pixt = substr($aPics[0][0], $t1 + 5, $t2 - $t1 - 5); ?>
<link rel="image_src" href="<?php echo $pixt; ?>" />
<?php else : ?>
<link rel="image_src" href="DEFAULT IMAGE SOURCE" />
<?php endif; ?>

The Process:

1. I wanted to check the post and see if there was already an image attached to it.
2. For simplicity, I used the first image in the post.
3. If there was an image attached to the post, then I’d want to use it as the thumbnail.
4. I also have a default image set up in the event that no images are included in the post. Make sure to replace “DEFAULT IMAGE SOURCE” with a link to your default image.

9 Comments

  1. Jo

    Thank you so much for this.
    I thought I had done something wrong or it was a Facebook bug as I suddenly didn’t have thumbnails when I shared a post but this code has brought them back.
    I still have a problem that when I share a post the description is that of the website rather than of the post itself, do you know how to change this?

  2. LJC

    This was extremely helpful and worked perfectly…thanks!

  3. Aim

    Where do I place this code?

  4. dwbmb

    Where should I ad this code ? ( like “ad to the bottom of page.php” )

  5. Ron Z

    You’ll want to add it into the HEAD section…in header.php. I would use a conditional so that it’s only getting the photo from a single page or post though.

  6. Mohamed

    it dosen’t work, should i change ( IMAGE SOURCE ) by any location or what?? plz help

  7. samedy

    Could u pls detail about this ? where to place the code ? bcuz i had change my blog logo(icon) but when i post to facebook it still show the old icon blavatar , pls help

  8. Dav

    Hi,

    I’ve added the this code to my head and it works to an extent. The issue I’m having is where I have another picture in the code which is large. The code doesn’t seem to be able to make the image a thumbnail and it doesn’t fall back on the default image I’ve set. I end up with no thumbnail image when I share to FB.

    Can this code be amended to ignore if a post image exists? Any suggestions, much appreciated.

  9. jenn

    when u say ‘head’ section in header.php where would I find that? is it on the site or dreamweaver only? I cant find it anywhere on the site & I don’t use the dreamweaver version only the free version

Leave a Reply

Your email address will not be published. Required fields are marked *