Hugo: Instragram shortcode refers to a deprecated Instragram API endpoint

[digitalcraftsman]

What version of Hugo are you using (hugo version)?

$ Hugo 0.76.5

Does this issue reproduce with the latest release?

Yes

How to reproduce?

When using the instagram shortcode with id BWNjjyYFxVx the shortcodes uses this template to construct the url https://api.instagram.com/oembed/?url=https://instagram.com/p/BWNjjyYFxVx. When opening it a notice informs you about the deprecation of the linked API endpoint.

See also #7866.

[onedrawingperday]

As per this document the existing API is deprecated since today October the 24th 2020.

The Facebook Developers documentation points users to a new oEmbed endpoint for Instagram and this document offers instructions about the necessary changes.

As per the doc:

The Instagram oEmbed endpoint requires either an App Access Token (recommended) or Client Access Token.

Basically Facebook has ended free access to the Instagram API.

This affects both the regular and simple Instagram shortcodes.

[monsieurnebo]

So will the built-in GoHugo snippet be updated accordingly? We could imagine an update with this new API, where the API key would be set in the projet config.

[onedrawingperday]

@monsieurnebo

It's more complicated than that.

Facebook now requires registering a website as an app to provide the API keys. A website's calls to the Instagram API will now be tracked and subject to rate limits etc. It is also possible that the Instagram simple shortcode can no longer be refactored in a GDPR compliant way. Website admins will have to gain user consent if they want to serve Instagram content in the EU.

I honestly think that times have changed. Hugo should not enable Facebook's tracking anymore (as well as Google's etc).

Also these built-in shortcodes require maintenance time that could be spent more productively in other areas (hint: remote reesources, pages for data etc.).

[ToniTornado]

Here is my "quick fix"

• Go to your Facebook Developer Account (or create one). Go to your app (or create one).

• Find your App-ID in the top left corner.

• Go to Dashboard and activate _oEmbed_.

• Go to Settings -> Extended -> Security and copy your client token.

• Create a file layouts/shortcodes/instagram.html in your project.

• Paste the following content and replace <APPID> and <CLIENTTOKEN> with your credentials:

{{- $pc := .Page.Site.Config.Privacy.Instagram -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/instagram_simple.html" . }}
{{- else -}}
{{ $id := .Get 0 }}
{{ $hideCaption := cond (eq (.Get 1) "hidecaption") "1" "0" }}
{{ with getJSON "https://graph.facebook.com/v8.0/instagram_oembed/?url=https://instagram.com/p/" $id "/&hidecaption=" $hideCaption "&access_token=<APPID>|<CLIENTTOKEN>" }}{{ .html | safeHTML }}{{ end }}
{{- end -}}
{{- end -}}

[jasikpark]

I would say that Hugo should include the information of the api being deprecated, with documentation on how to implement a shortcode yourself, but deprecating the shortcode more generally.

[techolik]

Here is my "quick fix"

• Go to your Facebook Developer Account (or create one). Go to your app (or create one).
• Find your App-ID in the top left corner.
• Go to Dashboard and activate _oEmbed_.
• Go to Settings -> Extended -> Security and copy your client token.
• Create a file layouts/shortcodes/instagram.html in your project.
• Paste the following content and replace <APPID> and <CLIENTTOKEN> with your credentials:

{{- $pc := .Page.Site.Config.Privacy.Instagram -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/instagram_simple.html" . }}
{{- else -}}
{{ $id := .Get 0 }}
{{ $hideCaption := cond (eq (.Get 1) "hidecaption") "1" "0" }}
{{ with getJSON "https://graph.facebook.com/v8.0/instagram_oembed/?url=https://instagram.com/p/" $id "/&hidecaption=" $hideCaption "&access_token=<APPID>|<CLIENTTOKEN>" }}{{ .html | safeHTML }}{{ end }}
{{- end -}}
{{- end -}}

Not sure if it's just me, but getting an error

(#10) To use 'Oembed API', your use of this endpoint must be reviewed and approved by Facebook. To submit this 'Oembed API' feature for review please read our documentation on reviewable features: https://developers.facebook.com/docs/apps/review.

[ardianta]

Here is my "quick fix"

* Go to your Facebook Developer Account (or create one). Go to your app (or create one).

* Find your App-ID in the top left corner.

* Go to `Dashboard` and activate _oEmbed_.

* Go to `Settings -> Extended -> Security` and copy your client token.

* Create a file `layouts/shortcodes/instagram.html` in your project.

* Paste the following content and replace `<APPID>` and `<CLIENTTOKEN>` with your credentials:

{{- $pc := .Page.Site.Config.Privacy.Instagram -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/instagram_simple.html" . }}
{{- else -}}
{{ $id := .Get 0 }}
{{ $hideCaption := cond (eq (.Get 1) "hidecaption") "1" "0" }}
{{ with getJSON "https://graph.facebook.com/v8.0/instagram_oembed/?url=https://instagram.com/p/" $id "/&hidecaption=" $hideCaption "&access_token=<APPID>|<CLIENTTOKEN>" }}{{ .html | safeHTML }}{{ end }}
{{- end -}}
{{- end -}}

Did not work for me.

I have another solution:

Instead of embeding it, what if we crawl it. Add the param __a=1 to the instagram URL and you will get JSON of the page.

For example:

https://www.instagram.com/p/CH04mIdlmxg/

Add the __a=1

https://www.instagram.com/p/CH04mIdlmxg/?__a=1

Here what will we get:

Then create custom instagram shortcode: layouts/shortcodes/instagram.html

{{- $pc := .Page.Site.Config.Privacy.Instagram -}}
{{- if not $pc.Disable -}}
    {{- if $pc.Simple -}}
            {{ template "_internal/shortcodes/instagram_simple.html" . }}
    {{- else -}}
            {{ $id := .Get 0 }}
            {{ $hideCaption := cond (eq (.Get 1) "hidecaption") "1" "0" }}
            {{ with getJSON "https://instagram.com/p/" $id "?__a=1" }}
                <figure>
                    <img src="{{ .graphql.shortcode_media.display_url }}" alt="{{ .graphql.shortcode_media.accessibility_caption }}" />
                    {{- if eq $hideCaption "0" -}}
                    {{ $caption := (index .graphql.shortcode_media.edge_media_to_caption.edges 0).node.text }}
                    <figcaption>{{ $caption }}</figcaption>
                    {{ end }}
                </figure>    
            {{ end }}
    {{- end -}}
{{- end -}}

[onedrawingperday]

@ardianta

This is a hack that broke in the past

No way are we going to refactor the Hugo internal shortcodes to use hacks.