Skip to content

Instantly share code, notes, and snippets.

@nciske
Last active January 19, 2021 02:36
Show Gist options
  • Save nciske/6222436 to your computer and use it in GitHub Desktop.
Save nciske/6222436 to your computer and use it in GitHub Desktop.
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
Copy link

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