Blogger Social Media Buttons Widget

This is a free social media widget for blogger that includes follow buttons to your social media accounts.

It is one of the best blogger gadgets which allow your readers to follow you and get your blog's updates on social media.

In this post, we'll show you how to add social media icons to blogger post or sidebar.

Why do You Need Followers on Social Media


Is there any need to add a free social media widget for Blogger on your blog?

Look at it this way:

What if you could retain your blog visitors by making them subscribe to your social media pages on Facebook, Twitter, Pinterest, and Google+?

Sounds good right? But the result is even better.

This is because you stand to get more loyal readers on your blog, increased traffic due to more return visitors, and improvement in the number of followers in all these pages.

Additionally,

If you are not getting traffic or meaningful traffic from a search engine like Google, Bing, Yandex etc., you can use this method to improve your blog's traffic as well as its comments.

Now,

With more traffic on your blog and comments, your rank on Search engines can indirectly be improved, thereby bring the required traffic you need from search engines.

Each time your blog posts get shared in any of these pages, your followers are notified about it, and some even get email alerts.

They can now choose to revisit your site through the link in those pages.

If all these are not too difficult to wrap your head around, then you do need to this add this HTML social media buttons to your blogger blog.


Also Read:   Most Commented Posts Widget For Blogger With Thumbnails
                      Stylish Popular Post Widget For Blogger
                      Numbered Page Navigation Widget For Blogger Blogs
                     Platform Twitter Follow Button Widget For Blogger
                     How to Make Blogger Widgets/Gadgets Sticky(Float)


What Does this Social Follow Gadget Do?


It incorporates links and icons to at least 5 social media pages and also comes with an email subscription box.

Since all these can be found on one Gadget, to enjoy the benefits that come with having thousands of followers on your social media pages does not require that you use individual gadgets for all these social networks as some blogs do.

With just one gadget featuring the social media icons, you can avoid increasing your blog load time by using separate gadgets or widgets.

For instance,

Instead of using a seperate Facebook Like Box, Twitters Followers Blogger Button, Email subscription box, and Feeds Subscription box, you use only one gadget that features all the following.

This being the case

You can increase your blog's followers and traffic, while at the same time not influencing its page speed negatively.

Conclusively,

Getting blog followers on social media pages is necessary to increase your blog's popularity and it is another SEO technique since your blog on pages like Facebook, Twitter, and Pinterest can also appear in search engine results pages.



How to Add Social Follow Gadget to Blogger


Here's how to social media buttons to blogger sidebar by  following the steps outlined below:

1. From your Blogger dashboard, go to 'Template'.

As usual Backup your template before making any new changes to it, because mistakes are sometimes inevitable.

2. Click 'Edit HTML' and using ctrl+F combination keys and search for  <data:post.body/> code in your blogger template.

3.  Paste the code shown below just 'below' the second or third <data:post.body/> in your template


<section class="newsletter">
    <h2>
    Tired of checking for new posts ?
    </h2>
    <div id="form-newsletter">
    <div class="social facebook">
    <a href="https://www.facebook.com/USERNAME" target="_blank">
          <img src="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/s1600/nl-facebook@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FUSERNAME&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
        </iframe>
      </div>
    <div class="social twitter">
    <a href="https://twitter.com/USER-ID" target="_blank">
          <img src="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/s1600/nl-twitter@2x.png" />
        </a>
        <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=USER-ID&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
        </iframe>
        <script>
          !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
            if(!d.getElementById(id)){
              js=d.createElement(s);
              js.id=id;
              js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
        </script>
      </div>
    <div class="newsletter-form">
    <fieldset>
    <h2>
           Get all posts directly in your mail.
          </h2>
    <div class="fields">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=USER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
              <input name="uri" type="hidden" value="USER-ID" />
              <input name="loc" type="hidden" value="en_US" />
              <input class="subscribe" name="commit" type="submit" value="Subscribe" />
            </form>
    </div>
    </fieldset>
    </div>
    </div>
    </section>
    <style>
    .newsletter{text-align:center;margin:20px 0;}
    .newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
    .newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
    .newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
    .newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
    .newsletter:after{clear:both}
    .newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
    .newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
    .newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
    .newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
    .newsletter .social a:hover img{transform:scale(1.1)}
    .newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
    .newsletter .social .social-box.fb-like{margin-left:-45px}
    .newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
    .newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
    .newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
    .newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
    .newsletter .newsletter-form fieldset .fields{position:relative}
    .fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
    .fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
    .fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
    </style>
    <script type="text/JavaScript">
    fontsize = function () {
        var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
        $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
    };
    $(window).resize(fontsize);
    $(document).ready(fontsize);
    </script> 

4. After adding the code given above on either the second or third <data:post.body/>, edit it and make some necessary changes in the USER-ID for each social network.

The first two are for Facebook which is the Username, the third and fourth are the Twitter handles and the last two are for Feedburner ID.

5. Finally, save the Template.

Conclusion:


Never underestimate the power of social media and the impact it can have on your blog as well as this Social follow Blogger gadget.

If you successfully added the social media icons to your blogger blog, let us know, and if you encountered problems, alert us as well by leaving a comment below, and we'll help you fix it.

Also Read:   Sliding Recent Posts Blogger Widget 2016
                    Social Media Follow Buttons Widget For Blogger
                    Email Subscription Widget For Blogger
                   10+ Best Blogger Tips and Tricks
                   Link to This Post Widget For Blogger
                   Add Stylish Custom Search Box To Blogger
                    How to Add IP Widget In Blogger Blogs

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments