Skip to main content

How to set featured image in order to be shared in facebook post thumbnail

How to set featured image in order to be shared in facebook

 

The Yoast SEO Plugin also comes with the ability to add a custom Facebook thumbnail to each individual post or page.

Simply install the Yoast SEO Plugin. After you’ve installed and activated, it’s time to set up a Facebook thumbnail into whatever post you want.

When writing a post, scroll down to the Yoast SEO meta box below the post editor and then click on the social tab. There you will see a button to upload a thumbnail image for Facebook.

 

another hardcoded method is to add this code to your functions.php in your theme

 

 

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

 

 

usefull links 

Images in Link Shares - Sharing (facebook.com)

Sharing Debugger - Facebook for Developers