Add WhatsApp Button On AMP Social Share Show Hide
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/AVvXsEiHTz3omM7Yt6IEXNpqJRj3xWnx-fmDfnQ8uXdW1NSbv8ClV9BH0wkPZKha5kjZrwhFcdUBQXTC_k3tkGW264nUrF-onaovDwPwviKp59ygBy5Ny1WNF9k49mjlbmIXbfzulOmrmx2vLfNm/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 ....
0 Response to "Add WhatsApp Button On AMP Social Share Show Hide"
Post a Comment