Contents

Facebook Shortcode in Hugo


See how to embed Facebook page, post, and video in Hugo as shortcodes.

Messages from Facebook
Facebook announced v11.0 of the Graph API and Marketing APIs. With this update, there are new requirements to be able to access oEmbed APIs. To continue accessing the oEmbed APIs, you will have to submit your app for review by September 6th, 2021. If you want to request new access to the oEmbed APIs, you will also need to submit your app(s) for review.

About Facebook oEmbed

Facebook oEmbed endpoints allow you to get embed HTML and basic metadata for pages, posts, and videos in order to display them in another website or app.

How to Implement

Facebook App Configuration

If you are coming from “Instagram Shortcodes in Hugo”, just skip this step.

  1. Create an app in Facebook Developers Page
  2. Add oEmbed to your facebook app
  3. Don’t forget to activate oEmbed plugin
    /facebook-shortcode-in-hugo/facebook_oembed.webp
    oEmbed Plugins
  4. Find and copy App ID in top left corner and use it for .Site.Params.oembed.appId
  5. Go to Settings > Advanced > Security
  6. Copy Client Token and use it for .Site.Params.oembed.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 oembed.html in YourProject/layouts/shortcodes

    At this point we will integrate url query string parameter for Facebook Page, Post, and Video. The $type parameter with page will stand for Facebook Page, post for Facebook Post, and video for Facebook Video. The fb parameter will confirm that the oEmbed used is for Facebook.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    
    {{- $oe := .Site.Params.oembed -}}
    {{- $appId := $oe.appId -}}
    {{- $clientToken := $oe.clientToken -}}
    {{- if not $oe.privacy -}}
    {{ $host := .Get 0 }}
    {{ $type := .Get 1 }}
    {{ $id := .Get 2 }}
    {{- if eq $type "page" -}}
    {{ with getJSON "https://graph.facebook.com/v11.0/oembed_" $type "?url=" $id "&show_posts=false" "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}
    {{- else -}}
    {{ with getJSON "https://graph.facebook.com/v11.0/oembed_" $type "?url=" $id "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}
    {{- end -}}
    {{- end -}}
    

    If you are coming from “Instagram Shortcodes in Hugo”, you can combine both Facebook and Instagram into one shortcode by copy this code below.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    {{- $oe := .Site.Params.oembed -}}
    {{- $appId := $oe.appId -}}
    {{- $clientToken := $oe.clientToken -}}
    {{- if not $oe.privacy -}}
    {{ $host := .Get 0 }}
    {{ $type := .Get 1 }}
    {{ $id := .Get 2 }}
    {{- if eq $host "ig" -}}
    {{ $hideCaption := cond (eq (.Get 3) "hidecaption") "1" "0" }}
    {{ with getJSON "https://graph.facebook.com/v11.0/instagram_oembed/?url=https://instagram.com/" $type "/" $id "/&hidecaption=" $hideCaption "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}
    {{- else if eq $host "fb" -}}
    {{- if eq $type "page" -}}
    {{ with getJSON "https://graph.facebook.com/v11.0/oembed_" $type "?url=" $id "&show_posts=false" "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}
    {{- else -}}
    {{ with getJSON "https://graph.facebook.com/v11.0/oembed_" $type "?url=" $id "&access_token=" $appId "|" $clientToken }}{{ .html | safeHTML }}{{ end }}
    {{- end -}}
    {{- end -}}
    {{- end -}}
    

    You can adjust more available JSON’s parameters in every endpoint type, just go to take a look this table below.

    EndpointDescription
    GET /oembed_pageGet a Facebook page’s embed HTML and basic metadata.
    GET /oembed_postGet a Facebook post’s embed HTML and basic metadata.
    GET /oembed_videoGet a Facebook video’s embed HTML and basic metadata.
  2. Add front matter in config.toml:

    1
    2
    3
    4
    
    [params.oembed]
      appId = "YourAppId"
      clientToken = "YourClientToken"
      privacy = false
    
  3. Create an example facebook input in your markdown:

a. Sample input of Facebook Page

1
{{< oembed "fb" "page" "https://www.facebook.com/FacebookforDevelopers" >}}

b. Sample input of Facebook Post

1
{{< oembed "fb" "post" "https://www.facebook.com/FacebookforDevelopers/photos/a.441861428552/10151617410093553" >}}

c. Sample input of Facebook Video

1
{{< oembed "fb" "video" "https://www.facebook.com/FacebookforDevelopers/videos/2201055573317594" >}}
  1. The rendered output will be like this:

a. Sample output of Facebook Page

b. Sample output of Facebook Post

Embedded Posts are now available to everyone! Including several enhancements such as in-line video playback, an improved...

Posted by Meta for Developers on Thursday, August 22, 2013

c. Sample output of Facebook Video

Delivering Value to Billions Through AI-Powered Personalization

AI is a critical part of delivering meaningful user experiences across many Facebook products. In this session, we'll cover how AI is used for product personalization and explain how technologies like reinforcement and embedding learning enable new ways of delivering value. We'll also share how we're making these technologies available beyond Facebook.

Posted by Meta for Developers on Wednesday, May 1, 2019