Make your Slack previews better - Add Reading Time, Publish Date, and more to link previews

[Jlamb1]

Thanks to @EricSalvi's post, there's now a simple way to determine reading time using HubL. For reference, this is what it looks like:

{{ content.post_body|wordcount|divide(300) }}

This is great information to have, and I wanted to feature this information inside the link preview that unfurls when a link is shared socially. To do this, I had to make use of meta tags. In our Blog Post Head HTML, I added this bit of code:

<meta name="twitter:label1" value="Time To Read" />
<meta name="twitter:data1" value="{{ content.post_body|wordcount|divide(300) }} Minutes" />

As you can see, sharing the link now posts the time to read right in the preview:

Time to Read in link preview

Once that was added, we looked at how our site url was repeated in the preview. Adding an og:site_name tag fixed this to show the company name instead of the subdomain:

<meta property="og:site_name" content="Toast, Inc."/>

 And the results:replacing the url with the name of the company

 Another important bit of information for blog previews is the date the blog was published. Using a combination of the Open Graph publish time and HubL renders this code and result:

<meta property="article: published_time" content="{{ content.publish_date|datetimeformat('%Y-%m-%dT%H:%M:%S+00:00') }}" />

Note: you'll need to remove the space between 'article:' and  'publish' - HS Community reads that as an emoticon even when using the 'insert code' button

added publish date in unfurl

Note: Double check the offset time after this to ensure the correct time!

Finally, you can add your own twitter:label/data meta tags to grow this out further! We at Toast added an option to get a demo, for this final result:

<meta name="twitter:label2" value="Get a Demo:" />
<meta name="twitter:data2" value="http://bit.ly/2FZ5rwa" />

 

For more information on link unfurling, check out Matt Haughey's article on the subject here. Note that some of this isn't specific to Slack, but general social sharing.

[edjusten]

Hi @Jlamb1  Great hack! Thanks to you and @EricSalvi for some great creative developer thinking. 

Ed Justen