Skip to main content

How To Add Custom Social Sharing Buttons To Website

Social share buttons are the most powerful way to boost website traffic and visitors from social media sites. There are many plugins available on internet now a days.  Among them Addthis, Sharethis and AddToAny are most popular. Read also : How to protect your computer from WannaCry ransomware virus.

Although, there are plugins available, many website owners do not use such type of plugins instead they use social sharing button code in their template. In this post, I will show you how to add custom social sharing buttons code which you just need to put in your own template. Read also How to setup AdSense Page Level Ads.

Step 1. At first you need to login to your blogger account.

Step 2. After that you need to click Template and then click Edit Template.

Step 3. Now click anywhere inside the code and press Ctl + F to get search box so that you search some codes. After that search the below codes.

#navbar {
display: none! important;

Once you have got the code, paste the below codes just below the above codes. Read How to fix mixed content errors from your blog.

.pbtsharethisbutt {
    overflow: hidden;
    padding: 10px 0 4px;
    margin: 0;

.pbtsharethisbutt ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;

.pbtsharethisbutt ul li {
    float: left;
    margin: 0;
    padding: 0;

.pbtsharethisbutt ul li a {
    padding: 0 10px;
    display: inline-block;

.pbtsharethisbutt ul li a:hover {

Step 4. After that you need to search <span class='post-timestamp'> and once you have got it just paste the below codes for Google+, Facebook, Twitter, LinkedIn, StumbleUpon and Digg just above  this code. Read also : How to find AdSense high paying long tail keywords.

Google+ Share Button Code

<li class='pbtgoogle'><a expr:href='&quot;; + data:post.url' onclick=',   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank' title='Share this on Google+'><i class='fa fa-google-plus-square'/>&amp;nbsp;Google+</a></li>

Facebook Share Button Code

<li class='pbtfacebook'><a expr:href='&quot;;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick=',&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'><i class='fa fa-facebook-square'/>&amp;nbsp;Facebook</a></li>

Twitter Share Button Code

<li class='pbttwitter'><a expr:href='&quot;; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><i class='fa fa-twitter-square'/>&amp;nbsp;Twitter</a></li>

LinkedIn Share Button Code

<li class='pbtlinkedin'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Linkedin!'><i class='fa fa-linkedin'/>&amp;nbsp;Linkedin</a></li> Read also : How to make Money Online from Home.

StumbleUpon Share Button Code

<li class='pbtstumbleupon'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble upon something good? Share it on StumbleUpon'><i class='fa fa-stumbleupon-circle'/>&amp;nbsp;Stumble</a></li>

Tumblr Share Button Code

<li class='pbttumblr'><a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tumble This!'><i class='fa fa-tumblr'/>&amp;nbsp;Tumblr</a></li>

Pinterest Share Button Code

<li class='pbtpinterest'><a class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;;+Math.random()*99999999);document.body.appendChild(e)%7D)());' title='Pin It'><i class='fa fa-pinterest'/>&amp;nbsp;Pinterest</a></li>

Digg Share Button Code

<li class='pbtdigg'><a expr:href='&quot;;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg this!'><i class='fa fa-digg'/>&amp;nbsp;Digg</a></li>

Share To Anywhere Code

<script src='' type='text/javascript'/> <br/><a class='a2a_dd' href=''>Share To Anywhere</a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='' type='text/javascript'></script>