I’ve been using the FB Connect plugin for allowing visitors to login on the blog. It adds the Open Graph tags that Facebook reads to determine how a page will be displayed on a Facebook stream when shared, but not all of them. The description and image tags are missing, plus there are not tags on the home page, only the posts. I’ve set out to change this.

Adding the description
In the functions.php of my theme I’ve added

function mgb_og_meta_desc() {
	global $post;
	// single page
	if (is_singular()) {
		$meta = strip_tags($post->post_content);
		$meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
		$meta = substr(trim($meta), 0, 400);
		echo "";
	}
	// general pages
	else {
		$name = get_option('blogname');
		echo "";
		echo "";
	}
}

add_action('wp_head', 'mgb_og_meta_desc');

The code is pretty straightforward, there is just a separation between single pages and not. The site_nametag is added in the general pages because FB Connect doesn’t add one in non-single pages.Adding the image
Again the functions.php file:

function mgb_get_post_images($iPostID,$num_img,$type_img) {
	// Get images for this post
	$arrImages = get_children( array( 'post_parent' => $iPostID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
	// set default
	$sImgString = get_bloginfo('template_url')."/images/mgb_gray.png";
	// If images exist for this page
	if($arrImages) {
		// Get array keys representing attached image numbers
		$arrKeys = array_keys($arrImages);
		// Get the image attachment with $num_img
		$iNum = $arrKeys[$num_img];
		// Get the thumbnail url for the attachment
		if ($type_img == "small") {
			$sThumbUrl = wp_get_attachment_thumb_url($iNum);
		} else if ($type_img == "medium"){
			$sThumbUrl = wp_get_attachment_url($iNum, 'medium');
		} else {
			$sThumbUrl = wp_get_attachment_url($iNum);
		}
		// Print the image
		$sImgString = $sThumbUrl;
	}
	return $sImgString;
}

function mgb_og_meta_image() {
	global $post;
	// single page
	if (is_singular()) {
		$image = mgb_get_post_images($post->ID,0,'medium');
		echo "";
	}
	// general pages
	else {
		echo "";
	}
}

add_action('wp_head', 'mgb_og_meta_image');

The mgb_get_post_images() function will find an attached image from the post and return it. If it doesn’t, it will return a default image. The function can actually be used for other purposes as well, as it is separate from the function that adds the meta tag, mgb_og_meta_image().

That’s all, comments, corrections are welcome! :)

Tip: Facebook caches the data it collects from a page when someone shares it. If you update a post, try to share it and Facebook’s preview shows you old data, you can use the Facebook Linter tool which main purpose is to reads your page and give you the meta tags that it finds, but also clears the cached information.

Note: Code for attached images of a post is based from code from wordpress-spirir.com and rlmseo.com.

WordPress plugin of the day: SyntaxHighlighter Evolved by Viper007Bond

// Update #1: If you are using the Sharedaddy plugin (also part of Jetpack), it also adds an “og:description” tag. To remove it, you need to edit wp-content/plugins/jetpack/modules/sharedaddy/sharing-sources.php.

// Update #2: Here is another plugin to get images from your post by Justin Tadlock.