Install AddThis Share Button in Valid AMP Blogger Template
How to Setup and Install AddThis Share Button in AMP Blogger Template. Create and implement AddThis with amp-addthis for Blogspot AMP Template
Guide to Setup and Install AddThis Share Button in AMP Blogger Template
AddThis as a third party tool that provides Share Button services, now supports the Google AMP page. By using the amp-addthis component, you can install a Share Button on the AMP Blogger Template..
Actually, AMP itself has provided amp-social-share components, but there are still some bugs. Besides that, amp-addthis has several advantages compared to amp-social-share. One of them is AddThis has a counter to calculate how many shares a user does.
But for this time,
amp-addthis only support Inline Share Button. Here's a guide to installing AddThis Share Button on AMP Blogger.Create AddThis Share Button
Go to https://addthis.com, register using your google account. Follow the registration step, then chose Share Button.
The AddThis work area will appear, select Inline and click Continue. Select which social media you want to display on the share button widget.
To display the total shares, click the 3K icon on the Inline tab. Then select Jumbo on the Share counter type. See the picture below:
To display the total shares, click the 3K icon on the Inline tab. Then select Jumbo on the Share counter type. See the picture below:
Next click tab Behavior, checklist the 'Hide on Homepage' option.
The registration process and creation of the share button widget is complete. Click Active Tool, then on 'my site is' select AMP. Then you will get the AddThis Share Button instruction for your AMP page.
The code obtained includes the amp-addthis component, and also the HTML code for your widget, the code sample like below:
<amp-addthis width="320" height="92" data-pub-id="ra-5b75277ba2f63548" data-widget-id="4bg0"></amp-addthis>
- ra-5b75277ba2f6354 is your publisher's AddThis data
- 4bg0 is your Widget data ID.
Save that code.
Place AddThis in Blogger Template valid AMP HTML
To install the Inline Share Button, go to the Blogger.com dashboard and click Themes - Edit HTML.
Copy and paste
Copy and paste
amp-addthis component just before </head> :
<b:if cond='data:blog.pageType == "item"'>
<script async='async' custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
</b:if>
This sample will place the AddThis Share Widget in footer, in the end of article content. Find this code
<div class="post-footer-line post-footer-line-1"> . Paste below code after that:
<div class='clear'/>
<b:if cond='data:blog.pageType == "item"'>
<div class='shareAddThis'>
<amp-addthis width="320" height="92"
data-pub-id="ra-5b75277ba2f63548"
data-widget-id="4bg0">
</amp-addthis>
</div>
</b:if>*Change
ra-5b75277ba2f6354 your AddThis Publisher ID, and 4bg0 widget code.Copy this CSS, paste below this code
<style amp-custom='amp-custom'>
.shareAddThis{margin:0;height:70px;overflow:hidden}.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px}
@media screen and (max-width:640px){.shareAddThis{height:98px}}
/* full width amp-ad */
.post-body amp-ad { margin-top: 10px;
margin-bottom: 10px;
margin-left: -10px;
margin-right: -10px;
max-width: 713px;}
@media screen (min-width:768px){.post-body amp-ad {margin-bottom: 10px;
margin-left: -20px;
margin-right: -20px;
max-width: 713px;}}
When finished, please SAVE changes to your template.
To change the style of your widget, please change it to the AddThis Dashboard. If you have questions, please submit in the comments column.
To change the style of your widget, please change it to the AddThis Dashboard. If you have questions, please submit in the comments column.