Welcome to RenEvo Sign in | Join | Help
in
Home Wiisis Blogs Forums Photos Downloads About

Developer

Facebook Site Thumbnails Tutorial

Here is a quick tutorial for all you Facebook users.

It annoyed me that when I added links from my website, the images that were given were “eh” at best, and usually from some random blog post. I had followed a tutorial that I found on using the image_src meta, but it just didn’t work for me.

Here is my process

First thing I did was open up my site in my browser, I then “zoomed” out a bit to get more content in the view (I use a widescreen monitor).  I then took a decent centered screenshot (OneNote screen clipping is awesome), in Photoshop I tweaked it a bit to my liking so that it was nice and centered.  I then exported as a 200x175 png file and named it “renevo.thumb.png”

Uploaded to my web site, then added this tiny bit of HTML to the site header.

<img src=”/images/renevo.thumb.png” alt=”” style=”display:none;” />

This doesn’t effect my website’s layout at all, and since it is set to display:none “most” browsers will not download the image.

And, for the result when sharing a link on Facebook.

image

So… super easy way to add a 100% available website thumbnail.

Published Monday, July 20, 2009 3:54 AM by Tom Anderson

Comments

 

links for 2009-08-26 | Folks Pants said:

August 26, 2009 12:05 PM
Anonymous comments are disabled

About Tom Anderson

Tom Anderson's Facebook profile
Powered by Community Server, by Telligent Systems