Skip to main content
FANCYBLOGGERTRICKS

follow us

Add Whatsapp Share Button To Blogger With Pure CSS



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 Blogger

I 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.

LIVE PREVIEW

You can also see this button live in my post footer

STEP 1: Adding Fontawesome

The 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>>Edit Html
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.
.wat-art{background:#25d266;}
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 HTML

This 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 <data:post.body/>.
- Now place the below html code with the other share buttons before the closing </div> tag.

<whatsapp expr:href='data:post.url' expr:text='data:post.title'/> <a class='wat-art' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/></a>
Below is an image example....

Locate other share buttons codes

Add whatsapp share button code to them


From Authors Desk 

I hope you successfully install whatsapp share button on blogger blog? If you have any problem making setting this up, kindly inform me through the comment section and you will be attended to in a jiffy. I will be sharing many more stylish share buttons with whatsapp share button, but till then I say ADDIO (Goodbye in Italy) 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment