Great News! Try our new tool to convert img to amp-img. Try Now!

Thursday, September 19, 2019

Create Social Sharing Button for AMP Blogger + Customize Button

How to Create Social Sharing Button for Blogger with AMP. Tutorial script and CSS amp-social-share

How to Create Social Sharing Button for Blogger with AMP

Social Sharing Button as Promotion

The Social Share Button is an important element of a website page. By adding a Share Button, a web allows our website visitors to share articles or web content to social media.

By sharing it with their social media accounts, it's the same as they do a promotion. This is certainly very profitable for our business.

To add a Share Button, we need to add some special scripts to the <body> tag. There are several third-party tools that can be easily utilized, such as AddThis, ShareThis, AddtoAny, and others.

But, not all can be implemented on an AMP HTML-based web page, except AddThis. Because, to use the tool, you must plant a third-party JavaScript in your web template. This will make the AMP page invalid.

But actually, AMP Project itself has prepared a script called <amp-social-share> which we can use to add Social Share Button on AMP pages, including Blogger.

Add Social Share Button with <amp-social-share>

To add a Share Button to the AMP-based web is very easy. Simply add the <amp-social-share> script to the <head> tag, and call it in <body>.
I will explain the tutorial for placement on AMP Blogger. So follow the steps below.

Open the Blogger dashboard, then select Themes - Edit HTML. Then paste the script below before </head>

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

Next, we will put the <amp-social-share> tag at the end of the article. Search for <b: includable id='share-tool' var='post'> (If it doesn't already exist, activate the widget first), then paste this code directly below:
<div>
    <amp-social-share data-param-app_id='1234567890' expr:data-param-quote='data:post.title' height='36' type='facebook' width='36'/>
    <amp-social-share expr:data-param-text='data:post.title + " via @username"' height='36' type='twitter' width='36'/>
    <amp-social-share expr:data-param-media='data:blog.postThumbnailUrl' height='36' type='pinterest' width='36'/>
    <amp-social-share height='36' media='(max-width: 640px)' type='whatsapp' width='36'/>
    <amp-social-share expr:data-param-text='data:post.title + "  - Read Me"' height='36' media='(max-width: 640px)' type='line' width='36'/>
  </div>

Note:
  • Change 1234567890 with your facebook account app_id.
  • and @username with your Twitter username.
  • The code above will only display Facebook, Twitter, Pinterest, WhatsApp and Line Messenger buttons. Comment below to get other social shares.
Put code below before the </article> or the last DIV before the article. (Each template will be different)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='amp-social-button'/> 
  </b:if>

Click SAVE for end of process.

Customize the Icon

To change the appearance of all the social icons below to round, add this CSS to <amp-custom>
amp-social-share.rounded {border-radius: 50%;background-size: 60%;}

Then add class="rounded" on each tag <amp-social-share. . ., so it will be:
 <amp-social-share class="rounded" data-param-app_id='1234567890' expr:data-param-quote='data:post.title' height='36' type='facebook' width='36'/>

To change color of all icons, copy the following CSS.

amp-social-share.colored{background:blue}

So if you want the icon to be round and blue, write the code like below:
 <amp-social-share class="rounded colored" data-param-app_id='1234567890' expr:data-param-quote='data:post.title' height='36' type='facebook' width='36'/>

Native Share Dialog


This type of system will display a sharing UI if the user views AMP documents using Chrome on Android. (view image)

Add following code:
<amp-social-share type="system"></amp-social-share>

That's all the article about Complete Tutorial Adding a Share Button on AMP Blogspot. Adding a social share amp is very important to do you know!

May be useful :)