Are you on whatsapp?? I'm sure you are, I am too and so are other millions of people out there. How many times do you check your messages daily? Atleast, 50 to 100 times right. Now imagine having a whatsapp share button below blog post that will enable your readers to share your blog articles to their friends, families and millions of whatsapp users straight from your blog in just one click..
How to install a whatsapp share button is a very popular searched topic, you might have heard of it before and thats why you are reading this now. Many blogs published how to add whatsapp sharing buttons on blogger but almost all don't seem to be working and some place whatsapp share link in a text like Share On Whatsapp, others get whatsapp share button up and running but with the help of third parties like Sumo, Addthis etc. Which might end up slowing down your blog and decreases your PageSpeed score which might leads to bad user experience, but there are more ways to make it more eye catchy and attractive. So we going to Style whatsapp share button with using pure Css, html and icons from fontawesome.
Previously i published a post on how to add a fancy social sharing buttons with whatsapp share button, but it seems like many already have sharing widgets on their blog and i have been receiving lots of queries on how to add only whatsapp sharing button on blogger blog. So lets get to it. Today, I will be sharing a full tutorial on how to add a whatsapp sharing button in blogspot /blogspot blogs with pure css and html.
Others are reading : Make Every Blogpost Have Facebook Like Button
How to Add Whatsapp Sharing Button on BloggerI guess you already have a social share button widget on your site and you only need whatsapp share button added to it. This whatsapp share button is configured to copy the shape of your previous share buttons but with a different color. So this button will fit to your blog without having any awkward shape or look.
If you don't have any social share button widgets before then read steps to add a social share button with whatsapp share button on your blogger blog.
You can also see this button live in my post footer
STEP 1: Adding FontawesomeThe social sharing widget buttons are configured to work with fontawesome because the social media icons are taken from fontawesome and later styled with css.
Now let's firstly install fontawesome on our blog;
NOTE: if you already have fontawesome installed on your blog, skip this step.
- Firstly, backup your blogger template before editing to be on the saver side if something goes wrong.
- Login to your blogger dashboard Template>>
- In the template codes search for
<head>tag and paste the below stylesheet code below it.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
STEP 2: Adding CSS Styles
- Login to your blogger dashboard >>Template Edit Html
- In the html codes search for
]]></b:skin>and paste the below CSS codes just above it.
Now you have successfully added the css styles of our whatsapp social share button. Now let's add the html.
Others are reading: How To Add Disqus Comment Box To Blogspot
STEP 3: Adding HTMLThis section needs a little coding knowledge, sharp brain and common sense.
- Goto your Blogger dashboard>>Template >>Edit Html
- In your Template codes, look thoroughly and search for the html of your current social share button you want to add whatsapp share to. You are likely to find this below
- Now place the below html code with the other share buttons before the closing </div> tag.
Below is an image example....
<whatsapp expr:href='data:post.url' expr:text='data:post.title'/> <a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/></a>
Locate other share buttons codes
Add whatsapp share button code to them