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

本文概述

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>

输出如下：