Auto generate youtube thumbnail on wordpress article when sharing on facebook

This tutorial will show you how to make your wordpress article looks like the image that is shown when shared on facebook without doing any screen capture.





On wordpress 4.0, Youtube embedding has been made easy. You can simply paste the link of  a youtube video and it will show immediately, however the wordpress social sharing preview on facebook is not yet optimize.

I will show you how to generate youtube thumbnail on facebook without doing any screen capture.

Facebook uses og meta tags to display the title, image and description on its timeline. In order for our wordpress article to show the correct  info on facebook timeline we need to generate og meta tags on our article.

Install Wordpress Plugin

In this tutrorial We will use Wordpress Social Graph Plugin to generate our og meta tags.

after installation and activation of the plugin, we can now see the new meta box in our post create.

Insert Thumbnail from youtube

We will use youtube automated thumbnail and pass it on facebook. By default there are 4 images that youtube generates.

http://img.youtube.com/vi/[youtube id]/0.jpg
http://img.youtube.com/vi/[youtube id]/1.jpg
http://img.youtube.com/vi/[youtube id]/2.jpg
http://img.youtube.com/vi/[youtube id]/3.jpg

we will use thelargest image of the 4 http://img.youtube.com/vi/[youtube id]/0.jpg

To verify if our meta image works. visit the article and view its page source.

We can still add several meta tags but for now i will only show the meta image to cut it short.

Use facebook lint to check the output

Facebook Lint is a tool to help us test our content sharing output. It also gives us recommendation on fixing and improving our content.

And The Result :