Reddit sharing

Dev Zone Web Development
1

Hi folks!

Been bad att hanging out here, but today I stumbled upon something of a headache. I'm trying to optimize my site for different sharing options, as it is a site mainly about my art endeavours I want sharing to be as good as possible for just that! That means that I want to be able to share the actual artwork in image format on as many external services as possible.

This works great for the larger services such as Facebook, Twitter, Pinterest, Google+ and whatnot. But now I have turned my mad eyes t'wards Reddit, and the /r/Art subreddit. At the top we see that all the reddits have a nice thumbnail attached to it, in many cases this is due to the thing shared is an actual image file. Makes sense. But I want to be able to get a thumbnail attached to a specific Artwork page on my site where all the info about the artwork can be found.

When I check some reddits, these points to a Imagur page, and this is what I want to do for my site. So I checked the page source to see what differs from my site and Imagur's. Looks lite the only metadata that differed were oEmbed, so I threw some oEmbed capabilities into my site. But after trying to create a new reddit with this in place I still don't get a nifty thumbnail to show for.

Been googling this problem to no avail, so I take a desperate leap of faith and post a topic here, and I have no idea why I'm not hanging around here more as I am a avid watcher of The Tek! (default lunch viewings on week days).

So do you know the appropriate way to make reddit sharing as rich as possible? Would be nice if I just could have a button on the Artwork page to share directly with Reddit, just like the other social sharing buttons that I have on the page!

Here's an example of a Artwork on my site: https://fagertveit.com/artwork/187

And here's one that seems to work from Imagur: http://imgur.com/Rec6Pvz

Any pointers and help is appreciated!

2

Reddit decides which thumbnail to use in this order:

  1. If the URL links directly to an image, use that.
  2. If an OpenGraph meta tag is present on the page, as in this test post, use that. Basically, just add <meta property="og:image" content="{{your image url}}"/> to your head tag.
  3. When none of this is applicable, look for the largest image on the page, but ignore very small images, very long/wide images and penalize images with "sprite" in their name.

Oh, and for making a share button, you can just link to https://www.reddit.com/submit or https://www.reddit.com/r/{{subreddit}}/submit and optionally add url={{your page url}} and/or title={{your title suggestion}} as the query string.

3

Thanks for the reply, though none of the alternatives you list seem to work for me, I have OG tag, and also the oembed standard implemented (did the oembed just to make things work on reddit, but no cigar :( )

Submitting art to reddit without the actual artwork showing as a thumbnail feels quite meaningless, and submitting the image file directly isn't what I want either as the whole meaning of it is to get some additional traffic to the site.

If I get this to work in the future I will add the reddit share button for sure!

Thanks! :)