Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

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


  #1  
Old Mar 8, 2010, 08:15 AM
Androsko
 
4 posts · Nov 2009
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Add Twitter and Facebook Links timnash Header configuration & styling 10 Dec 14, 2010 02:46 AM
[SOLVED] how to add images to footer tarak Atahualpa 3 Wordpress theme 6 Jul 21, 2010 02:11 PM
How do I add margins/spacing to ALL images using the Images section? oskarfalk Atahualpa 3 Wordpress theme 1 Sep 2, 2009 06:09 AM
thumbnails in recent posts jimkend Forum How-To 2 Jul 30, 2009 11:49 AM
thumbnails for all category posts and searches veenublue Atahualpa 3 Wordpress theme 2 Apr 30, 2009 01:05 PM


All times are GMT -6. The time now is 03:59 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.