How to Add Social Media Follow Us Buttons to Blogger Sidebar

Share:
Adding follow us or connect us social media buttons to your blog is a “must do” stuff, that every blogger should adapt to their blog or website.


add social media icon buttons blogger sidebar

If you are new to blogging and looking for tools to grow your social media reach and followers, then you can use it as a social media marketing strategy to grow your blog.




In the last 5 years analysis, social media was the 2nd largest source to gain a high amount of visitor/ readers/ followers to your blog, which comes after organic traffic and the best part about this is, it’s totally free of cost.


Why use follow us buttons?

As I told you above, there as many benefits of using it on your site. Below are some quick pros that you should know before applying it to your blog.
  • Increase your followers/fans in a more faster way.
  • Gain referral traffic/audience to your blog posts.
  • Create Facebook pages and grow your brand.
  • Gain trust and create engagement between you & your readers.
  • Turn your first-time visitors to a lifetime subscriber.

You'll get more benefits after implementing it to your blogger site.


Ways to add follow us social buttons?

There are mainly two ways by which you can install the social widget on your blog.

1. You can add custom JavaScript codes to HTML widget on your layout page.


2. You can use short scripts from another social media tool provider websites to show follow us buttons on your site. This method can be a little tricky, during the process you might need to change your template codes.



Adding Social Media icons using Custom JavaScript Codes

Copy the below codes and paste it on your layout page's HTML gadget. If you're confused? read the below post.

• Blogger Widgets: How to Add Html Codes in Blogger


Note: Before pasting the below codes to your blog, change the blue codes into your actual social media account URL.

1. Horizontal Social icons with names
 Horizontal Social icons
Horizontal Social media icons with names
<a href="your url goes here"><div class="fb-icon-bg"></div>
    <div class="fb-bg"></div>
  <a href="your url goes here">
  <div class="twi-icon-bg"></div>
    <div class="twi-bg"></div></a>
  <a href="your url goes here">  <div class="g-icon-bg"></div>
    <div class="g-bg"></div>
  </a>
<a href="your url goes here">
  <div class="lin-icon-bg"></div>
    <div class="lin-bg"></div>
  </a>
<style>
.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
 background: #354f88;
 height: 37px;
 margin: 0 0 -37px 0;
 width: 41px; 
}
.fb-icon-bg:after {
 content: "\f09a"; font-family: FontAwesome;
  display: block;
  padding: 9px 10px 5px 15px;
color:#fff;
}
.fb-bg {
 background: #3b5998;
 display: block;
 height: 37px;
 margin: 0 0 10px 41px;
}
.fb-bg:after {
 color: #fff;
 content: "Follow Us on Facebook";
 height: 37px;
 left: 8%;
 position: relative;
 top: 22%;
 width: 41px; 
}
.fb-bg:hover{
  cursor: pointer;
}
.fb-bg:active{
  background: #354f88;
}
/* Twitter */
.twi-icon-bg:after {
 content: "\f099"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 11px;
color:#fff;
}
.twi-icon-bg {
 background: #40a2d1;
 height: 37px;
 margin: 0 0 -37px 0;
 width: 41px; 
}
.twi-bg {
 background: #45b0e3;
 height: 37px;
 margin: 0 0 10px 41px;
}
.twi-bg:after {
 color: #fff;
 content: "Follow Us on Twitter";
 height: 37px;
  left: 11%;
 position: relative;
 top: 22%;
  width: 41px; 
}
.twi-bg:hover {
  cursor: pointer;
}
.twi-bg:active {
  background: #40a2d1;
}
/* Google+ */
.g-icon-bg:after {
 content: "\f0d5"; font-family: FontAwesome;
  display: block;
  padding: 11px 10px 6px 13px;
color:#fff;
}
.g-icon-bg {
 background: #ce3e26;
 height: 37px;
 margin: 0 0 -37px 0;
 width: 41px; 
}
.g-bg {
 background: #de4c34;
 height: 37px;
     margin: 0 0 10px 41px;
}
.g-bg:after {
 color: #fff;
 content: "Follow Us on Google+";
 height: 37px;
 left: 10%;
 position: relative;
 top: 22%;
 width: 41px; 
}
.g-bg:hover {
  cursor: pointer;
}
.lin-icon-bg {
    background: #075e8c;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.lin-icon-bg:after {
    content: "\f0e1";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.lin-bg {
    background: #0077B5;
    height: 37px;
    margin: 0 0 10px 41px;
}
.lin-bg:after {
    color: #fff;
    content: "Follow Us on Linkedin";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
.ins-icon-bg {
    background: #ffc238;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.ins-icon-bg:after {
    content: "\f16d";
    font-family: FontAwesome;
    display: block;
    padding: 11px 10px 6px 13px;
    color: #fff;
}
.ins-bg {
    background: #ffd438;
    height: 37px;
    margin-left: 41px;
}
.ins-bg:after {
    color: #fff;
    content: "Follow us on Instagram";
    height: 37px;
    left: 10%;
    position: relative;
    top: 22%;
    width: 41px;
}
</style></a>
2. Square social icons with hover

social counting gadget
<style>

/* Social Counter

--------------------------------------*/
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}

#sidebar .widget {
margin-bottom: 35px;
}

a.social_item {
position: relative;
display: block;
height: 60px;
line-height: 60px;
overflow: hidden;
}

.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}

.social_icon {
float: left;
line-height: 60px;
width: 41px;
font-size: 1.3rem;
}

a.social_item.social_facebook {
background: #3F5B9B;
}

.fa-facebook.social_icon {
background: #2E4372;
}

li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}

li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}

a.social_item.social_twitter {
background: #1C97DE;
}

.fa-twitter.social_icon {
background: #1571A5;
}

li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}

li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}

a.social_item.social_youtube {
background: #E22020;
}

.fa-youtube.social_icon {
background: #B31919;
}

li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}

li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}

a.social_item.social_dribbble {
background: #E82159;
}

.fa-dribbble.social_icon {
background: #B51A45;
}

li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}

li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}

a.social_item.social_rss {
background: #E86321;
}

.fa-rss.social_icon {
background: #C2521B;
}

li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}

li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}

a.social_item.social_google-plus {
background: #E82C2C;
}

.fa-google-plus.social_icon {
background: #BF2424;
}

li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}

li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}

a.social_item.social_linkedin {
background: #0275B6;
}

.fa-linkedin.social_icon {
background: #02669E;
}

li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}

li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}

a.social_item.social_instagram {
background: #8E714D;
}

.fa-instagram.social_icon {
background: #6F583C;
}

li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}

li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}

a.social_item.social_pinterest {
background: #CA2027;
}

.fa-pinterest.social_icon {
background: #AB1B21;
}

li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}

li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}

ul.social-counter a {
color: #fff;

}

</style>

<div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">500,000</span>

</a></li><li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">500,000</span>

</a></li></ul></div>
3.Rounded social icons with hover

counts social share

<div class="social-counter">

      <a class="count facebook" href="https://www.facebook.com/#">
        <div class="icon"><i class="fa fa-facebook"></i></div>
        <p><span>Facebook</span></p>
        <p class="action-btn">Like</p>
      </a>

      <!-- TWITTER -->
      <a class="count twitter" href="https://twitter.com/#">
        <div class="icon"><i class="fa fa-twitter"></i></div>
        <p><span>Twitter</span></p>
        <p class="action-btn">Follow</p>
      </a>

      <!-- YOUTUBE -->
      <a class="count youtube" href="https://www.youtube.com/channel/#">
        <div class="icon"><i class="fa fa-youtube"></i></div>
        <p><span>YouTube</span></p>
        <p class="action-btn">Subscribe</p>
      </a>

      <!-- GOOGLE PLUS -->
      <a class="count google-plus" href="https://plus.google.com/#">
        <div class="icon"><i class="fa fa-google-plus"></i></div>
        <p><span>Google+</span></p>
        <p class="action-btn">+1</p>
      </a>

      <!-- LINKEDIN -->
      <a class="count linkedin" href="https://www.linkedin.com/#">
        <div class="icon"><i class="fa fa-linkedin"></i></div>
        <p><span>LinkedIn</span></p>
        <p class="action-btn">Follow</p>
      </a>

    </div>

<style>
.social-counter{
padding: 0;
display: block;
}

.count{
display: block;
padding: 7px 0;
text-align: left;
transition: all 0.5s ease;
}

.count:hover{
  background: rgba(0,0,0,0.033);
  transform: scale(1.065);
}

.count .icon{
  background: #aaa;
  display: inline-block;
  float: left;
  color: white;
  font-size: 22px;
  margin-left: 5px;
  text-align: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-shadow: 0 0 3px rgba(0,0,0,0.2);
  display: table;
}

.count .icon i{
  display: table-cell;
  vertical-align: middle;
}

.count p{
  display: inline-block;
  font-size: 13px;
  color: #888;
  margin: 11px;
}

.count p span{
  color: black;
  font-size: 18px;
  font-weight: bold;
  padding-right: 2px;
}

.count .action-btn{
  float: right;
  display: inline-block;
  background: #aaa;
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 14px;
  margin: 11px;
}

/*== COLORS ==*/

.facebook .icon{background:#3b5999;}

.facebook .action-btn{background:#3b5999;}

.facebook .icon i{padding-top:2px;}

.twitter .icon{background:#55acee;}

.twitter .action-btn{background:#55acee;}

.twitter .icon i{padding-top:2px;}

.youtube .icon{background:#cd201f;}

.youtube .action-btn{background:#cd201f;}

.youtube .icon i{font-size:24px}

.google-plus .icon{background:#dd4b39;}

.google-plus .action-btn{background:#dd4b39;}

.google-plus .icon i{font-size: 18px; padding-top: 1px;}

.instagram .icon{background:#e4405f;}

.instagram .action-btn{background:#e4405f;}

.rss .icon{background:#f57d00;}

.rss .action-btn{background:#f57d00;}

.social-counter-2 .linkedin, .linkedin .icon,.linkedin .action-btn{background:#0077B5}

.social-counter-2 .vimeo, .vimeo .icon,.vimeo .action-btn{background:#1ab7ea}

.social-counter-2 .vk, .vk .icon,.vk .action-btn{background:#4c75a3}

.social-counter-2 .tumblr, .tumblr .icon,.tumblr .action-btn{background:#34465d}

.social-counter-2 .pinterest, .pinterest .icon,.pinterest .action-btn{background:#bd081c}

.social-counter-2 .stumbleupon, .stumbleupon .icon,.stumbleupon .action-btn{background:#eb4924}

.social-counter-2 .reddit, .reddit .icon,.reddit .action-btn{background:#ff5700}

.social-counter-2 .yelp, .yelp .icon,.yelp .action-btn{background:#af0606}

.social-counter-2 .weibo, .weibo .icon,.weibo .action-btn{background:#df2029}

.social-counter-2 .producthunt, .producthunt .icon,.producthunt .action-btn{background:#da552f}

.social-counter-2 .whatsapp, .whatsapp .icon,.whatsapp .action-btn{background:#25D366}

.social-counter-2 .vine, .vine .icon,.vine .action-btn{background:#00b489}

.social-counter-2 .slack, .slack .icon,.slack .action-btn{background:#3aaf85}

.social-counter-2 .dribbble, .dribbble .icon,.dribbble .action-btn{background:#ea4c89}

.social-counter-2 .flickr, .flickr .icon,.flickr .action-btn{background:#ff0084}

.social-counter-2 .behance, .behance .icon,.behance .action-btn{background:#131418}

.behance .icon i{font-size:18px;}

.social-counter-2 .foursquare, .foursquare .icon,.foursquare .action-btn{background:#f94877}

.social-counter-2 .snapchat, .snapchat .icon,.snapchat .action-btn{background:#FFFC00}

.snapchat .icon i{font-size:24px;text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black}

.snapchat .action-btn{text-shadow: 0 0 1px black}

</style>
Adding Social Media Codes to Blogger Sidebar
1. Copy the given codes above and head over to blogger > layout page.

2. In the sidebars click on add a gadget.



Add Social Media Codes Blogger Sidebar

3. Click HTML/JavaScript Add: to add third-party functionality or other code to your blog.



Adding Social Media Codes Blogger Sidebar

4. Paste the codes in the content box, add a title and click save.



Add Social Media Code Blogger Sidebar

5. Click save arrangements and you're done!



Adding Social Media Codes to Blogger

Conclusion
Adding social networking follow us or join our buttons on your site is a good technique to boost your business. You can easily grow the numbers of subscribers on your blog via this widget.

Did this widget work on your blog? let me know in the comment box below and also subscribe us for more latest updates!