Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Add screenshot of current page as Open Graph image. Primes the cache by including the image at the bottom of the page as well.
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="'.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 cache so FB gets the image and not a loading screen
echo '<img src="'.urlencode( $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ).'?w=1500" width="1" height="1" style="visibility: hidden;">';

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