How to embed Facebook video using Google AMP ?

Last Updated : 25 Oct, 2020

Adding Facebook video and comments to websites is now a popular and attractive feature in amp we easily do this by using amp-facebook component,

Required Scripts: Use the following script to import amp-facebook component

HTML

<script async custom-element="amp-facebook" src= 
"https://cdn.ampproject.org/v0/amp-facebook-0.1.js"> 
</script>

Attributes:

data-href: The URL of the Facebook video is to get the URL click on top right option on the video click on advance setting and copy URL.
data-embed-as: A video can be embedded as –
- post (default)
- video
data-include-comment-parent: This attribute can be set as true or false default is false if set as true then the parent comment of a comment reply can also be seen.
data-allowfullscreen: It sets the video to fullscreen default value is no fullscreen.
data-locale: Default the locale is set to the user system language you can change that by specifying a locale.

Example:

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Google AMP embed facebook post</title> 
  
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
      
    <!-- Import the `amp-facebook` component -->
    <script async custom-element="amp-facebook" 
src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"> 
    </script> 
    <link rel="canonical" href= 
"https://amp.dev/documentation/examples/components/amp-facebook/index.html"> 
  
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
      
    <style amp-boilerplate> 
        body { 
            -webkit-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            -moz-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            -ms-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
    </style> 
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation: none; 
                -moz-animation: none; 
                -ms-animation: none; 
                animation: none 
            } 
        </style> 
    </noscript> 
</head> 
  
<body> 
    <!--embedding fb video as video-->
    <amp-facebook width="552" height="310" 
        layout="responsive" data-embed-as="video"
        data-href= 
"https://www.facebook.com/geeksforgeeks.org/videos/549199759161152/"> 
    </amp-facebook> 
</body> 
  
</html>