How to add a new and 100% working WhatsApp share button in blogspot blog - Today we are going to introduce you with a new share button which will help you to share your blog articles. WhatsApp is a new social media app like - Facebook, twitter etc. But comparing to others I'm damn sure that you use it very frequently and check your messages on WhatsApp 40-60 times in a day.
WhatsApp allow your visitors to share your blog articles directly to WhatsApp. It will be easy and enough for people to just click the WhatsApp button, if they found one under your post to share the post.
For those who want to try this share button, simply follow the below simple steps.
How to install WhatsApp share button?
At the first, visit to the blogger dashboard - Visit
Now goto the "Template" section and then click on the "Edit html" button.
In the template editor press and hold the "Ctrl+F" key at the same time.
Find the ]]></b:skin> tag.
Copy the below CSS code and paste it just before ]]></b:skin>.
.whatsapp a:hover{background:linear-gradient(#01A507,#069A00)}
.whatsapp i{color:#038F02;background:#FFF;text-shadow:none;font-weight:900;border-radius:2px;position:relative;left:-3px;margin-right:-4px;padding:2px;-webkit-font-smoothing:antialiased}
.whatsapp a{font-family:sans-serif;font-weight:700;text-decoration:none;font-size:11px;color:#FFF;padding:7px;background:linear-gradient(#009805,#058400);padding-top:4px;border-radius:2px;padding-bottom:5px;text-shadow:1px 1px 2px #797272}
Now, find <data:post.body/> and below it, paste the following code!
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='whatsapp'>
<script type='text/javascript'>if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/051306102211/bloggerguider.js";h.appendChild(s)};</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='/* display:none */'>
<i class='fa fa-whatsapp'>
</i>
Share
</a>
</div>
</b:if>
After that, save your template and you're done.
Important?
If the button doesn't show up, just find another <data:post.body/> tag and try placing it below it. You would probably find three of them. So try with each one!
Font Awesome Icons CSS is required to allow WhatsApp button to show that WhatsApp icon.
After adding the button, you will only see the button if you're on mobile device. if you want to see it on desktop, just add ?m=1 after any post URL.
That's it! I hope you like this widget! Stay tuned for cool widgets! Thanks for reading +Prince Chaudhri
0 Comment to "Working WhatsApp Share Plugin For Blogger"
Post a Comment