How to install AddThis Inline Share buttons in AMP (accelerated mobile pages)
4 minute read
Learn how to install AddThis Inline Share Buttons on your AMP site in an easy and safe way with a few simple steps.
AddThis Inline Share Buttons is available for use in AMP. Make it easy for users who visit your blog to share your content thanks to social buttons. Allow your visitors to connect directly to more than 200 social networks, including Google+, Facebook, Twitter, WhatsApp and more.
If you already use Blogger templates in the AMP format, you can follow the instructions to add the new AddThis script to show buttons to share your post "articles" in social networks.
We start.
Before doing any tutorial it is recommended to make a backup of your blog in case something does not go well
Step 1.- You must create an AddThis account at https://www.addthis.com/register
The creation of an AddThis account is completely free and allows you to access the entire set of website tools, as well as detailed analysis reports to better understand the social traffic of your site.
Step 2.- Go to your control panel and customize your Share buttons (AMP currently only supports INLINE sharing buttons)
Step 3. Select INLINE.
Step 4. Click on Continue.
Step 5. Now it will show you the next window.
Step 6. Customize your buttons to share to your liking, then press "Activate tool".
Step 7. Show you the next window.
Step 8. Activate where AMP says.
Step 9. Copy the script.
Note: Have the code saved to proceed to insert it in Blogger later
Step 10.- Now copy the second code generated by AddThis
Example:
Step 11. Install the two codes generated by AddThis in Blogger.
Step 12. One click on Theme.
Step 13. One click on Edit html.
Step 14. Look for the following code.
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Step 15. Enter the AddThis script with a conditional just after the code you found.
<b:if cond='data:blog.pageType in {"item"}'>
<script async='async' custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
</b:if>
Step 16. Look for the following code.
<div class='post hentry'>
Step 17. Insert the following code with a conditional just after the code you found.
<b:if cond='data:blog.pageType == "item"'>
<amp-addthis
height='92'
layout='flex-item'
data-pub-id="ra-5aeb6ea2a67b1aac"
data-widget-id="yrjm">
</amp-addthis>
</b:if>
Make the following changes:
Change the two IDs found in the lines
data-pub-id = "ra-5aeb6ea2a67b1aac"
data-widget-id = "yrjm"
Replace the ID: ra-5aeb6ea2a67b1aac
Replace the ID: yrjm
You have to replace it with the IDs of your AddThis code.
Step 18.- One click on Save Topic
Visit his blog
Easy truth!
Do you need help?
Any question do not hesitate to write.
Post a Comment