How to create Inline amp-addthis in Google AMP ? Last Updated : 28 Feb, 2022 Comments Improve Suggest changes Like Article Like Report Introduction: 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" src= "https://cdn.ampproject.org/v0/amp-addthis-0.1.js"> </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 of 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="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>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> <!-- Import the `amp-addthis` component. It is mandatory script --> <script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"> </script> <style amp-custom> h1 { color: forestgreen; } h3 { color: crimson; } </style> </head> <body> <center> <h1>Geeks For Geeks</h1> <h3>Inline Format</h3> </center> <!-- Integrate share buttons into your content for a seamless sharing experience. The code below should be replaced with your code --> <amp-addthis width="320" height="92" data-pub-id="ra-5c191331410932ff" data-widget-id="mv93" data-widget-type="inline"> </amp-addthis> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create Inline amp-addthis in Google AMP ? aditya_taparia Follow Improve Article Tags : Technical Scripter Web Technologies HTML Google-AMP Similar Reads 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 3 min read How to add lightbox effect to amp-carousel in Google AMP ? The amp-carousel is used to make an image carousel in an AMP HTML page. In AMP HTML, it is also possible to add a lightbox effect to an amp-carousel using amp-lightbox-gallery given that amp-carousel only contains images in them. Required Script: Importing amp-carousel component into the header. HTM 2 min read How to create Nested Accordion using Google AMP amp-accordion? Introduction: Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible textboxes. Collapsible textboxes are that division which is the combination of heading and content, generally only heading is visible but when it is hit the conten 3 min read Google AMP amp-addthis 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 3 min read How to create Hidden Header using Google AMP amp-accordion? Introduction: Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible textboxes. Collapsible textboxes are that division which is the combination of heading and content, generally only heading is visible but when it is hit the conten 2 min read How to create Dynamic Header using Google AMP amp-accordion? Introduction: Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible textboxes. Collapsible textboxes are that division which is the combination of heading and content, generally only heading is visible but when it is hit the conten 2 min read How to set audio loop in amp-audio of Google AMP ? Since the release of HTML5, audios can be added to webpages using the “audio†tag. Previously audios could be only played on webpages using web plugins like Flash. The “audio†tag is an inline element which is used to embed sound files into a web page. It is a very useful tag if you want to add audi 2 min read How to disable download option in amp-audio in Google AMP ? Since the release of HTML5, audios can be added to webpages using the “audio†tag. Previously audios could be only played on webpages using web plugins like Flash. The “audio†tag is an inline element which is used to embed sound files into a web page. It is a very useful tag if you want to add audi 3 min read How to create Animated accordion using Google AMP amp-accordion ? Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible text boxes. Collapsible text boxes are that division which is the combination of heading and content, generally only heading is visible but when it is hit the content is display 3 min read How to create Comparison accordion using Google AMP amp-accordion ? Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible text boxes. Collapsible text boxes are that division which is the combination of heading and content, generally only heading is visible but when it is hit the content is display 3 min read Like