Hugo: A Different Twitter Shortcode
Hugo has a handy little shortcode to embed tweets into a page. It takes the form1:
{{ < tweet [ tweet id ] >}}
So for example, in a Markdown page:
{{ < tweet 763188308662898691 >}}
Produces this:
The power was out so we took a walk, and I have never seen so many people out standing around in our neighborhood.
— Ardith Betz (@ardithbetz) August 10, 2016
Under the hood, it’s using the Twitter API to provide the embed code via GET statuses/oembed.
Which is fine and all, but there are times when you don’t want the default embed style, and want to use some of the
options the Twitter API provides. In a project, I wanted to hide previous-tweet-in-a-thread that Twitter provides by
default, using the hide_thread
option. (If I want to display threading, I can do it myself with hardcoding and CSS,
using styling that’s a bit easier to follow.) The easiest way to turn off the default Twitter thread display was to
make my own shortcode that I could call instead of Hugo’s internal one2.
In layouts/shortcodes, I have tweet-single.html, which looks like this:
<div>
{{ (getJSON "https://api.twitter.com/1.1/statuses/oembed.json?dnt=1&hide_thread=1&id=" (index .Params 0)).html | safeHTML }}
</div>
And now I can call tweet-single just like I can call tweet:
{{ < tweet-single [tweet id x] >}}
I, uh, also told Twitter to turn off tracking for that embed via dnt
, because I’m a decent and not at all paranoid person.
Now that everything is exactly the way I want it, I should probably upgrade Hugo and see what needs to be fixed.