Hugo: A Different Twitter Shortcode

this one, i am doing the easy way

Hugo / Hugo Configuration

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:

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.

  1. I’ve added extra spaces to the start of the shortcode in these examples to keep Hugo from trying to run them as actual shortcode calls. You’ll need to remove the space between "{{" and "<". [return]
  2. All of this works until Twitter changes the api, or Hugo changes under my feet, obviously. [return]