Fork me on GitHub
Risk First Logo

Home of Risk-First Software Development



Start Here


Home
Contributing
Quick Summary
A Simple Scenario
The Risk Landscape

Discuss


Please star this project in GitHub to be invited to join the Risk First Organisation.

Blog


Consuming Hacker News 14 May 2019
Twitter Cards 22 March 2019
Next - Scrum? 7 March 2019
Available On Amazon 25 February 2019
New Proof 10 February 2019

Publications



Click Here For Details


22 March 2019

Twitter Cards

by Rob Moffat

I’m not the best at Social Media… like a lot of people I’m giving Facebook the swerve completely these days. However, I set up a Twitter account @risk_first to post articles, and I’ve also been posting on LinkedIn and Hacker News.

Turns out, there’s quite a lot you can do to improve the presentation of posts on Twitter. Now, when you post a Risk First article on there, it’ll use the Twitter Card to display a summary of the post, which looks like this:

Screenshot 2019-03-22 at 10 11 38

This was pretty hard to get right. You have to have a 2:1 aspect ratio in the images, which can be a pain - if you don’t, Twitter crops the image in usually a not-helpful way. I used Kite9 (my diagramming software) to produce an image for each post.

The Risk First Website uses GitHub’s built-in Jekyll static-site generator, so I was able to generate the Twitter Cards using the Jekyll metadata on each article.

Then, I use Jekyll SEO Tag to set the header information on the HTML page:

<html>
  <head>
    ... 
    <meta name="description" content="Risk-First is about applying risk theory and practice to Software Development, building a pattern language of useful risk terms.">
    <meta property="og:description" content="Risk-First is about applying risk theory and practice to Software Development, building a pattern language of useful risk terms.">
    <link rel="canonical" href="https://riskfirst.org/">
    <meta property="og:url" content="https://riskfirst.org/">
    <meta property="og:site_name" content="Risk-First">
    <meta property="og:image" content="https://riskfirst.org/images/generated/titles/index.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@risk_first">
    <meta name="twitter:creator" content="@risk_first">
...
  </head>
....

Twitter (and LinkedIn) pick this stuff up and display the appropriate image. I’ve also generated images for quotes in the articles:

Screenshot 2019-03-22 at 10 20 10

It’s doubtful whether any of this will make a blind bit of difference - Twitter seems like it’s basically an outrage-machine these days, but it was an interesting piece of work to get done.

Hope someone finds this useful!

tags:

Found this interesting? Please add your star on GitHub to be invited to join the Risk-First GitHub group.