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.
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>
Open the Blogger dashboard, then select Themes - Edit HTML. Then paste the script below before </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>
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 == "item"'>
<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 :)