Sharing is Caring

Based on a discussion with Andrew today I was inspired to research exactly how Facebook pulls the thumbnail images and description it uses when you share a link in your status, like so:

As I suspected, Facebook automatically picks up the title, meta description, and up to eight images it finds on the page to choose from. For greater control however there are a few specific tags you can use. This was great for Andrew because he was trying to share a full Flash site he just finished, so there was no static imagery or text to find (I’ve given him the Joel lecture of using proper alternate content ;). For me controlling Facebook share options was important because a lot of my posts don’t have much imagery with them.

If you’re a developer, then the title and description should be self explanatory, and probably already optimized for users and search engines. You can use <meta name="title" content="Your Facebook Specific Title" /> if you want to specify something different from the page title. <meta name="description" /> works as normal.

The new one to me was for an image to be specified and it’s <link rel="image_src" href="http://yoursite.com/path/to/image.jpg" />. The only caveat seems to be that its dimensions are larger than 50×50.

I wanted this information to change on a post by post basis of course so here’s a code snippet for WordPress. It gets the post’s excerpt to use as a description and the post thumbnail (now available in WP 2.9+) as the source image, all outside of the Loop in your HTML’s head.


<?php
global $wpdb;
$query = "SELECT post_excerpt FROM wp_posts WHERE ID = " . $post->ID . " LIMIT 1";
$result = $wpdb->get_results($query, ARRAY_A);

if ($result[0]['post_excerpt']) {
$description = $result[0]['post_excerpt'];
} else {
$description = "Static description if no excerpt exists";
}

$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], 'post-thumbnail', false);
if ($thumb) {
$thumb = $thumb[0];
} else {
$thumb = "http://www.yoursite.com/path/to/static-image-if-no-thumbnail-exists.jpg";
}
?>
<meta name="description" content="<?php echo $description; ?>" />
<link rel="image_src" href="<?php echo $thumb; ?>" />

For my purposes it works great, but I don’t know how well it might interact with other SEO-type WordPress plugins. For other sharing-specific meta tags, such as audio and video, check out this article, or Facebook’s developer wiki.

And please, share away. Share

Simple, Gray, pretty much Awesome

That was the extent of Megan’s website requirements laid out in her design brief* when we started the project.

Using her own custom business card as inspiration we came up with a clean and open layout that wouldn’t distract from her artwork, as well as featuring her custom designs for sale on Etsy. All data for the galleries is maintained in XML allowing her to update on her own quickly, and since the store imports its data directly from Etsy any changes made on that site will instantly be reflected here.

As the galleries were all displayed using Flash and SimpleViewer, I created a custom mobile site that would allow quick access to all her contact info, designs, artwork and store without the use of any plug-ins. Useful for when she’s out schmoozing and networking around town. Dynamic PHP and CSS means no second set of data has to be maintained just for this mobile site and version control issues are eliminated.

Portfolio site includes:

  • Custom Design
  • Etsy API Integration
  • SimpleViewer Customization
  • Mobile Versions for Android, iPhone and Blackberry

View Live Site

* By design brief I really just mean the conversation about her future website over sushi :)