Facebook FAQ: How to force facebook choose right image for Like Button?
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.
<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.
This didn’t work for me. It’s still pulling a random (unwanted image) from the page. Bugger :0(
post the link of the website, I’ll have a look.
Got the same problem! Have a og:image set, with width greater than 200px, but if Facebook crawls and finds an ad on the page it picks that instead, and as the default thumbnail not the og:image! site is http://www.caseiro.pt, can you advise?
I see. it shows two or three thumbnails.
But on the first place it shows the correct image.
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.
Greetings! Very useful advice in this particular post!
It’s the little changes that produce the largest changes. Many thanks for sharing!
This article gives clear idea designed for the new people of blogging, that actually how to do blogging and site-building.
Thanks for the tips. Facebook choose random image from my site. Your post helps me to define the right one in FB. Thanks again. :)