CODEWITHSUNDEEP
thumbnailssharethisfacebook-share
H. Ferrence
H. Ferrence

Reputation: 8116

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?

Upvotes: 0

Views: 1057

Answers (1)

Haney
Haney

Reputation: 34832

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.

Upvotes: 1

Related Questions