Add Custom Social Media Share Buttons to Blogger Posts

Add Custom Social Media Share Buttons to Blogger Below Post Title too Post Footer

Social Media Platforms (sites) play a major role inwards overall success of our content because SEO takes fourth dimension to drive targeted traffic from search engines.

Not to mention, social signals (how many times your content has been shared on dissimilar social media sites) has an impact on your overall SEO inwards many ways.

So I am non going to write an show on Social Media strategy but, today I am going to portion about other version of Custom Horizontal Social Media Share Buttons for Blogger along alongside total shares count. You tin add together these buttons below the post service titles or inwards footer to growth the social shares of your good written content.

These social media buttons are made purely alongside the aid of HTML too CSS therefore they don’t touching on the Page charge fourth dimension speed at all.
Even past times removing the Official Social Media Share Buttons from your blog, you lot tin decrease your page charge fourth dimension past times one-half of the total time.

Features:-
1) Fully Responsive Design
2) Made alongside Pure CSS too HTML
3) Shares Counter
4) Integration of FontAwesome Icons
5) v Social Media Share Buttons Included
6) Super Easy to Install (Copy too Paste)

Responsiveness: Check out the below Screenshot which shows the Responsiveness of these social media portion buttons on dissimilar enshroud resolutions inwards 1 go.

Responsive Social Media Share Buttons for Blogger

Live Demo: If you lot desire to encounter the live demo too therefore simply scroll downward to the post service footer too lookout adult man these buttons live.

Important Update too read Carefully:-
I usage Free hosting provided past times OpenShift.com for hosting PHP scripts which are liable to larn the shares count of all the social media sites. There is monthly bandwidth boundary too shares count script volition halt working if boundary is crossed.

You tin upload these PHP scripts yourself if you lot lead maintain premium hosting or else you lot tin usage OpenShift.com to larn gratis hosting. Free hosting is plenty for 1 blog.

If you lot can’t make out it yourself too therefore you lot tin hire me. I’ll upload these scripts for you lot too become far working without whatever issue.

Get PHP Scripts Here = https://github.com/abeMedia/shareCount

How to Add Custom Social Media Buttons to Blogger Posts

Step 1) As usual, login to your blogger concern human relationship > Select your blog > become to Template section > click on Edit HTML too allow the Template Editor load. Do non forget to salve template backup earlier altering anything, live on safe.
Step 2) As you lot know that nosotros are using FontAwesome icons for it therefore you lot involve to install them inwards your weblog starting fourth dimension otherwise icons would non appear. So respect out this opening <head> tag (click within template editor too press Ctrl+F on windows or Cmd+F on Mac to opened upward up a search box within template editor) too simply below that, glue the FontAwesome icons link given below (only if you’re already non using them on your blog, avoid adding same codes twice).

<link href=’http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css’ rel=’stylesheet’/>

You also involve to add together Google JavaScript Libraries link to brand the shares count API work. So add together the link given below if you’re already non using (rare case, delight banking company agree earlier adding).

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’ type=’text/javascript’/>

Step 3) So straight off you lot involve to add together the CSS code to your template therefore simply respect out this closing </head> tag too simply earlier this tag, glue the whole CSS code given below equally it is.
CSS code:-

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=’text/css’>
/*————————————————————
Horizontal Social Media Share Buttons for Blogger
Designed by:: http://www.TwistBlogger.com
Shares Count Code by:: http://donreach.com/social-share-count
issued nether GNU GPL Licence
Icons:: FontAwesome
******** Do Not Remove These Credits ********
————————————————————*/
.tbn_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.tbn_horizontal_sharebar .Share_buttons {
 display: block;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.tbn_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.tbn_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px company rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px company rgba(0,0,0,0.05);
}
/*–Facebook—*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb {
    background: #3a579a;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover {
    background: #314a83;
}
/*–Tweeter—*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr {
    background: #00abf0;
}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover {
    background: #0092cc;
}
/*–Google Plus—*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus {
    background: #df4a32;
}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover {
    background: #be3f2b;
}
/*–Pinterest—*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    background: #cd1c1f;
}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
    background: #ae181a;
}
/*–linkedin—*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
    background: #2554BF;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
    background: #224EB4;
}
/*—Total Share—-*/
.tbn_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px company #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media solely enshroud too (max-width: 979px) {
 .tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
  width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
 {
 display: none !important;
}
}
 @media solely enshroud too (max-width:768px) {
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    width: 30px;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media solely enshroud too (max-width:479px) {
 .tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px company rgba(0, 0, 0, 0.14);
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if>

Now you lot are done alongside adding CSS component subdivision therefore moving on to side past times side step.

Step 4)  Now you lot involve to add together the HTML component subdivision to your template. Below I am going to furnish both the ways to add these buttons either below posts titles or inwards the post service footer therefore delight carefully read the steps too follow accordingly (needs non to mention, I am ever at that spot to aid your out if anything goes wrong).

Add Social Media Buttons Below Post Titles
Find out this HTML code line <div class='post-header-line-1'/> inwards your template too simply below that, glue the whole HTML component subdivision equally it is. You may respect the higher upward code trouble twice therefore inwards that case, simply glue the code later the minute appearance of the higher upward code line.

Add Social Media Buttons to Post Footer
Find out this HTML code line <div class='post-footer'> too simply below that code line, glue the whole HTML code equally it is.
If you lot did non respect the higher upward code trouble too therefore endeavor finding <div class='post-footer-line post-footer-line-1'> too glue the HTML simply below it. Again if the code trouble appears to a greater extent than than 1 fourth dimension too therefore glue the HTML later minute appearance.

Important Note:- If you’re using my previous Floating Social Media Share Buttons Bar For Blogger then delight it is my humble asking non to usage the same JavaScript code of Shares Count API.
Just delete the JavaScript API code too solely usage the HTML component subdivision because the previous JavaScript code volition piece of employment fine alongside it. If you lot did non larn it too therefore delight allow me know.
JavaScript Code is highlighted inwards cherry color text.

HTML code:-

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $(“link[rel=canonical]”).attr(“href”);
    $.getJSON(‘https://count.donreach.com/?url=’ + encodeURIComponent(shareUrl) + “&callback=?”, component subdivision (data) {
        shares = data.shares;
        $(“.count”).each(function (index, el) {
            service = $(el).parents(“.share-btn”).attr(“data-service”);
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + “M”;
                else count = count + “k”;
            }
            $(el).html(count);
        });
    });
});
//]]></script>

<div class=’tbn_horizontal_sharebar’>
<div class=’Share_buttons’>
  <ul>
  <li class=’share’>
    <div class=’share-btn’ data-service=’total’>
        <div class=’count h4′></div>
        <div class=’share h6′>SHARES</div>
  </div>
  </li>
  <li class=’btn_fb’><a expr:href=’&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title’ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   render false;’ rel=’nofollow’>
<div class=”wrap1″><i class=”fa fa-facebook”></i> </div>
  <div class=”wrap”>Share</div>
  <div class=’share-btn’ data-service=’facebook’>
        <div class=’count’/></div>
  </a>
  </li>
  <li class=’btn_twtr’><a expr:href=’&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @TwistBlogger – &quot;’ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   render false;’ rel=’nofollow’>
  <div class=”wrap1″><i class=’fa fa-twitter’></i></div>
  <div class=”wrap”>Tweet</div>
  <div class=’share-btn’ data-service=’twitter’>
        <div class=’count’/></div>
  </a>
  </li>
  <li class=’btn_gplus’><a expr:href=’&quot;http://plus.google.com/share?url=&quot; + data:blog.url’ onclick=’javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   render false;   ‘ rel=’nofollow’>
  <div class=”wrap1″><i class=’fa fa-google-plus’></i></div>
  <div class=”wrap”>Share</div>
  <div class=’share-btn’ data-service=’google’>
        <div class=’count’/></div>
  </a>
  </li>
  <li class=’btn_pntrst’><a data-pin-config=’beside’ expr:href=’&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title’ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   render false;’ rel=’nofollow’>
  <div class=”wrap1″><i class=’fa fa-pinterest’></i></div>
  <div class=”wrap”>Pin</div>
  <div class=’share-btn’ data-service=’pinterest’>
        <div class=’count’/></div>
  </a>
  </li>
  <li class=’btn_linkdin’><a expr:href=’&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ‘ onclick=’window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   render false;’ rel=’nofollow’>
  <div class=”wrap1″><i class=’fa fa-linkedin’></i></div>
  <div class=”wrap”>Share</div>
  <div class=’share-btn’ data-service=’linkedin’>
        <div class=’count’/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if>

Editing Part:- All you lot involve to edit inwards the higher upward HTML component subdivision is my twitter username  @TwistBlogger so simply supercede it alongside your ain Twitter username too you’re skilful to go. Now simply salve your template code too take in whatever of your weblog post service to encounter it live.

If it did non seem on your weblog fifty-fifty later next all the steps correctly too therefore delight allow me know, I’ll personally aid you lot out for sure.

Also delight allow me know your feedback on the pattern too responsiveness. Does it piece of employment correctly? Appearing same equally on this blog? Your feedback volition aid me to become far amend if at that spot are whatever bugs.

So this is all inwards this article too I promise you lot guys lead maintain liked it. If you lot liked it too therefore certainly your buddies would also similar it if they using blogger platform. Let them know past times sharing it on at to the lowest degree 1 social site you lot actively use. 🙂

Thanks too remain blessed!