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

Highlighted
Regular Contributor

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:

 

Screen Shot 2018-03-17 at 2.24.07 PM.pngTime 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:Screen Shot 2018-03-17 at 2.42.24 PM.pngreplacing 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

 

 

Screen Shot 2018-03-19 at 11.15.52 AM.pngadded 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" />

 

 Screen Shot 2018-03-19 at 11.16.38 AM.png

 

 

 

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.

 

1 Reply 1
HubSpot Moderator

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

 

Ed Justen


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes