1

Hello Dear Stack Overflow friends! I've been trying to solve this problem for a couple of days with no success. I've read almost every post available here at Stack Overflow but I can't find out how to solve this.

When I share a link on Facebook, the thumbnail corresponds to the image I defined in the

meta property="og:image"

It works and everything is fine there... But,

I would like that each post could display its own featured image as a thumbnail when shared. How on earth can I do that?

I've tried with this code in function.php

    function insert_image_src_rel_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
    if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
        $default_image="http://example.com/image.jpg"; //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 "
";
} add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );

And nothing happens...

I've also tried this code in header.php

    <?php
global $wp_query;
$thePostID = $wp_query->post->ID;
if( has_post_thumbnail( $thePostID )){
    $thumb_id = get_post_thumbnail_id( $thePostID );
    $image = wp_get_attachment_image_src( $thumb_id );
    echo '<meta property="og:image" content="'.$image[0].'" />';
} ?>

No success there either.

The featured image is activated in the functions.php like this.

add_theme_support('post-thumbnails');

As I said, all og tags are set.

What Is happening? It's not a cache thing because I'm using the facebook debugger to flush it.

I will be eternally grateful if anybody out there can help me.

Thanks a lot.

Benjamin.

Benjamin
  • 11
  • 2
  • 6

3 Answers3

0

I think you should try like 

echo '<meta property=\"og:image\" content=\"'.$image[0].'\" />';

also, pls check your source code after updating this if <meta property is displaying correct when site is rendered

user1576978
  • 1,763
  • 1
  • 14
  • 27
  • Where should I replace the echo property you are suggesting? In the code in the functions.php or in the header.php? Thanks for helping me! – Benjamin Feb 28 '13 at 05:38
  • Nope. Replaced it in both scenarios and nothing happened. Every link I post displays the thumbnail of the image defined in the og:image tag. – Benjamin Feb 28 '13 at 05:51
  • The featured image of each post continues to be ignored. – Benjamin Feb 28 '13 at 05:51
  • this should have been replaced in header.php... when you open your site via browser, it apears on yout source code? – user1576978 Mar 01 '13 at 07:17
  • you go a 500 error on checking source code? if you are on chrome, wait for your site to reload then press f11 put it in http://pastebin.com/ if you need – user1576978 Mar 02 '13 at 06:57
  • Nope. The website fails to load when I change the code. I'll check if I made a mistake and ruined the header in someway, but I don't think so... – Benjamin Mar 02 '13 at 14:46
  • ok lets simplify this. Use the code you use to get the thumbnail somewhere else and see if it shows the thumbnail – user1576978 Mar 03 '13 at 16:24
  • I was careless about adding the code and messed up with the entire site. (oops!) I spent the whole day fixing it and thankfully it's alright now. – Benjamin Mar 04 '13 at 04:28
  • The source code renders correctly and points to the appropriate featured image thumbnail. When I first set up my wordpress site, I didn't change the settings/media thumbnail sizes, so my default featured images are saved with a 150x150 Suffix. – Benjamin Mar 04 '13 at 04:31
  • I already changed the settings/media to 300x300 and removed and added again all featured images of every post. – Benjamin Mar 04 '13 at 04:32
  • But there is a huge problem. When I pass my site through the debugger, It continues to show two errors... – Benjamin Mar 04 '13 at 04:33
  • First, It shows a different thumbnail. Secondly, it continues to say that my og image are not big enough. – Benjamin Mar 04 '13 at 04:34
  • I downloaded the images with the 150x150 suffix and edited them to be 300x300 and uploaded them again, to cheat the debugger. – Benjamin Mar 04 '13 at 04:34
  • And the Son of a #!@! still says my images aren't big enough, and still shows a different thumbnail than the featured image for every post. That erroneous image is the same for every post by the way. – Benjamin Mar 04 '13 at 04:36
  • you could try with some plugin like Yoast WordPress SEO – user1576978 Mar 04 '13 at 09:39
  • I'll try it right away and tell you what happens... Thanks a lot. Do you have any theories of what is wrong? – Benjamin Mar 04 '13 at 16:08
  • Ok I fixed this... Maybe this will help other users with the same problem... The reason it was using the same thumbnail in every link despite rendering the correct image in the source code is because of the – Benjamin Mar 05 '13 at 02:13
  • i'm glad you solved it! sorry i couldn't help. you should post an awnser to your own question with the solution, if you may – user1576978 Mar 05 '13 at 17:12
0

Ok I fixed this... Maybe this will help other users with the same problem... The reason it was using the same thumbnail in every link despite rendering the correct image in the source code is because of the

<meta property="og:url" content=" line.

I entered there the URL of the site and of course, the canonical URL ruled them all, and the debugger went there to fetch the featured image. I replaced that value with 

<?php echo get_permalink(); ?>

And that did it. Thank you for your kind help I hope this question helps others solve similar issues.

Benjamin
  • 11
  • 2
  • 6
0

You can use meta property like this.

<meta property="fb:app_id" content="facebook app id" />
<meta property="og:url"  content="post url">
<meta property="og:title"  content="post title">
<meta property="og:description" content="post description">
<meta property="og:image" content="image url"/>
Hiren Purohit
  • 1
  • 4