srcmini本文概述
有时, 作为一名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然后创建完全免费的自定义窗口小部件。填写详细信息并创建自定义窗口小部件后, 你将被定向到包含代码的页面。复制它并将其粘贴到你的程序代码中。
属性：
- 数据发布ID：它是所使用的窗口小部件的发布者的发布者ID。
- 数据小部件ID：它是正在使用的窗口小部件的窗口小部件ID。
- 数据小部件类型：此属性从浮动和内联描述小部件的类型。
- 数据标题：它是一个可选属性, 用于设置工具的标题。如果不存在, 则会采用文档中存在的那个。
- 数据网址：它是一个可选属性, 用于设置要共享的URL。如果不存在, 则会采用文档中存在的那个。
- 数据媒体：它是可选属性, 用于定义要共享的媒体的URL。如果不存在, 则未定义。
- 数据描述：它是可选属性, 用于设置页面描述。如果不存在, 则未定义。
例子：
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>输出如下：
评论前必须登录！
注册