diff --git a/README.md b/README.md
index c0759db5..18c18ba1 100644
--- a/README.md
+++ b/README.md
@@ -25,12 +25,12 @@
## The problem
Trying to embed well known services (like [CodePen][codepen],
-[CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
-[Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
-[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
-[Twitch][twitch], [Twitter][twitter] or [YouTube][youtube]) into your
-[Gatsby][gatsby] website can be hard, since you have to know how this needs to
-be done for all of these different services.
+[CodeSandbox][codesandbox], [Facebook][facebook], [GIPHY][giphy],
+[Instagram][instagram], [Lichess][lichess], [Pinterest][pinterest],
+[Slides][slides], [SoundCloud][soundcloud], [Spotify][spotify],
+[Streamable][streamable], [Twitch][twitch], [Twitter][twitter] or
+[YouTube][youtube]) into your [Gatsby][gatsby] website can be hard, since you
+have to know how this needs to be done for all of these different services.
## This solution
@@ -49,6 +49,7 @@ empty lines) and replace it with the proper embed-code.
- [Supported services](#supported-services)
- [CodePen](#codepen)
- [CodeSandbox](#codesandbox)
+ - [Facebook](#facebook)
- [GIPHY](#giphy)
- [Instagram](#instagram)
- [Lichess](#lichess)
@@ -209,6 +210,32 @@ https://codesandbox.io/s/ynn88nx9x?view=split
+### Facebook
+
+#### Usage
+
+```md
+https://facebook.com/23859431504/videos/688096388646012
+```
+
+
+Result
+
+```html
+
+```
+
+
+
### GIPHY
#### Usage
diff --git a/src/__tests__/transformers/Facebook.js b/src/__tests__/transformers/Facebook.js
new file mode 100644
index 00000000..1bea1174
--- /dev/null
+++ b/src/__tests__/transformers/Facebook.js
@@ -0,0 +1,100 @@
+import cases from 'jest-in-case';
+
+import plugin from '../../';
+import { getHTML, shouldTransform } from '../../transformers/Facebook';
+
+import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
+
+cases(
+ 'url validation',
+ ({ url, valid }) => {
+ expect(shouldTransform(url)).toBe(valid);
+ },
+ {
+ 'non-Facebook url': {
+ url: 'https://not-the-facebook-website.com',
+ valid: false,
+ },
+ "non-Facebook url ending with 'facebook.com'": {
+ url: 'https://not-facebook.com',
+ valid: false,
+ },
+ "non-Facebook url ending with 'facebook.com' having '/videos/'": {
+ url: 'https://not-facebook.com/videos',
+ valid: false,
+ },
+ "non-Facebook url ending with 'facebook.com' having proper path": {
+ url: 'https://not-facebook.com/23859431504/videos/688096388646012',
+ valid: false,
+ },
+ 'Facebook home page': {
+ url: 'https://facebook.com',
+ valid: false,
+ },
+ 'Facebook user page': {
+ url: 'https://www.facebook.com/profile.php?id=7933107',
+ valid: false,
+ },
+ 'Facebook photo post': {
+ url: 'https://www.facebook.com/photo?fbid=10115396272683000',
+ valid: false,
+ },
+ 'Facebook video post': {
+ url: 'https://facebook.com/23859431504/videos/688096388646012',
+ valid: true,
+ },
+ "Facebook video post having 'www' subdomain": {
+ url: 'https://www.facebook.com/23859431504/videos/688096388646012',
+ valid: true,
+ },
+ 'Facebook named video post': {
+ url: 'https://facebook.com/RandyRogersBand/videos/688096388646012',
+ valid: true,
+ },
+ "Facebook named video post having 'www' subdomain": {
+ url: 'https://www.facebook.com/RandyRogersBand/videos/688096388646012',
+ valid: true,
+ },
+ }
+);
+
+test('Gets the correct Facebook iframe', () => {
+ const html = getHTML(
+ 'https://facebook.com/23859431504/videos/688096388646012'
+ );
+
+ expect(html).toMatchInlineSnapshot(
+ `""`
+ );
+});
+
+test('Plugin can transform Facebook links', async () => {
+ const markdownAST = getMarkdownASTForFile('Facebook');
+
+ const processedAST = await plugin({ cache, markdownAST });
+
+ expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
+ "
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "
+ `);
+});
diff --git a/src/__tests__/transformers/__fixtures__/Facebook.md b/src/__tests__/transformers/__fixtures__/Facebook.md
new file mode 100644
index 00000000..fae48936
--- /dev/null
+++ b/src/__tests__/transformers/__fixtures__/Facebook.md
@@ -0,0 +1,21 @@
+https://not-the-facebook-website.com
+
+https://not-facebook.com
+
+https://not-facebook.com/videos
+
+https://not-facebook.com/23859431504/videos/688096388646012
+
+https://facebook.com
+
+https://www.facebook.com/profile.php?id=7933107
+
+https://www.facebook.com/photo?fbid=10115396272683000
+
+https://facebook.com/23859431504/videos/688096388646012
+
+https://www.facebook.com/23859431504/videos/688096388646012
+
+https://facebook.com/RandyRogersBand/videos/688096388646012
+
+https://www.facebook.com/RandyRogersBand/videos/688096388646012
diff --git a/src/transformers/Facebook.js b/src/transformers/Facebook.js
new file mode 100644
index 00000000..0d0c40a0
--- /dev/null
+++ b/src/transformers/Facebook.js
@@ -0,0 +1,13 @@
+export const shouldTransform = (url) => {
+ const { host, pathname } = new URL(url);
+
+ return (
+ ['facebook.com', 'www.facebook.com'].includes(host) &&
+ pathname.includes('/videos/')
+ );
+};
+
+export const getHTML = (string) => {
+ const src = `https://facebook.com/plugins/video.php?href=${string}`;
+ return ``;
+};
diff --git a/src/transformers/index.js b/src/transformers/index.js
index 50483ca3..256ac475 100644
--- a/src/transformers/index.js
+++ b/src/transformers/index.js
@@ -1,5 +1,6 @@
import * as CodePenTransformer from './CodePen';
import * as CodeSandboxTransformer from './CodeSandbox';
+import * as FacebookTransformer from './Facebook';
import * as GIPHYTransformer from './GIPHY';
import * as InstagramTransformer from './Instagram';
import * as LichessTransformer from './Lichess';
@@ -15,6 +16,7 @@ import * as YouTubeTransformer from './YouTube';
export const defaultTransformers = [
CodePenTransformer,
CodeSandboxTransformer,
+ FacebookTransformer,
GIPHYTransformer,
InstagramTransformer,
LichessTransformer,