If you’re like a lot of us posting our stuff to our FaceBook profiles and fan pages, you’re writing a lot of text and not necessarily always using a lot of images. The trouble with this is that in such cases, the selection of images in the sharing window will more likely be advertisements or other things which have nothing whatsoever to do with what you’re writing about. Meanwhile for those that use large images, the scaled-down version available to you on FaceBook may not look all that attractive. And the thing is: links without images to go with them just don’t look that good in the FaceBook interface. If you want click-through, you’ve gotta jazz it up a bit. While discussing this problem with a coworker of mine, we came up with a relatively elegant solution which I’d like to share with you:
The solution? Why, a hidden div, of course! I have a hidden div on every page of my site that includes what amounts to a “logo image” for the site. That logo is obviously not visible to the visiting audience, but is available for FaceBook to scrape. Thus when I share a link to this site, I get an attractive image to go with it, even if there’s no images on the post:
[code language=”html” toolbar=”false”]
<div style="display: none;">
Your image here!
</div>
[/code]
You could of course put as many images as you want in this hidden div. The idea is to make them nice and small – FB resizes to 100px wide – so that you’re sure the image will always look good in your news feed. For those who blog with lots of photos, putting a properly-resized version of each photo into a hidden div would be the way to go. PHP does an excellent job resizing photos anyway. Hmmm… Maybe this might even be a WP plugin for me to play around with in the near future…
