How to create Floating amp-addthis in Google AMP ?
Some times as a web developer we want to share our social media links and for that, we have to show the social media buttons and amp-addthis is made solely for this purpose. The amp-addthis component integrates the AddThis Floating Bar and Inline Share Buttons.
Setup: You have to import amp-addthis component in your header to use this tag.
HTML
<script async custom-element="amp-addthis"</script> |
Go to this website https://www.addthis.com/register and then create your custom widget which is absolutely free of cost. After filling the details and creating your custom widget you will be directed to a page containing the code. Copy it and paste it into your program code.
Attributes:
- data-pub-id: It is the publisher ID of the publisher for the widget being used.
- data-widget-id: It is the widget ID of the widget being used.
- data-widget-type: This attribute describes the type of widget from floating and inline.
- data-title: It is an optional attribute and it sets the title of the tool. If it is not present then the one present in the documentation will be taken.
- data-url: It is an optional attribute and it is used to set the URL to be shared. If it is not present then the one present in the documentation will be taken.
- data-media: It is an optional attribute use to define the URL of the media to be shared. If it is not present then it is left undefined.
- data-description: It is an optional attribute and used to set the description of the page. If it is not present then it is left undefined.
Example:
HTML
<!doctype html><html amp> <head> <meta charset="utf-8"> <script async src= </script> <script async custom-element="amp-accordion" </script> <link rel="canonical" href= <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <title>GeeksForGeeks | 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" </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> |
Output:
Please Login to comment...