Pimp your shares with Facebook Open Graph

by Ian on November 29, 2010
opengraph1

It’s way easier then it sounds, at least what we’re going to do. When people share your site (or a page or blog post from your site) on Facebook, it tries to find the title, a description, and an image automatically. Sometimes the things you’d prefer to have there don’t show up, or the user has to click through a few pics to find the right one. Sometimes the appropriate images are referenced in the stylesheet too, where Facebook doesn’t look. I’m sure you’ve see it before.

Want to go form this…

…to this?

You’re in luck, Facebook’s bringing meta tags back:








See what we did there? Facebook requires title, type*, URL, and image (which we controlled by uploading our own and specifying the URL) and we also added a description tag. Just add your own Open Graph tags in the <head> section of your website. It’ll work with Facebook’s Like button, manual copy-pasting, or third-party sharing tools. You can get all the details in the Facebook Developers section.

*The type property might make more sense for some things like music or movies than what you’re sharing, but pick the best from this list of supported types. I wouldn’t worry about it too much, it’s just required.

It’s really easy and can make a difference. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *