How to create Inline amp-addthis in Google AMP ?
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 >w3wiki | 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 >Beginner For Beginner</ 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: