Information Resources
WordPress Video Thumbnails and Facebook
Video Thumbnails (also called “Poster Movies” by Quicktime and “Poster Images” by other video services) are the photos that are displayed in a video player before a video is activated and/or while the video is buffering.
If your blog is built on WordPress, and your videos are hosted on YouTube, you’ll notice that Facebook’s “Like” and “Send” buttons will rather liberally “scrape” (Facebook’s version of spidering and indexing) the article you posted. If you have the WordPress SEO plugin installed, you’re given some greater control over the granularity of your meta. But neither the WordPress core nor this popular plugin currently has a handler for passing YouTube video thumbnails to your social networks via Open Graph. For posts that are videos with only a few words of supplemental copy, Facebook users may not be enticed to click these shared links if they don’t include video thumbnails.
Until WordPress SEO updates its image handlers, here’s a quick, easy trick to extract a video ID from your YouTube embed code and use it to pass a thumbnail to Facebook via the YouTube API.
Find the file class-opengraph.php, typically here:
http://www.yourdomain.com/wp-content/plugins/wordpress-seo/frontend/class-opengraph.php
Jump to around line 264, in the function called “image”, and you’ll find the following code:
... if ( preg_match_all( '/<img [^>]+>/', $post->post_content, $matches ) ) {
foreach ( $matches[0] as $img ) {
if ( preg_match( '/src=("|\')(.*?)\1/', $img, $match ))
$this->image_output( $match[2] );
}
}
}Add a little chunk of code to search for video embeds, and include thumbnails among the Open Graph meta properties, if they’re found.
... if ( preg_match_all( '/<img [^>]+>/', $post->post_content, $matches ) ) {
foreach ( $matches[0] as $img ) {
if ( preg_match( '/src=("|\')(.*?)\1/', $img, $match ))
$this->image_output( $match[2] );
}
}
if (preg_match_all("#(?<=v=)[a-zA-Z0-9-]+(?=&)|(?<=v\/)[^&\n]+(?=\?)|(?<=v=)[^&\n]+|(?<=youtu.be/)[^&\n]+#", $post->post_content, $matches)) {
foreach(array_unique($matches[0]) as $m) $this->image_output("http://img.youtube.com/vi/{$m}/0.jpg");
}
}There is no need to republish your posts or rescrape your page using Facebook’s Debugger. Just reload your browser, share the post on Facebook, and your problem is solved.
Permalink: https://www.era404.com/info/wordpress-video-thumbnails/
