如何在 Google AMP 中创建内联 amp-addthis ？

简介：有时，作为 Web 开发人员，我们希望分享我们的社交媒体链接，为此，我们必须显示社交媒体按钮，而 amp-addthis 专为此目的而制作。 amp-addthis 组件集成了 AddThis Floating Bar 和 Inline Share Buttons。

设置：您必须在标头中导入 amp-addthis 组件才能使用此标签。

转到此网站https://www.addthis.com/register ，然后创建您的自定义小部件，这是完全免费的。填写详细信息并创建自定义小部件后，您将被定向到包含代码的页面。将其复制并粘贴到您的程序代码中。

属性：

1. data-pub-id：它是正在使用的小部件的发布者的发布者 ID。
2. data-widget-id：它是正在使用的小部件的小部件 ID。
3. data-widget-type：该属性描述了浮动和内联小部件的类型。
4. data-title：它是一个可选属性，它设置工具的标题。如果它不存在，则将采用文档中存在的那个。
5. data-url：它是一个可选属性，用于设置要共享的 URL。如果它不存在，则将采用文档中存在的那个。
6. data-media：它是一个可选属性，用于定义要共享的媒体的 URL。如果它不存在，则它是未定义的。
7. data-description：可选属性，用于设置页面的描述。如果它不存在，则它是未定义的。

例子：

  

    
    
    
  
    
    
  
    
  
    
  
    GeeksForGeeks | amp-addthis
  
    
        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;
            }
        
    
  
    
    
    
  
    
        h1 {
            color: forestgreen;
        }
  
        h3 {
            color: crimson;
        }
    

  

    
        Geeks For Geeks
  
        Inline Formate
    
  
    
    
    

  

输出：