个性化阅读
专注于IT技术分析

如何在Google AMP中创建Floating amp-addthis?

本文概述

如何在Google AMP中创建Floating amp-addthis?1

 

有时, 作为一名Web开发人员, 我们想共享我们的社交媒体链接, 为此, 我们必须显示社交媒体按钮, 而amp-add这是专门为此目的而制作的。 amp-addthis组件集成了AddThis浮动栏和内联共享按钮。

设定:你必须在标头中导入amp-addthis组件才能使用此标记。

HTML代码示例

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

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

属性:

  1. 数据发布ID:它是所使用的窗口小部件的发布者的发布者ID。
  2. 数据小部件ID:它是正在使用的窗口小部件的窗口小部件ID。
  3. 数据小部件类型:此属性从浮动和内联描述小部件的类型。
  4. 数据标题:它是一个可选属性, 用于设置工具的标题。如果不存在, 则会采用文档中存在的那个。
  5. 数据网址:它是一个可选属性, 用于设置要共享的URL。如果不存在, 则会采用文档中存在的那个。
  6. 数据媒体:它是可选属性, 用于定义要共享的媒体的URL。如果不存在, 则未定义。
  7. 数据描述:它是可选属性, 用于设置页面描述。如果不存在, 则未定义。

例子:

HTML代码示例

<!doctype html>
<html amp>
  
<head>
     <meta charset = "utf-8">
     <script async src =
         "https://cdn.ampproject.org/v0.js">
     </script>
      
     <script async custom-element = "amp-accordion"
src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
     </script>
      
     <link rel = "canonical" href =
"https://amp.dev/documentation/examples/components/amp-addthis/index.html">
      
     <meta name = "viewport" content =
"width=device-width, minimum-scale=1, initial-scale=1">
      
     <title>srcmini | amp-addthis</title>
      
     <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>
  
     <script async custom-element = "amp-addthis" 
src = "https://cdn.ampproject.org/v0/amp-addthis-0.1.js">
     </script>
  
     <style amp-custom>
         h1 {
             color: forestgreen;
             text-align: center;
         }
  
         h3 {
             color: crimson;
             text-align: center;
         }
     </style>
</head>
  
<body>
     <h1>
         Geeks For Geeks
     </h1>
     <h3>
         Floating Format
     </h3>
  
     <amp-addthis width = "320" height = "92" 
         data-pub-id = "ra-5c191331410932ff" 
         data-widget-id = "mv93"
         data-widget-type = "floating">
     </amp-addthis>
</body>
  
</html>

输出如下:

如何在Google AMP中创建Floating amp-addthis?2

赞(0) 打赏
未经允许不得转载:srcmini » 如何在Google AMP中创建Floating amp-addthis?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏