How To Put Share Button AddThis With Counter On Blog AMP - Many ways to share ideas, writings, or opinions to the public, among them by utilizing social media or other media. So even with blogs, posting shared to social media is a source of traffic. And to attract visitors from social media, it takes a tool or widget that can facilitate the visitors to share our writing if they think our writing can be useful for others.
Called the share tool or social share tool which is a collection of tools to connect or share posts to various social media which is usually in the form of buttons with various interesting designs. With an interesting view, it is expected the visitors will be more interested to share our writing, but of course the main factor remains on the weight of writing that can make visitors to share the writing without having to be told.
In the AMP itself is actually already provided a button to share the amp-social-share is enough help simplify in the distribution of writing. And now for AMP HTML has added a share button from AddThis that we can use by displaying counter or the number of shares that have been done.
Of course this becomes a good news for AMP HTML users with the AddThis button share. Because with this now we can display counter or the amount of social media sharing with an eye catching design.
AddThis AddThis button also makes it easy to customize any social media share buttons that want to be displayed, including with colors, shapes, and more. Well now I will share how to install AddThis share button with counter on AMP blog.
How To Put Share Button AddThis With Counter On Blog AMP
1. Please create an AddThis account HERE, for those who already have an account means you just stay Sign in just to get into your AddThis dashboard.
2. Please click on the Tool menu, and click the Add New Tool button on the top right then select Share Buttons and select the Inline type (lined to the side). If you've made it then you just click on the tool.
3. Please arrange according to your requirement. or can follow these steps:
- Make sure the Jumbo option is for Share Counters
- Label Font Size use 26px and Share Count Font Size use 14px
- For Style choose Modern Fixed-Width
- Button Size select Large (32x32)
- And tick on Hide Network Names
4. After that just click the Save & Continue button.
5. Now please go to Edit HTML of your blog then save the following code above code </head> or </head><!--<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'/>
</b:if>
6. Then please copy the code below
<b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='5c81' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='"Check out this article: " + data:post.title + " - " + data:post.url' height='63' layout='flex-item'>
</amp-addthis>
</div>
</b:includable>
Note : Code ra-50f568026cf55185 (pub) and code 5c81 (widgetId) please replace with similar code like that in the URL obtained in the picture in step no 3.
7. And save above <b:includable id = 'shareButtons' var = 'post'>
8. Next use the following code to display the AddThis button, such as the title of the post or below the post.
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='shareAddThis'/>
</b:if>
9. To look neat, please add the following CSS on your blog's (custom-amp style).
.shareAddThis{margin:0;height:53px;overflow:hidden;}
.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
@media screen and (max-width:640px){.shareAddThis{height:98px;}}
10. Lastly, Save theme. and see the results
That's tips on How To Install Share Button AddThis With Counter On Blog AMP, hopefully with a short enough article this can be useful and good luck.
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog