Figure out how to handle/setup Instagram API token

[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.

[monsieurnebo]

The @ToniTornado 's fix is working fine (thanks!). His code contains some extra features you may not need, so here is a light version of it where Instagram API credentials are stored in the site config (seems cleaner to me):

config.yaml

params:
  instagram:
    appId: "xxxxxx"
    clientToken: "xxxxxx"

layouts/shortcodes/instagram.html

{{- $appId := .Site.Params.Instagram.AppId -}}
{{- $clientToken := .Site.Params.Instagram.ClientToken -}}
{{ $id := .Get 0 }}
{{ with getJSON "https://graph.facebook.com/v8.0/instagram_oembed/?url=https://instagram.com/p/" $id "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}

[ToniTornado]

@monsieurnebo, yes, that looks much cleaner! I'm using Hugo only for some side projects. All I did was slightly modifying the original source code to use my id & token.

I believe that most people's issues with my fix are not related to the fix itself but to the corresponding configuration in the Facebook Developer Account. You can debug that by just opening this URL in your browser (replace placeholders with your id & token):

https://graph.facebook.com/v8.0/instagram_oembed/?url=https://instagram.com/p/CHc_BmNgRCW&access_token=<YOU_APP_ID>|<YOUR_CLIENT_TOKEN>

You should get the full post as a response in JON format like this:

{
   "version": "1.0",
   "author_name": "kittens_of_world",
   "provider_name": "Instagram",
   "provider_url": "https://www.instagram.com/",
   "type": "rich",
   "width": 658,
   "html": "\u003Cbl.......",
   "...": "...",
}

If you get an error message, you can use that to fix your Facebook setup.

[theodore-dream]

Hello,

Thanks for the hard work here for the fix folks. I just want to note @monsieurnebo that while I love this more fancy/brief method, it didn't work for me. The information from my config file never made it into the shortcode. So my API calls never had properly filled information for the AppID and token.

@ToniTornado your original fix still works though. A secondary issue I hit, just FYI for others - As Toni stated above I did have to debug with that url they provided - and that helped a lot. Going to this page 'https://developers.facebook.com/tools/explorer/' (the instagram graph API explorer) seemed to fix my permissions issue even though I had no idea why.

Just for reference, this is the error I saw when I tried the fancier/briefer method:

---

Failed to get JSON resource "https://graph.facebook.com/v9.0/instagram_oembed/?url=https://instagram.com/p/CJg-BDPhef9&access_token=|": Failed to retrieve remote file: Bad Request
logged 1 error(s)

With this syntax in a .md file for the shortcode: [I share because I think maybe something about the instagram Hugo default shortcode and this custom one may have conflicted?]

{{< instagram CJg-BDPhef9 >}}

Using version:

hugo version
Hugo Static Site Generator v0.74.2-48565DE6/extended linux/amd64 BuildDate: 2020-07-17T17:32:27Z

Happy new year

[basnijholt]

Note that there is a solution here by @jhvanderschee.

I have tried all the other solutions above without avail. The solution I linked works well for me at https://www.nijho.lt/

[bep]

Closing this as "out of scope" or: Too hard.

[jhvanderschee]

Note that there is a solution here by @jhvanderschee.

I have tried all the other solutions above without avail. The solution I linked works well for me at https://www.nijho.lt/

The PPI service is no longer active due to the ongoing 'sabotage' from Facebook. Here is a good alternative that is easy to implement in your Hugo website: https://www.usecue.com/blog/free-instagram-widget/.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.