Contents

Instagram Shortcode in Hugo


Hugo it self has built-in Instagram shortcode supports, but for some reason it can’t be used anymore. In this article i will write about how to solve this problem in your Hugo environment.

Instagram Shortcode

If you are using Instagram shortcode in Hugo and having an issue with it, you are not the only one. Using Instagram shortcode with {{< instagram "BWNjjyYFxVx" "hidecaption" >}} will generate an error like this:

1
Failed to get JSON resource "https://api.instagram.com/oembed/?url=https://instagram.com/p/BWNjjyYFxVx/&hidecaption=1": Failed to retrieve remote file: Bad Request

At the moment, Hugo using deprecated oEmbed-legacy linked API endpoint. Those deprecated API causes an error when Hugo retrieving the data. This is also happen with the Hugo Continuous Integration build which force Erik to allow getJSON errors to be ignored with this commit.

Problem Solving

Facebook Developers lead us to use the newest Instagram oEmbed endpoint instead. This topic is being discused in #7879. Using the newest API is required to create a Facebook App to generate App ID and Client Token.

Facebook App Configuration

  1. Create an app in Facebook Developers Page
  2. Add Instagram Graph API and oEmbed to your facebook app
  3. Don’t forget to activate oEmbed plugin
    /instagram-shortcode-in-hugo/facebook_plugins.webp
    Instagram Graph Api and oEmbed Plugins
  4. Find and copy App ID in top left corner and use it for .Site.Params.instagram.appId
  5. Go to Settings > Advanced > Security
  6. Copy Client Token and use it for .Site.Params.instagram.clientToken
    /instagram-shortcode-in-hugo/facebook_appid.webp
    Facebook App ID and Client Token

Theme Configuration

After you get both App ID and _Client Token, follow these instruction below:

  1. Create an instagram.html in YourProject/layouts/shortcodes

    At this point we will integrate url query string parameter both Instagram Post and TV. The $type parameter with p will stand for Instagram Post and tv for Instagram TV.

1
2
3
4
5
6
7
8
9
{{- $ig := .Site.Params.instagram -}}
{{- $appId := .Site.Params.instagram.appId -}}
{{- $clientToken := .Site.Params.instagram.clientToken -}}
{{- if not $ig.privacy -}}
{{ $type := .Get 0 }}
{{ $id := .Get 1 }}
{{ $hideCaption := cond (eq (.Get 2) "hidecaption") "1" "0" }}
{{ with getJSON "https://graph.facebook.com/v10.0/instagram_oembed/?url=https://instagram.com/" $type "/" $id "/&hidecaption=" $hideCaption "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}
{{- end -}}
  1. Add front matter in config.toml:
1
2
3
4
[params.instagram]
  appId = "YourAppId"
  clientToken = "YourClientToken"
  privacy = false
  1. Create an example instagram input in your markdown:

    3.1. Sample input of Instagram Post

    1
    
    {{< instagram "p" "BWNjjyYFxVx" "hidecaption" >}}
    

    3.2. Sample input of Instagram TV

    1
    
    {{< instagram "tv" "BkQUbR8h1sp" "hidecaption" >}}
    
  2. The rendered output will be like this:

    4.1. Sample output of Instagram Post

    4.2. Sample output of Instagram TV


At last, you can enjoy to use Instagram shortcode in Hugo without any problems. Have a good day! 😉