Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Figure out how to handle/setup Instagram API token #7879

Open
digitalcraftsman opened this issue Oct 24, 2020 · 27 comments · Fixed by #8616
Open

Figure out how to handle/setup Instagram API token #7879

digitalcraftsman opened this issue Oct 24, 2020 · 27 comments · Fixed by #8616

Comments

@digitalcraftsman
Copy link
Member

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
Copy link
Contributor

onedrawingperday commented Oct 24, 2020

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
Copy link

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
Copy link
Contributor

onedrawingperday commented Oct 26, 2020

@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
Copy link

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
Copy link

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
Copy link

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
Copy link
Contributor

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:

Selection_281

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
Copy link
Contributor

@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
Copy link

monsieurnebo commented Dec 2, 2020

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
Copy link

@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
Copy link

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

Vantablack added a commit to Vantablack/LoveIt that referenced this issue Jan 4, 2021
- Instagram shortcode does not work
gohugoio/hugo#7879
@bep bep added this to the v0.98.0 milestone Apr 13, 2022
@bep bep modified the milestones: v0.98.0, v0.99.0 Apr 28, 2022
@bep bep modified the milestones: v0.99.0, v0.100.0 May 24, 2022
@bep bep modified the milestones: v0.100.0, v0.101.0 May 31, 2022
@bep bep modified the milestones: v0.101.0, v0.102.0 Jun 16, 2022
@bep bep modified the milestones: v0.102.0, v0.103.0 Aug 28, 2022
@bep bep modified the milestones: v0.103.0, v0.104.0 Sep 15, 2022
@bep bep modified the milestones: v0.104.0, v0.105.0 Sep 23, 2022
@bep bep modified the milestones: v0.105.0, v0.106.0 Oct 26, 2022
@bep bep modified the milestones: v0.106.0, v0.107.0 Nov 18, 2022
@bep bep modified the milestones: v0.107.0, v0.108.0 Dec 3, 2022
@bep bep modified the milestones: v0.108.0, v0.109.0 Dec 14, 2022
@bep bep modified the milestones: v0.109.0, v0.111.0, v0.110.0 Jan 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

16 participants