Simple Blogger Tutorials

How to Add Floating Social Media Icons to Blogger

Today we will learn how to add floating social media connect/subscribe icons to Blogger. The icon buttons are said to be connect as it will only let your blog readers to connect or subscribe with your blog through social media sites. It's mainly found floating right or left and outside of your blog.

In this tutorial, the social sites that I have included are Facebook, Twitter, RSS and Email icons and of-course, you can see them floating. So let's go through the tutorial.

Floating Connect Buttons

Demo

1. Go to Blogger's Template tab and click "Edit HTML".

2. Find the closing </body> and before it add the following codes:

<!-- SimpleBloggerTutorials.com -->
<div class="flt-wdt">
 <!-- Facebook -->
 <a href="http://www.facebook.com/Page-Name" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="http://facebook-image.png" /></a>
 <!-- Twitter -->
 <a href="http://twitter.com/USERNAME" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="http://twitter-image.png" /></a>
 <!-- RSS -->
 <a href="http://feeds.feedburner.com/feed-address" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://RSS-image.png" /></a>
 <!-- Email -->
 <a href="http://example.blogspot.com/p/contact-page" title="Email me" target="_blank"><img alt="Email me" src="http://Email-image.png" /></a>
 <!-- Example/Delete -->
 <a href="Any Social Site" title="Give it a title"><img alt="Give it a title" src="http://your-image.png" /></a>
</div>
<!-- End -->

If there are any JavaScript added before the closing </body> tag then add the above codes before the scripts. Below is an example:

Floating icons
Click to enlarge

Now all you have to do is to change the highlighted codes. For example, change the Page-Name to your Facebook Page name or the USERNAME to your Twitter profile. Also upload your own icons, get the direct links and replace "http://your-image.png" with the icons respective to the social sites.

If you need to add more floating icons of your favorite social sites then the format is given within the above codes as "Example/Delete". If you don't need it, then delete these snippets.

3. Find ]]></b:skin> and before it add the following CSS part:

.flt-wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}
.flt-wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
 -moz-transform: scale(1.2) rotate(6deg);
 -webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
 -ms-transform: scale(1.2) rotate(6deg);
 transform: scale(1.2) rotate(6deg);
}

The full widget will be seen floating to right. Changing every right in step 3 to left will make the widget to float to left. If you need to reset the position of it from the top, then increase or decrease 43% or leave as it is.

4. At last save your template. Now you have floating social media buttons for your Blogger blogs.

31 comments :

  1. I was able to make it float, but it does not have the drop down like your stumble upon icon does. Can you help me please fix this?

    ReplyDelete
  2. Try Add Floating Share Buttons Like Mashable to Blogger for the type you are looking for. This tutorial is only for floating social buttons, not sharing ones.

    ReplyDelete
  3. very nice, thanks a lot i was struggling a little with this but if finally worked, question.... i did everything as indicated but it still showing up at the very bottom of the screen and i would like it to be at the top, like the demo you showed. any idea why is this happening?

    ReplyDelete
  4. I need to know your blog's URL to see what is causing it.

    ReplyDelete
  5. i would really appreciate it if you could take a look at it, and maybe point me on the right direction

    it's still a work in progress but here is the url http://leticiavanhorn.blogspot.com/

    thanks a lot

    ReplyDelete
  6. Oops, it seems that you didn't follow the tutorial properly.

    The step 2 will be before closing "</body>" tag. If you want to add only Facebook icon, then copy all the "div" section and paste it just before the closing body (as told above). So the whole thing will look like:

    <div class="flt-wdt">
    <a href="http://www.facebook.com/your Page id" title="Join me on Facebook"><img alt="Join me on Facebook" src="add your image's URL here" /></a>
    </div>

    The step 3 is done correctly, just delete that "div" part as it don't fits there.

    ReplyDelete
  7. I'm failing! I changed the required parts to my own urls and images but the RSS image is massive and the facebook image doesn't show up at all?. How do I resize the RsS image in the html and make the facebook image show up?

    www.passionanddistraction.com

    ReplyDelete
  8. Firstly, choose a small sized RSS image or resize the current image size in your computer (say 125x125 pixels or less) first and then upload it to your image host and replace it. If you have any good photo editing software then it's good otherwise download free GIMP.

    Secondly, place the Facebook code within the divs as told above. Yours is outside the divs which is not making it to float. The whole code will be:

    <div class='flt-wdt'>
    (Facebook snippet goes here...)
    </div>

    Hope this helps.

    ReplyDelete
  9. Ahhh! you're awesome! Feel silly missing that. Thank you!

    ReplyDelete
  10. It worked!!!! thank you so much!!!

    ReplyDelete
  11. Nice! I actually used a different approach.

    ReplyDelete
  12. Thanks man this is working in Firefox,Google chrome.
    In IE browsers there is a problem buddy.Instead of image the white color floating icons are floating at the center.
    My blog :http://maheshvarmastories.blogspot.com/

    ReplyDelete
  13. I've updated the codes, try it once more and report me back for any problem. I have tested it in IE and getting no problem with the floating connect icons.

    ReplyDelete
  14. Honestly, I just spent the last hour trying to do this. I don't speak html, and even though it was step by step including a picture, it still doesn't make sense to someone who doesn't know their way around very well. I was unable to install anything successfully, specifically because i have no idea what the heck "yourimage.png" is supposed to be. I know it's my image, but i have no idea how to make an image turn into that. There was no sort of explanation.

    ReplyDelete
  15. Hello!
    I have already mentioned in my post that you have to upload your own icons, get the URL of it and replace it with your image.png. If you are still not getting to any conclusion then leave a reply with your problem. I will try to solve it for you.

    ReplyDelete
  16. The icons locate at the right hand corner, how to place them in the middle of the page?

    ReplyDelete
  17. The icon is located at the side bottom. How to adjust the position?

    ReplyDelete
  18. Please follow the tutorial properly and place the codes as told above. Once done, this should work very well with every blog and the floating problem will also get fixed.

    ReplyDelete
  19. Excellent - works like a charm. Thank you!

    ReplyDelete
  20. Excuse me but is there a way for the icons to not scroll down with my page, it floats until the end of my page, is there a process where I can just make it stay up? the postion part: is it only fixed? thank you!

    ReplyDelete
  21. It is fixed and will remain it that position even if you scroll down the page. If you don't want it to be fixed then apply the below CSS in step 3:

    .flt-wdt{
    position: absolute;
    [...]
    }

    ReplyDelete
  22. Worked perfectly the first time. Thank you for sharing!

    ReplyDelete
  23. Hi there, i've followed the directions and unfortunately have been left with just the "follow me on twitter" "follow me on Facebook" writing (with links) on the very bottom left of my blog. www.thisisthefirm.com. not on the top right with no pictures in sight. What did I miss?

    ReplyDelete
  24. While editing your template find:

    #navbar-iframe{
    height:0px;
    visibility:hidden;
    display:none

    You must have forgot to close it properly with a closing bracket }

    So add it or replace the whole thing with:

    #navbar-iframe{
    height:0px;
    visibility:hidden;
    display:none
    }

    ReplyDelete
  25. Thank you so much, really appreciate you helping me out on such an old post! Looks awesome.

    ReplyDelete
  26. Some designing tutorials never get old ;)

    ReplyDelete
  27. great widget a must have 4 blogger

    ReplyDelete
  28. after I added step two blogger tells me:
    XML-Fehlermeldung: The reference to entity "filename" must end with the ';' delimiter.

    what does that mean? I have no clue. I did exactly everything you said

    ReplyDelete
  29. Are you sure that you have added everything properly because if it's done correctly, it will not give any XML errors.

    ReplyDelete
  30. How do I add pinterest? Can what's the code?

    ReplyDelete
    Replies
    1. Within the codes can you see "Example/Delete", it's where you can add Pinterest follow buttons.

      Delete

Don't SPAM! Read comment policy.

Like