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

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

   

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

   

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.

   Endpoint	Description
   GET /oembed_page	Get a Facebook page’s embed HTML and basic metadata.
   GET /oembed_post	Get a Facebook post’s embed HTML and basic metadata.
   GET /oembed_video	Get 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" >}}

4. The rendered output will be like this:

a. Sample output of Facebook Page

b. Sample output of Facebook Post

c. Sample output of Facebook Video