Sometimes here on Dabbled I put on my web developer hat and answer technical questions that bloggers who read Dabbled might want to know.
My dear twitter bud Carissa (@carissarogers) asks:
“hey, any idea why sometimes images DON’t show up correctly when ‘liking’ a post for FB direct from site?? Like the sidebar comes up etc..”
Why yes, yes I do!
Basically, when you “Like” (click a facebook icon) within a webpage, or when you link to a webpage from Facebook, Facebook reads the information on your webpage to figure out what to display. But it is not necessarily smart enough to know which text or image is really the relevant one, which is why sometimes you see really silly things in the facebook link, like icons, instead of the photo related to the page or article.
So what Carissa really wants to know is, is this something that can be fixed.
Facebook reads what are called Open Graph tags to figure out what to display. If the tags don’t exist on the webpage, it makes a guess as to what those tags should be, based on the page content.
If we look at Carissa’s main page in Facebook’s URL Linter, we see that Facebook is extracting the ‘title’ from the <title> in her blog source, and getting the image to display from some random thing on her page tagged <img>.
The same thing happens if you enter the URL for a specific post – the image is just picked from anywhere on the page.
If you want to see what Facebook will display on a post or a page, you can use the Linter to find out. It’s more reliable than just typing the link into Facebook, because Facebook will cache images and may not display a change when you change the image. Using Linter also refreshes the cache.
So if the extracted information is not what you want displayed on Facebook, you’ll need to provide Facebook more information so that they’ll know what to display. You do this by setting Open Graph tags.
So how do I set the Open Graph tags?
I wrote up a longer (slightly more techie) , explanation at the Dabbled Studios blog: Why don’t my blog photos show up on Facebook when someone Likes a post?
…but here’s a quick answer that will work for many of you.
If you have a WordPress blog, like Carissa, the quickest simple fix you can do is to install a plugin which sets the og:image tag for each of your posts to either the attached image, or the ‘featured image’. I’m sure there are several out there, but try this plugin: FetenWeb image_src Metatag.
I’ve used this one on a few sites, and it will pull the featured image (if you’re using that functionality) or the image attached to the post for facebook links. You can also set a default image, in case you don’t have any image on the post. It’s simple, and seems to work quite well. If you have multiple images on a post, and you want to ensure that just a particular one shows up, be sure to click ‘Set as featured image’ for the particular image, within your image upload in WordPress (assuming your theme has that functionality activated)
If that doesn’t work for you, because your site is more complex, or doesn’t use WordPress, read more about setting the Open Graph tags.
Update: How to add featured image support to your WP theme
