Responsive AMP Social Sharing Button

I also share responsive AMP social sharing buttons for Blogger AMP HTML. Responsive AMP social sharing button is quite complete ie the share button for Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, and Email, Adding BBM and Whatsapp Here Tutorial.
If you want to try installing it yourself, please follow the steps below.

Please save the js amp-social-share code above </ head>

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

Then add this Css into your Template.

/* Social Share */ .sharethis{position:relative;margin:20px 0;padding:0;font-size:0} .sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left} .sharethis amp-social-share{vertical-align:middle} .sharethis .tw{background-color: #55acee;} .sharethis .gp{background-color: #dc4e41;} .sharethis .fb{background-color: #3b5998;} .sharethis .pi{background-color: #bd081c;} .sharethis .li{background-color: #0077b5;} .sharethis .wa{background-color: #25d366;} .sharethis .ta{background-color: #3c5a77;} .sharethis .sms{background-color: #ca2b63;} .sharethis .em{background-color: #000;}

Then Search this code:

<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

then save this code below </b:includable>

<b:includable id='share-tool' var='post'> <b:if cond='data:blog.pageType == "item"'> <div class='sharethis'> <div class='tw'> <amp-social-share height='20' type='twitter' width='20'/> </div> <div class='gp'> <amp-social-share height='25' type='gplus' width='25'/> </div> <div class='fb'> <amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/> </div> <div class='pi'> <amp-social-share expr:data-param-media='data:post.firstImageUrl' height='25' type='pinterest' width='25'/> </div> <div class='li'> <amp-social-share height='25' type='linkedin' width='25'/> </div> <div class='ta'> <amp-social-share height='20' type='tumblr' width='20'/> </div> <div class='wa'> <amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='"Check out this article: " + data:post.title + " - " + data:post.url' height='15' type='whatsapp' width='15'/> </div> <div class='sms'> <amp-social-share height='15' type='sms' width='15'/> </div> <div class='em'> <amp-social-share height='25' type='email' width='25'/> </div> <div class='clear'/> </div> </b:if> </b:includable>

Then please save the code below where you want to display the share button.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

So article about how to create responsive social sharing button on the amp / Responsive Amp Social Sharing Button, hopefully this article useful

Responsive AMP Social Sharing Button

0 Response to "Responsive AMP Social Sharing Button"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Artikel Terkait