Google AMP amp-facebook-like

简介：网页中一个非常受欢迎的功能就像来自社交媒体平台的按钮。 amp-facebook-like用于将 Facebook like 按钮嵌入到AMP HTML 页面。在这里，当嵌入 Facebook 喜欢按钮时，您无需访问 Facebook 本身就可以喜欢该帖子。

所需脚本：将以下包含源的脚本添加到 导入类似 amp-facebook 的组件。

属性：

1. data-href：被赞页面的 URL。
2. data-action：要在按钮上显示的字符串。默认值为“喜欢”。
3. data-colorscheme：应该在按钮外使用的配色方案。默认情况下，它是亮的，也可以保持暗。
4. data-size：用于改变按钮的大小。默认情况下，它很小，也可以设置为大。
5. data-layout ：用于更改按钮的布局。有四种可用的布局，它们是：
   • 标准 （默认）
   • 按钮
   • button_count
   • box_count

例子：

HTML

  

    
    amp-facebook-like
    
    
  
    
    
    
  
    
    
    
        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
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    

  

    
    

  

输出