This topic is a linked part of a larger work: “Discourse Website Manual for edgeryders.eu”
Content
1. Introduction
2. Instructions
3. Example
1. Introduction
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.
2. Instructions
-
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.
-
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.
-
Create a screenshot of your video. Simply stop the video, create a screenshot, crop to the video boundaries, and save as a JPG image.
-
Add the screenshot to your topic. Upload it like you upload any picture. It will result in code like the following:
 -
Hide the screenshot from humans. For that, hide the image’s markup inside
[details=(video preview thumbnail)] … [/details]. It will for example look like this:[details=(video preview thumbnail)]  [/details] -
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).
3. Example
My absolute favourite classical music 
To share this topic on Facebook and see that it creates a proper link preview picture, you can copy & paste this URL: https://edgeryders.eu/t/id/9473
