How to: The easy way to add Facebook thumbnails to posts with no images

This is an issue I've been having for a while, although it isn't a problem with Atahualpa. It's more an issue with how Facebook handles shared links. It's great that Facebook creates a thumbnail for shared links, as it makes the link stand out better while providing some visual reference. Unfortunately, Facebook won't let you upload your own thumbnail. Your options are limited to whatever images Facebook can find in the link you provide. For blogs, this can be a serious problem. There are many kinds of posts that may not have images for Facebook to find: posts of video embeds, short status update type posts, liveblogs, stories/poetry/prose, etc. I run the blog for my video production company, so naturally we post a lot of videos. When posting links for our video posts to Facebook, I'd always have a problem with the thumbnail.

Then I had a flash of inspiration, and I found a really easy solution to my problem. If you have a post with no images, but you want it to have some kind of thumbnail in Facebook, this is what you do:

1. Upload the image that you'd like to use as a thumnail to Wordpress
2. Insert that thumbnail image into the post you would like to have that thumbnail (position doesn't matter)
3. If using the visual editor: Click the Edit Image icon, go to the Advanced Settings tab, and in the Style section add display: none;
4. If using the HTML editor: Find the <img> tag for the thumbnail image, and add style="display: none;", or if it already has a style attribute, just add display: none; to that

If done correctly, the image will not appear in the post or even the visual editor, but Facebook will be able to find it and use it to create a thumbnail for the link. The trick is that display: none; property, which hides the image when viewing the post and doesn't create any blank space. Facebook disregards the display property info when it generates the thumbnail, so it can still find the images that aren't displayed. Also this doesn't work with the "visibility" style property, since that will add blank space to your post and alter your layout. Also you can add multiple thumbnails by adding more than one image with the display: none; property. Just keep in mind that Facebook will generate the thumbnails in the order they appear in the post. So if you have a preferred thumbnail, you might want to put it first so people immediately see that one on Facebook.

If you want to try it out, you can experiment by posting these links to Facebook. Notice that the thumbnails created by Facebook don't appear in the posts themselves:

http://www.thereforeyou.com/content/...song-sings-you
http://www.thereforeyou.com/content/...-to-your-gooby

And if you found this tip helpful, please check out the rest our blog, ThereforeYou.com, and share our videos and posts with people. We're a sketch comedy group and video production company called Therefore Productions. We have a fan page on Facebook, too, and we'd love for you to become a fan. Also I created ThereforeYou.com, so comments and tips would be appreciated.

Happy posting,
Androsko