9

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.

Comments (9)

  1. Jo says:

    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 says:

    This was extremely helpful and worked perfectly…thanks!

  3. Aim says:

    Where do I place this code?

  4. dwbmb says:

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

  5. Ron Z says:

    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 says:

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

  7. samedy says:

    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 says:

    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 says:

    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