Facebook pages are generally pretty boring, and I have a client who wanted a fancier facebook landing page.  So I decided to create one for Foodwhirl to see how difficult it was, before I costed it for her.  And, though a little complex (once I figured out that facebook was no longer supporting FBML and I needed to use iFrames, i found this great tutorial) , it wasn’t too hard for my mad web skillz.

If you haven’t “Liked” foodwhirl, just go here: http://www.facebook.com/Foodwhirl to see it!  And of course, Like foodwhirl while you’re there.

If you have friended Foodwhirl on Facebook, you can still see the page, just click ‘Welcome’ in the list in the left sidebar.

NOTE: if you’ve enabled secure browsing in facebook (https:), you’ll get an error message first.  Just click to go to http for that session, and you’ll be able to see it.

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

If you’re on Facebook, I’d totally love it if you’d go Like our Facebook Page! I’m planning on using it more in the future, but right now I post cool crafty links there, plus it gets the Dabbled RSS feed so you can see links to the most recent Dabbled posts there too. I’m planning on doing some contests and other fun stuff there too! So go share your love for Dabbled there!

If you’re a twitterer, there’s a great crafty community on Twitter. I’m DotatDabbled – if you friend me, be sure to send me a message so I know to friend you back!. And let me know if you need some recommendations on other cool people to friend… come on, come to the dark side!

You of course already get Dabbled via email or in your feedreader, right?  I’d be remiss if I didn’t provide a link: Get the Feed (RSS) or Get Dabbled via Email :)