Many social bookmarking sites and social networks create thumbnails from any picture referenced on a shared page. But what if your post lacks images? What if the only images come from sponsor ads? What if you want to use a screenshot of the shared page, your site’s front page or a carefully crafted graphic?
You can influence your site’s social face
Call it a thumbnail, a screenshot or a snapshot. It amounts to the same thing: it’s an image that is displayed next to your page title and excerpt that encourages people to click it.
Decide whether you want to use a static (non-changing) thumbnail or a semi dynamic one that is created for each web page you publish then follow these instructions…
Using a Static Thumbnail
Use these three easy steps to ensure a preferred thumbnail is always available:
- create a thumbnail
- upload it to your site’s root directory
- reference it in your site’s metatags
The simplest and least frustrating way to create thumbnails is to use Thumbalizr (free service).
Thumbalizr takes screenshots of given pages then allows you to download thumbnails of various default dimensions or to download thumbnails of a dimension you state.
Using Dynamic Thumbnails
Even easier than creating a static thumbnail:
- visit bitpixels.com (free service)
- reference your bitpixel thumbnail URL in your webpage metatags
Bit Pixels is a totally free way to create thumbnails of your site’s pages. I discovered it while registering JournalXtra with Networked Blogs (follow JournalXtra here). It is a creation of the NetworkedBlog’s team and is “powered by the Google App Engine” so expect it to be around for some time to come.
Referencing Your Thumbnail
Ensure your thumbnail is usable by placing the following metatags into your webpage’s head section between the HTML <head></head> tags:
<meta property="og:image" content="URL-TO-THE-THUMBNAIL" /> <link rel="image_src" type="image/jpeg" href="URL-TO-THE-THUMBNAIL" />
The first line is specific to Facebook. Facebook uses the open graph protocol for gathering information about websites. You can read more about open graph at Facebook. The second line tells everybody but Facebook where to look for your website’s thumbnail.
Replace “URL-TO-THE-THUMBNAIL” with either the path to the thumbnail on your server or with your Bit Pixels’ thumbnail URL. For example, using Bit Pixels,
<meta property="og:image" content="http://www.bitpixels.com/getthumbnail?code=xxxxx&size=200&url=https://journalxtra.com" /> <link rel="image_src" type="image/jpeg" href="http://www.bitpixels.com/getthumbnail?code=xxxxx&size=200&url=https://journalxtra.com" />
Note: you need a free Bitpixels account to use the Bitpixels service. The above example contains xxxxx where your Bitpixel’s user ID should be placed.
WordPress Bloggers
WordPress bloggers can reference thumbnails using the header-footer plugin. Once installed, visit Settings>Header and Footer then add the <link rel=”…” /> line to both header text areas and the <meta property=”…” /> line to the text area entitled “Facebook Open Graph Default Image” (remember to select it for use).
WordPress bloggers can also use Bit Pixels URLs to create unique thumbnails for each page:
- save a draft copy of your post
- immediately before publishing, copy your to-be-published page’s URL or get its shortlink
- use the page URL or shortlink to create a Bit Pixels’ thumbnail URL
- add the thumbnail URL into the post editor’s Custom Field’s section as a “thumbnail”
- publish the post
Alternatively, once the post is published, edit it to insert the Bit Pixel’s thumbnail image.
Further Reading
Need to know more about Thumbnails? Try one of these sites:
- U Stand Out: How to Size Your Facebook Thumbnail
- Wikipedia: Thumbnail
- UMD: The Optimal Thumbnail
Update
When this post was first written, I stated that Bitpixels created a fresh thumbnail whenever the Bitpixels’ thumbnail URL is followed by a user agent. After writing the post I realized that BitPixels does not refresh thumbnails; it actually creates one thumbnail per URL and forever serves that same thumbnail whenever that particular thumbnail is requested to display. That thumbnail is created the first time the thumbnail creation URL is used. Please keep this in mind when you create the thumbnail for a page – make sure the page is properly formatted first.
