أخبار ساخنة

How To Install Share Button AddThis With Counter On Blog AMP

Shared publishing on social networks is the source of traffic. To attract visitors from social media, How To Install Share Button AddThis With Counter On Blogger AMP it a tool that can make it easier for visitors to share our writings if they think our writing may be useful to 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 to 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.
Well, How To Install Share Button AddThis With Counter On Blog AMP.
1. First Step
Please create an account in AddThis HERE, for those who already have an account means you just Sign in just to get into your AddThis dashboard.
2. Second Step
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. Third Step
1-Make sure the Jumbo option is for Share Counters
2-Label Font Size use 26px and Share Count Font Size use 14px
3-For Style choose Modern Fixed-Width
4-Button Size select Large (32x32)
5-And tick on hiding Network Names
And keep in mind: After the customization of the finished view, do not always click the Save & Continue button. But please copy the URL of the page listed in the address bar of the browser as follows. What I mark is the code needed for the next step.

After that just click the Save & Continue button.
4. Fourth Step
Now please go to Edit HTML of your blog then save the following code above code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>

Then please copy the code below
            <b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-5af5462abd3db067' data-widget-id='egih' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='63' layout='flex-item'>

And save the above code
<b:includable id='shareButtons' var='post'>

and code
please replace it with the code like that in the URL obtained in Step Three earlier.
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 == &quot;item&quot;'>
<b:include data='post' name='shareAddThis'/>

In order to look neat, please add the following CSS on style amp-customyour blog.
.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
dia screen and (max-width:640px){.shareAddThis{height:98px;}}
Many thanks
الاسمبريد إلكترونيرسالة