A little script to generate a website for supporting dynamic Hextris score tiles in Tweets e.g.
It's janky as all hell, but it works™. It definitely needs a little experimentation...
- Clone this repository to
github.com/hextris/hextriscores. - Rename the repository from
hextriscorestohigh(this gives us a nice URL likehextris.github/high/score/1337). - In the Tweet your score feature link to
hextris.github/high/score/$SCOREinstead of justhextris.github/hextris, where$SCOREis the players' actual score.
💥 Doing so will make the high score appear in the Twitter Summary card images. Clicking on that URL will still redirect to the root URL @ hextris.github.io/hextris.
The file score/1337/index.html would be available via http://hextris.github.io/high/score/1337. If you look at the twitter:description and twitter:img:src meta properties below, it should be obvious what's going on.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Hextris High Score: 1337</title>
<meta property='twitter:card' content='summary' />
<meta property='twitter:site' content='@hextris' />
<meta property='twitter:site:id' content='2742209678' />
<meta property='twitter:creator' content='@hextris' />
<meta property='twitter:creator:id' content='2742209678' />
<meta property='twitter:domain' content='http://hextris.github.io' />
<meta property='twitter:title' content='Hextris High Score!' />
<meta property='twitter:description' content='I just scored 1337 points on Hextris, an addictive puzzle game inspired by Tetris.' />
<meta property='twitter:image:src' content='http://hextris.github.io/score/images/1337.png' />
<meta property='twitter:image:width' content='120' />
<meta property='twitter:image:height' content='120' />
<meta http-equiv='refresh' content='0;URL=http://hextris.github.io/hextris'>
</head>
</html>$ git clone https://github.com/leereilly/hextriscores.git
$ bundle install
$ ruby script.rb
Processing image 1 ...
Processing image 2 ...
...
...
...
Processing image 9998 ...
Processing image 9999 ...
