Add Simple Social Media Follow Buttons Widget on Blogger

There are a number of ways to increase your followers on social media. One of the best ways is to add social media follow buttons widget on your blog so that interested users can follow your page on any platform they are most active.

Unfortunately, Blogger doesn’t have any built-in widget for social media follow buttons. Either you have to add it manually or you can use a third-party service such as AddThis & Shareaholic.

We recommend you not to use any third-party service as it needs you to add the script from an external source on your blog which can increase your webpage loading time and affect your blog’s performance.

This tutorial will guide you how to add a simple and professional social media follow buttons widget on your Blogger blog manually.

Features of this social media follow buttons widget

Here are some of the features of this widget –

• No JavaScript used – This widget doesn’t have any JavaScript code or script links from the external source. It is based on the HTML and CSS language only.
• Fast loading – As there is no JavaScript code and links from the external source (except the social media icons), so this widget will load really fast without affecting your webpage loading time.
• Professional UI – This widget has a very simple and professional look and it can fit on any blog design/theme you are using.
• All social media icons – This widget contains all popular social media icons including Facebook, Twitter, Google Plus, LinkedIn, Pinterest & RSS.

You can see the live preview of this social media follow buttons widget in the footer section of our website.

How to add social media follow buttons widget on Blogger

Here’s a step-by-step guide to add social media follow buttons widget on your Blogger blog –

1. Login to your Blogger Dashboard and go to the Layout section.
2. Click “Add a gadget” button in the sidebar section of your blog layout or anywhere you want to add the social media follow buttons.
   
3. Now click “HTML/JavaScript” option in the gadgets list.
4. Type “Stay Connected“, “Follow Us” or any other tagline in the title box.
   
5. Next, copy the following code and paste it into the content box.

<style type="text/css">
.social-profile-icons{margin-top:20px 0 0;overflow:hidden}.social-profile-icons ul{display:inline-block;margin:0 auto!important;text-align:center}.social-profile-icons ul li{background:transparent!important;border:none!important;float:left;list-style-type:none!important;margin:0 4px 10px!important;padding:0!important}.social-profile-icons ul li a,.social-profile-icons ul li a:hover{background:url("https://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;display:block;height:38px;overflow:hidden;text-indent:-999px;transition:all 0.25s linear 0s;width:38px}.social-profile-icons ul li.social-facebook a{background-color:#3b5998;background-position:-60px 3px}.social-profile-icons ul li.social-twitter a{background-color:#00aced;background-position:-253px 3px}.social-profile-icons ul li.social-gplus a{background-color:#dd4b39;background-position:-93px 3px}.social-profile-icons ul li.social-linkedin a{background-color:#007bb6;background-position:-125px 3px}.social-profile-icons ul li.social-pinterest a{background-color:#cb2027;background-position:-157px 3px}.social-profile-icons ul li.social-rss a{background-color:#F87E12;background-position:-189px 3px}.social-profile-icons ul li a:hover{opacity:.8}
</style>
<div class="social-profile-icons">
<ul>
<li class="social-facebook"><a rel="nofollow" target='_blank' href="facebook-link" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a rel="nofollow" target='_blank' href="twitter-link" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a rel="nofollow" target='_blank' href="google-plus-link" title="Google+">Google+</a></li>
<li class="social-linkedin"><a rel="nofollow" target='_blank' href="linkedin-link" title="LinkedIn">Linkedin</a></li>
<li class="social-pinterest"><a rel="nofollow" target='_blank' href="pinterest-link" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a rel="nofollow" target='_blank' href="feedburner-link" title="RSS">RSS</a></li>
</ul></div>

• Make sure to add links of your social media accounts in their respective href attribute as highlighted above.
• If you want to rearrange the social media buttons, you can adjust the <li> tags.
• If you want to remove any social media button, simply remove its <li> tag.
6. Finally, tap the “Save” button to add the widget on your blog.

Note: The social media links will open in a new tab when clicked and they are also nofollowed by the search engines.

• Also read: How to add custom recent posts widget in Blogger

We hope you liked this social media buttons widget for Blogger. If you are facing any problem in adding this widget on your blog, please let us know in the comment section below.