Create a gist now

Instantly share code, notes, and snippets.

Add screenshot of current page as Open Graph image. Primes the wp.com cache by including the image at the bottom of the page as well.
<?php
add_action( 'wp_head', 'add_screenshot_as_ogimage' );
function add_screenshot_as_ogimage(){
// default width = 1500 -- 200px minimum, Facebook recommends 1500x1500, max image size of 5mb
echo '<meta property="og:image" content="http://s.wordpress.com/mshots/v1/'.urlencode( $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ).'?w=1500"/>';
echo '<meta property="og:type" content="website">'."\n";
echo '<meta property="og:url" content="'. home_url() . $_SERVER["REQUEST_URI"].'"/>'."\n";
echo '<meta property="og:title" content="'.get_the_title().'"/>'."\n";
echo '<meta property="og:description" content="'.get_the_excerpt().'"/>'."\n";
}
// Optional
add_action( 'wp_footer', 'add_screenshot_as_ogimage_footer' );
function add_screenshot_as_ogimage_footer(){
//prime WP.com cache so FB gets the image and not a loading screen
echo '<img src="http://s.wordpress.com/mshots/v1/'.urlencode( $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ).'?w=1500" width="1" height="1" style="visibility: hidden;">';
}
@LuigiClaudio

I've been trying to set the op:image property using the mshots screenshot, although the facebook debugger returns the correct screenshot I'm getting "Composer Data Unavailable: Failed to get composer template data." and doesn't allow the sharing of the post in production. Did you experience any of this when passing mshots screenshot as og:image property?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment