Blogger

[Updated] Add Custom Social Share Buttons with WhatsApp Sharing in Blogger Blogs

This is a tutorial post about how you can add a better sharing button than default Blogger’s share in the mobile version of Blog. One benefit of using the custom share button on your mobile version of the blog is that it looks beautiful and it will increase your blog respect for other users because they might haven’t seen the mobile share button on any other Blogspot blog. This is an updated version of the social sharing button which includes WhatsApp sharing also.
Here is a snapshot of the buttons and you can also see a preview by opening this link or visit any post of Techno Geek Zone.
There is a separate need of the WhatsApp Sharing Code for the mobile view because of its structured API which is different for WA web and mobile. For adding this custom social share button with WhatsApp sharing follow this post: [Updated] Add Custom Social Share Buttons with WhatsApp Sharing in Blogger (Mobile View)

So here are the steps to be followed:

There are two main steps 1st is to add CSS and 2nd step to add the code.

1: Adding CSS Code

Open your blogger dashboard and move to Template> Edit HTML> 1 click anywhere in template
Press ctrl+f to open search box and search for following code: ]]></b:skin>  and paste the below code above the ]]></b:skin>

#share-this{overflow:hidden;margin:20px auto 0 auto;line-height:1.4em;display:table;text-align:center}
#share-this h4{position:relative;overflow:hidden;margin:0 0 10px;letter-spacing:1px;font-size:120%;font-weight:700;padding:0 8px;text-align:center;transition:all 0.5s ease-out}
#share-this h4:before,#share-this h4:after{position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:&#39;a0&#39;;background-color:#ddd}
#share-this h4:before{margin-left:-50%;text-align:right;}
#share-this span{position:relative;display:inline-block;padding:0 10px;margin:auto;}
#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}
#share-this a.this-fb{background:#395796;}
#share-this a.this-tw{background:#4cb0ea;}
#share-this a.this-pi{background:#de3425;text-align:center;overflow:hidden}#share-this a.this-pi i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-li{background:#316dce;text-align:center;overflow:hidden}#share-this a.this-li i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-wa{background:#3d9610;text-align:center;overflow:hidden}#share-this a.this-wa i{width:22px; height:18px;text-align:center;padding:0}
#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-wa:hover,#share-this a.this-li:hover,#share-this a.this-pi:hover {opacity:.9}#share-this i{background-size: contain;display:inline-block;margin:-3px 0px 0 0}
.this-fb i{background:url(https://1.bp.blogspot.com/-FXuxNLq0-pE/Xq7_-BY6cjI/AAAAAAAAHfs/plEbUYlXSwMnhQbc3sDb-1J0bnNRjbViwCLcBGAsYHQ/s1600/fb.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-tw i{background:url(https://1.bp.blogspot.com/-c1kA9WTLeVo/Xq7_-h4ZK0I/AAAAAAAAHf4/DgT1uy0WBywM3pq9Y5FMp1zkILT5H3iQwCLcBGAsYHQ/s1600/tw.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-li i{background:url(https://1.bp.blogspot.com/-mrNWuYwN4k4/Xq7_-PXwGTI/AAAAAAAAHfw/BAUHwSAZKgIfJkLqIx2NAkxPhS7dBeZzwCLcBGAsYHQ/s1600/lin.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-pi i{background:url(https://1.bp.blogspot.com/–t7TpHohk7Y/Xq7_-SBzQLI/AAAAAAAAHf0/11Iy305XT_EjxrHxgUWWBA6s_ByEXprJwCLcBGAsYHQ/s1600/pi.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-wa i{background:url(https://1.bp.blogspot.com/-CjXHJTWxnlQ/Xq7_-26ObvI/AAAAAAAAHf8/gfi7xCKeGrQSgfB3YUtJEmjjlq-NMPDQwCLcBGAsYHQ/s1600/wa.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}

2: Adding the main Code 

Search again for the give below code(you will find many in your template)

Advertisements

<div class=’post-footer’>

you will find many codes but you have to stop at the 2nd one. Paste the below given code above the 2nd  <div class=’post-footer’> and Save the Template.

<b:if cond=’data:blog.pageType == &quot;item&quot;’><div class=’shr-btn-scl’>
<div align=’center’>
<div id=’share-this’>
<h4><span>Share this Post Via:</span></h4>
  <a class=’this-fb’ expr:href=’&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url’ onclick=’window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;’ rel=’nofollow’ target=’_blank’ title=’Facebook’><i class=’fb-1’/>Facebook</a>
  <a class=’this-tw’ expr:href=’&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;’ onclick=’window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;’ rel=’nofollow’ target=’_blank’ title=’Twitter’><i class=’tw-2’/>Twitter</a>
<a class=’this-pi’ expr:href=’&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title’ onclick=’window.open(this.href, &apos;windowName&apos;, &apos;width=735, height=750, left=24, top=24, scrollbars, resizable&apos;); return false;’ rel=’nofollow’ target=’_blank’ title=’Pinterest’><i class=’gp-2’/>Pinterest</a>
  <a class=’this-li’ expr:href=’&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url’ onclick=’window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;’ rel=’nofollow’ target=’_blank’ title=’LinkedIn’><i class=’tw-2’/>LinkedIn</a>
  <a class=’this-wa’ expr:href=’&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url’ onclick=’window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;’ rel=’nofollow’ target=’_blank’ title=’Whatsapp’><i class=’tw-2’/>Whatsapp</a>  </div></div></div>  </b:if>


Now You are done!!! Enjoy blogging if there is any problem then you can ask in comments. 

Article written by:

Satyendra is a Biotechnologist from the city of Nawabs, Lucknow. Apart from blogging, his other interests are Indian rap knowledge, affiliate marketing, poetry, and basically anything nerdy.

Join the discussion

  1. Frog

    This is great tutorial. But I have one question. How can I make it to be visible not only in post, but in general view bellow all of posts like by original buttons? Thank you for reply:)

  2. Satyendra Maurya

    Glad to listen from you! I have updated the post with new CSS and code.

  3. Rob

    the social icons dont show in my post list. It only shows when I open the posts one by one. Kindly help 😀

  4. Din BD

    Many Many Thanks… It Worked

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top