本文概述
- HTML代码示例
- HTML代码示例
文章图片
【如何在Google AMP中创建Floating amp-addthis()】有时, 作为一名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>
输出如下:
文章图片
推荐阅读
- 如何在Tableau中创建故事()
- 10个查找和删除重复文件的工具
- 简单判断是否存在丢包之ping+tracert+mtr
- 关于服务器开启ipv6服务,导致无法访问谷歌
- Docker(CentOS)
- 前端后端phpStudy环境下安装配置SSL证书,实现加密访问(Https)
- Ubuntu 16.04下安装nodeJs
- ubuntu使用apt-get安装软件,出现报错Err:1 http://security.ubuntu.com
- docker容器技术