How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View.guess you would like to add a simple stylish facebook, twitter, google plus, whatsapp share button on your blogger blog, especially below your blogger blog post on mobile view.most of us most have seen share button on their blogger blog, especially the desktop version but still wonders why it doesn't display on their blogger mobile template.well, this is because the mobile template is a separate design from the desktop view.
blogger made their mobile template to display only contents that is being posted on your site, leaving their default elements to display on the mobile view. other elements you added to the desktop version of your site will not appear on your mobile template.with this, it prevents you from tweaking your desktop view to enable the design to appear on the mobile template. this is why you may see a share button on your desktop view but won't find it on your blogger mobile view but their is a way you can tweak the mobile template to display social media share button of your choice.the mobile template has its own mobile elements and tags that enables you to tweak it.in this post i will share with you on
How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View
just follow the steps below to get it done.
You May Like To Read
How To Add Stylish Social Media Share Button On Your Blogger Blog
How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View
==> Login to your blogger dashboard and go to the site you wish to add the code
from your dashboard, scroll down and Click On
Template=Edit HTML
the template html code will be displayed.search for this code in the template using Ctrl F.
</head>
just above the head tag, add this code
<style type='text/css'> /*** Share Post Styling ***/ #share-buttons{margin:0 0 8px;padding:0;overflow:hidden;text-transform:uppercase;font-size:12px} #share-buttons p{font-size:100%;float:left;background:#1abc9c;display:block;padding:2px 10px;margin:2px;color:#fff} #share-buttons a{position:relative;float:left;display:block;color:#fafafa;padding:2px 10px;margin:2px} #share-buttons a:hover{background:#626e7c!important} </style>
if you have already added this code before on your template from the previous tutorial, then no need to add it
after adding it, now find this code below
<b:if
cond='data:top.showMobileShare'>
==> find the ending div tag. there are three div tag seen on the image below
insert this share button below/after the Ending </div>
<div id="share-buttons">
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&via=HANDLERNAME&text=" + data:post.title' title='Twitter' rel='nofollow' style='background:#00aced;' target='_blank'>Twitter</a><a class='plus' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' style='background:#dd4b39;' target='_blank' title='Google+'>Google+</a><a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + "%20" + data:post.url' rel='nofollow' style='background:#4dc247;' target='_blank' title='Whatsapp'>WhatsApp</a>
</div>
after adding it, save your template.
note: at the twitter share button, the spot that is marked red should be replaced with your twitter username.
also, note: Always backup your template before making any changes
visit
www.gurubest.com to view the latest post update you are not seeing right now.
more articles update is posted on
gurubest every day,so don't be the last to get update to your email.
Subscribe by email
DON'T FORGET TO SHARE WITH YOUR FRIENDS ON FACEBOOK BY CLICKING THE SHARE BUTTON.
Get Your Own Blog/Website Like Mine
Nice stylish and light share button,worked perfect well on my blog itrend247.com.ng
ReplyDeletePls, Admin i did not see whatsapp icon there... pls help me on what to do
ReplyDeleteif its inserted correctly in the proper line, it should appear on your blog. please cross check the code again.
Deletethank u
ReplyDeleteHello, please help me. I am finding it difficult o register for Google adsense. My problem is in the signing up. After the "your account must have been ticked good.'Your website" part will be steady without any thing for hours. please, is that normal? What should i do? www.envinews.space
ReplyDeleteprobably your network is not strong enough. try and use a better data network provider.
DeletePlease, how did you go about incorporating whatsapp share button on this blog?
ReplyDeletemeanwhile, this tutorial only works when the mobile blog view is active, right?
yes this particular tutorial is for mobile view. if its active, you can add it.
DeleteIf there is a different tutorial for this whatsapp share button to be displayed on desktop view, please, let me know...
ReplyDeleteyes there is. i have already linked the tutorial in this post
DeleteGood afternoon Sir, Please how can I place the ad code on a live page of my website, as a requirement for Adsense approval? I believe I have done all the necessary things required of me to get Adsence approval. You can also check my site, www.eagleonwatch.blogspot.com thanks
ReplyDeletei will advice you to get a custom domain name and then apply directly for adsense because you can't use .blogspot version of your blog to apply directly. you can only apply from blogger dashboard if you are eligible since you are still using .blogspot subdomain
Deletethis cool..
ReplyDelete