How to set the Thumbnail Image for Share Buttons from a site's Home Page to the Page being Shared

I know the title is not worded properly but I do not know how best to summarize my issue.

I have a ShareThis button installed on my site and an older Facebook Share Button.

When I share any page on my site, both the ShareThis and the Facebook share pop-ups show a thumbnail version of the site's Home Page.

I want the thumbnail to show the current page being shared.

How do you make that happen? Is it even possible to do?

Solution

Social sharing sites like Facebook and LinkedIn tend to respect schema.org schemas. So I tend to slap SoftwareApplication on my body then use a hidden div, putting what I want shared in there. You could manually (or programmatically) take a snapshot of the page and include it in the schema div to have it display as the image.

Here's what it looks like from one of my sites:

<body itemscope itemtype="http://schema.org/SoftwareApplication">
    <!-- SoftwareApplication information -->
    <div style="display: none;">
        <h1 itemprop="name">Dache - Distributed Caching For .NET Apps</h1>
        <img itemprop="image" src="/images/logo.png" />
        <p itemprop="description">Fast, scalable .NET distributed caching with meaningful performance metrics for your managers and a simple API for your development team.</p>
    </div>
    ...

Facebook in particular uses their OpenGraph technology. Here's an article on configuring what appears when your site is shared on Facebook.