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

Jlamb1
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:

 

Time to Read in link previewTime 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 companyreplacing 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 unfurladded 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
edjusten
HubSpot Employee

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
0 Upvotes