2

I have logo image, featured image and one image in footer widget for a page. At the time of posting a page in facebook it is showing footer widget image as first and logo image as 2nd and featured image as third. How to restrict this one to show featured image as first to select as post thumbnail?

Improve this question

1 Answer 1

Reset to default
2

To get the desired image while sharing or posting post to facebook you have to add og:image tag inside your <head> tag. And for twitter you have > to use twitter card

//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');

//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;

    if ($excerpt = $post->post_excerpt)
    {
        $excerpt = strip_tags($post->post_excerpt);
    }
    else
    {
        $excerpt = get_bloginfo('description');
    }

    echo '<meta property="fb:app_id" content="YOUR APPID"/>'; //<-- this is optional
    echo '<meta property="og:title" content="' . get_the_title() . '"/>';
    echo '<meta property="og:description" content="' . $excerpt . '"/>';
    echo '<meta property="og:type" content="article"/>';
    echo '<meta property="og:url" content="' . get_permalink() . '"/>';
    echo '<meta property="og:site_name" content="' . get_bloginfo() . '"/>';

    echo '<meta name="twitter:title" content="' . get_the_title() . '"/>';
    echo '<meta name="twitter:card" content="summary" />';
    echo '<meta name="twitter:description" content="' . $excerpt . '" />';
    echo '<meta name="twitter:url" content="' . get_permalink() . '"/>';

    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 . '"/>';
        echo '<meta name="twitter: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 '<meta name="twitter:image" content="' . esc_attr($thumbnail_src[0]) . '"/>';
    }
}

add_action('wp_head', 'insert_fb_in_head', 5);

Code goes in function.php file of your active child theme (or theme). Or also in any plugin php files.

Please Note: this code will work for both Facebook and Twitter.

Hope this helps!

Improve this answer
7
  • Is it work for other social applications like twitter?
    – Padmini Maddur
    Commented Jan 30, 2017 at 12:03
  • @PadminiMaddur: I have updated my code, now it will work for both fb and twitter.
    – Raunak Gupta
    Commented Jan 30, 2017 at 12:45
  • Hi. I have used your code. Then also am facing same problem. It is not showing featured image. It is showing all the images which is in the page like logo image and content images.
    – Padmini Maddur
    Commented Jan 30, 2017 at 14:31
  • check your link in this facebook debuger tool. developers.facebook.com/tools/debug. and if possible share your website URL.
    – Raunak Gupta
    Commented Jan 30, 2017 at 14:57
  • Hi... I am getting this issue. Inferred Property-The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags. And it is showing the logo image.
    – Padmini Maddur
    Commented Jan 31, 2017 at 5:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.