Course image thumbnail for Facebook posts

Hi all! Does anyone know what sort of voodoo magic you have to do in order to make Facebook automatically pull in a a thumbnail image from your course files when you post the link to Facebook? (I know you can add an image to the post as a separate step, but I'm not crazy about that because when users click on that image it just opens up the larger version of the image, rather than link them to the course.) I've googled a bit on this and am not coming up with anything. 

4 Replies
Phil Mayor

I don't think you can do it without manually selecting it. Facebook should pull an image from a URL when you post it but it is flakey even with normal websites. With a Storyline course I struggle to take a screenshot in javascript because the course is rendered in many layers, unless it was set up to do it I don't think Facebook will manage it.

Matthew Bibby

According to Facebook:

"There are three ways thumbnails are picked. In order of preference:

Site specified: Sites can explicitly pick the image they want shown when their page is posted on Facebook by adding <link rel="img_src" href="..." /> to their markup. The same is true for other attributes like title, description, video etc. as well, and more details can be found under the 'Sharing Rich Media' section here: https://developers.facebook.com/docs/sharing/reference/feed-dialog 

Custom rules: Domains whose pages are frequently posted get custom manually created rules for where the best image lives in the markup.

Standard rules: For all the links that don't fall under 1 or 2, a standard set of rules is applied to filter and sort the images, and up to 25 of the 'best' images are shown in the posted link preview. 'Best' usually means the largest, though things like height to width ratio and the image URL also play a role."

 

Jeanette Brooks

Thanks so much for replying, guys!! I'm getting closer! 

Matthew: the link you shared got me pointed in the right direction. I drilled a little further into the FB developers stuff and ended up at this page:

https://developers.facebook.com/docs/sharing/webmasters#markup

...which helped me write the exact tags I needed to add to my course's index.html. I've almost got things working the way I want.

My only hitch now is that my feature image is an animated gif, yet it's showing as a static image when I scrape the page in the debugger or post it live on FB - even when I specify the og:image:type tag as "gif".  I did find this guy's solution which sort of works... it causes the gif to show as animated in the FB post, but the downside is, the image is no longer clickable (users have to click on the link in the text of the post to go to the course).