Add WhatsApp Share Button in Blogger Blog [Custom]

0
2824
WhatsApp crossed 700 million users all over the world, if you are a blogger then you definitely know how hard to get traffic to your blog, so over 700M users and 30 Billion messages per day WhatsApp becomes the number one messaging app, so with this in mind you can use WhatsApp to promote your blog posts to your friends or group.

whatsapp share button for blogger


Infographic: WhatsApp Closing In On A Billion Users | Statista

The above infographic shows the importance of WhatsApp to promote your blog posts, so if your website not having the WhatsApp share button then this is the right time to update your templates.

How To

1. Goto Blogger > Template > Edit Html
2. Find where you want to place the WhatsApp share button
In default all share buttons placed after the post body section, The easiest way to find this in our template code is search for names that are displayed in the share buttons.

share button for blogger


In the above screenshot you can see all the share buttons after the post body, so we want to add our WhatsApp share button here. Each button have a text “share” , so search for this text in our template code.

whatsapp share button CODE for blogger


Here you can see each share button is placed in unordered list items, so after the pinterest share button lets add a new list item,
<li>
–WhatsApp Share Code–
</li>

whatsapp share button CODE for blogger


This is where we want to add our WhatsApp Share Code.
3. Copy the below code and paste inside the list item code

<a class=’whatsapp‘ expr:href=’&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + data:post.url’ onclick=’window.parent.null’ rel=’nofollow’ target=’_top’ title=’Share to whatsapp’><i class=’fa fa-whatsapp‘/><span>Share</span></a>

The WhatsApp share button is only useful in mobile view, so we want to hide the button in desktop view, so here is the final code.

<b:if cond=’data:blog.isMobileRequest == &quot;true&quot;’>
<a class=’whatsapp‘ expr:href=’&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + data:post.url’ onclick=’window.parent.null’ rel=’nofollow’ target=’_top’ title=’Share to whatsapp’><i class=’fa fa-whatsapp‘/><span>Share</span></a>
</b:if>

whatsapp share button code for blogger

Change the following attributes

1. whatsapp : Specify a class that are used to style our WhatsApp share button

    Add the following CSS code after <b:skin><![CDATA[
    .whatsapp{background-color:#43d854}

2. fa fa-whatsapp : This is used to show whatsapp icon in share button
To enable this you need to add the Font Awesome references,
Paste the following code into the <head> section

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>

3. Share : The text that appeared in Button

LEAVE A REPLY

Please enter your comment!
Please enter your name here