I want to share how to
modify the amp-social-share be fixed amp-social-share with show hide and
animation with a button linkedin, pinterest, facebook, google + and twitter.
And now I'll add a share button WhatsApp.
Generally, a blog with HTML
AMP made for easy access to mobile users. While Whatsapp application widely
used by mobile users. Then share articles blog through the app Whatsapp is one
way to increase page views the blog of mobile users.
To that end, the blog owner
should provide social media sharing buttons for Whatsapp application is to
allow visitors to share articles mobile blog.
If you use blog AMP and want
to try using social amp with fixed share and animation show hide this, please
follow the steps below.
1.
First Steps Make sure your own blog AMP
both js below.
<script async='async'
custom-element='amp-social-share'
src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
<script async='async'
custom-element='amp-accordion'
src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>
2. Step Two . Add HTML code below
<b:includable id='share-tool'
var='post'>
<amp-accordion
class='shares'>
<section>
<h4 class='show-share'>
<div class='show-more
rotateIn'><i class='material-icons'></i></div>
<div class='show-less
rotateIn'><i class='material-icons'></i></div>
</h4>
<div
class='share-icon'>
<ul class='slideInUp'>
<li class='slideInUp1'>
<amp-social-share height='50' type='twitter' width='50'/></li>
<li class='slideInUp2'>
<amp-social-share height='50' type='gplus' width='50'/></li>
<li class='slideInUp3'>
<amp-social-share data-param-app_id='145634995501895' height='50' type='facebook'
width='50'/></li>
<li class='slideInUp4'>
<amp-social-share height='50' type='pinterest' width='50'/></li>
<li class='slideInUp5'>
<amp-social-share height='50' type='linkedin' width='50'/></li>
<b:if cond='data:blog.isMobileRequest
== "true"'>
<li class='slideInUp5
wa'>
<amp-social-share
data-share-endpoint='whatsapp://send' expr:data-param-text='"Ada yang
keren lho, nyesel kalo ga buka.. kunjungi: " + data:blog.url'
layout='container' type='whatsapp'>
<amp-img alt='Share via
Whatsapp' height='35' layout='fixed'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7LPdezcaP-NHVRPKWODZnrPxng1ZhgB1GHavB8d9ryxDRGQEIIUVYFqwumLDNrG_gJBagCc3vZ1j3dCvuJ_3QQMjUEEpN7zCm0Mr-Sga9c3KQ2Ak8wITFgwQBggik1ds-wuMa21o1aFP/s1600/wa.png'
width='35'/>
</amp-social-share>
</li>
</b:if>
</ul>
</div>
</section>
</amp-accordion>
<div class='clear'/>
</b:includable>
And save it under the code </ b:
includable> in the following code
<b:includable
id='postQuickEdit' var='post'>
...............
...............
...............
</b:includable>
3.Third
Step. Save the code below
<b:if cond='data:blog.pageType
== "item"'>
<b:include data='post'
name='share-tool'/>
</b:if>
Under the posting or under
like or similar code as below.
<b:if
cond='data:blog.pageType == "item" or data:blog.pageType ==
"static_page"'>
<data:post.body/>
</b:if>
<div class='clear'/> <!-- clear
for photos floats -->
</div>
4. Step Four. Please save the CSS code
below in style amp-custom to post (either desktop or mobile if separated).
amp-accordion.shares{position:fixed;bottom:70px;right:30px;z-index:9999}
amp-social-share{border-radius:100%;box-shadow:
0 6px 12px rgba(0,0,0,.2);background-size:30px}
h4.show-share{background:none;border:none;margin:0;padding:20px}
.show-share
.show-less,.show-share
.show-more{color:#fff;font-size:24px;width:50px;height:50px;line-height:50px;padding:0;margin:0;text-align:center;border-radius:100%;background:#2196f3;border:none;box-shadow:
0
6px 12px
rgba(0,0,0,.2);position:fixed;bottom:30px;right:30px;z-index:10000}
amp-accordion.shares
section:not([expanded]) .show-less,amp-accordion.shares section[expanded]
.show-more{display:none}
amp-accordion.shares
ul,amp-accordion.shares li{list-style-type:none}
amp-accordion.shares
li{margin-bottom:5px}
amp-accordion.shares
li:last-child{margin-bottom:0}
amp-accordion.shares
.share-icon{padding:0;position:absolute;top:100%}
amp-accordion.shares li.wa
amp-social-share{background:#38bd4c;overflow:hidden;width:50px;height:50px;line-height:50px;text-align:center}
amp-accordion.shares li.wa
amp-social-share amp-img{vertical-align:middle}
.slideInUp1,.slideInUp2{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp1{animation-name:slideInUp;-webkit-animation-duration:3s;animation-duration:3s;animation-fill-mode:both}
.slideInUp2{animation-name:slideInUp;-webkit-animation-duration:2.5s;animation-duration:2.5s;animation-fill-mode:both}
.slideInUp3,.slideInUp4{-webkit-animation-name:slideInUp;-webkit-animation-fill-mode:both}
.slideInUp3{animation-name:slideInUp;-webkit-animation-duration:2s;animation-duration:2s;animation-fill-mode:both}
.slideInUp4{animation-name:slideInUp;-webkit-animation-duration:1.5s;animation-duration:1.5s;animation-fill-mode:both}
.slideInUp,.slideInUp5{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes
slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes
slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes
rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
@keyframes
rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}
5.
Fifth Step. Because no key is using the
material icon, so make sure you have installed fonts Material Icon.
<link
href='https://fonts.googleapis.com/css?family=Material+Icons' rel='stylesheet'
type='text/css'/>
Done ... good luck ....