rss
8

Facebook FAQ: How to force facebook choose right image for Like Button?

  • Sumo

The most common question I always asked. So how to code page html so that when somebody clicks on “Like” button, facebook automatically choose the right image to display on the wall? Facebook like image is very important!

Facebook has so called “OG” meta tags that you should put in your HTML file.

There are several meta tags that facebook uses for article sharing, and one of them is for image (og:image). This tag tells facebook which image to choose while sharing the page.
For every single post or page in your website you should define an HTML meta tags like this.

Facebook FAQ: How to force facebook choose right image for Like Button?

<meta property="fb:admins" content="YOUR FB USER ID" />
<meta itemprop="name" content="PAGE TITLE" />
<meta itemprop="description" content="Page Short Description." />
<meta property="og:image" content="http://_IMAGE_URL_JPG" />
<meta property="og:title" content="PAGE TITLE" />
<meta property="og:description" content="Page Short Description" />
<meta property="og:type" content="article" />
<meta property="og:url" content="Page Url" />


But if you are using WordPress, you can just put this code into the header.php and, that’s it.

<head>
...
    <!-- social meta -->
    <meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>" />
    <?php
    if( is_singular() ) :
	    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full' );
	    $thumb_url = $thumb['0'];
    ?>
	    <meta property="fb:admins" content="YOUR FB USER ID"/>
	    <meta itemprop="name" content="<?php wp_title(' '); ?>">
	    <meta itemprop="description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>">
	    <meta property="og:image" content="<?php echo $thumb_url; ?>" />
	    <meta property="og:title" content="<?php single_post_title(''); ?>" />
	    <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
	    <meta property="og:type" content="article" />
	    <meta property="og:url" content="<?php the_permalink() ?>"/>
    <?php else: ?>
	    <meta property="og:url" content="<?php echo site_url(); ?>"/>
	    <meta property="og:title" content="<?php bloginfo( 'name' ); ?>" />
	    <meta property="og:description" content="YOUR WEBSITE GENERAL DESCRIPTION" />
	    <meta property="og:image" content="http://your-domain.com/logotype.png" />
    <?php endif; ?>
    <!-- social meta end -->
...
</head>

 

Additionally you can use facebook’s native page URL debugger, which can be accessed by this link http://developers.facebook.com/tools/debug . It will show you errors and warning messages on a particular page in your website, which should be fixed if you want correctly share your pages in facebook.

__
Read other articles from Smart Website Tips Blog.
Stay tuned! Subscribe to new posts by RSS feed or email subscription.

About the Author

Edgar Marukyan is an expert of website development and performance optimization, who maintains and consults clients with high load traffic websites.. If you need an assistance, feel free to drop me a line.         Website - Twitter - Facebook

Comments (8)

Trackback URL | Comments RSS Feed

  1. John Romaine says:

    This didn’t work for me. It’s still pulling a random (unwanted image) from the page. Bugger :0(

  2. medicine cabinet says:

    Hi, i read your blog occasionally and i own a similar one and i was just
    wondering if you get a lot of spam remarks?
    If so how do you stop it, any plugin or anything you can advise?
    I get so much lately it’s driving me insane so any assistance is very much appreciated.

  3. Jessie says:

    Greetings! Very useful advice in this particular post!
    It’s the little changes that produce the largest changes. Many thanks for sharing!

  4. Natural Odor Eliminator says:

    This article gives clear idea designed for the new people of blogging, that actually how to do blogging and site-building.

  5. Tapan Kumer Das says:

    Thanks for the tips. Facebook choose random image from my site. Your post helps me to define the right one in FB. Thanks again. :)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.