This topic is a linked part of a larger work: "Discourse Website Manual for edgeryders.eu"
This topic shows how to add an embedded video to a Discourse topic in such a way that a link preview picture appears when sharing the topic on Facebook or other platforms that support the Open Graph protocol.
Facebook etc. does not generate a screenshot of an embedded video to show as the link preview, so our workaround is to do this manually and embed the screenshot as well – but in such a way that only websites see it, not people.
Note: This howto uses the new, Markdown based markup for images in Discourse. You can easily adapt it to the
<img src="…"> HTML markup that DIscourse used earlier.
1. Create the topic with your video. As usual, to embed your video simply post a link to your video on its own line, with no whitespace in front of the link, and with an empty line above it. This works for YouTube, Vimeo and a few other video sharing platforms. If it does not work for a platform you use regularly, a Discourse software admin can fix that for you.
2. Try if Facebook will pick up a thumbnail picture. Because for some videos at least from YouTube, Facebook will pick up the
video thumbnail automatically and use it as a link preview picture. This could depend on video popularity: if you embedded a popular video, Facebook will have a thumbnail picture in its database already and use that. If the video is not popular and it does not have a video thumbnail already, Facebook will however not generate one.
3. Create a screenshot of your video. Simply stop the video, create a screenshot, crop to the video boundaries, and save as a JPG image.
4. Add the screenshot to your topic. Upload it like you upload any picture. It will result in code like the following:
5. Hide the screenshot from humans. For that, hide the image's markup inside
[details=<small>(video preview thumbnail)</small>] … [/details]. It will for example look like this:
[details=<small>(video preview thumbnail)</small>]
6. Share the link to the topic on Facebook or another website that supports Open Graph for link previews. If no preview appears the first time on Facebook, try again a few minutes later because Facebook needs time to create and sort in a link preview image (details).
My absolute favourite classical music
To share this topic on Facebook and see that it creates a proper lin preview picture, you can copy & paste this URL:
(video preview thumbnail)