Fixed Floating Twitter And Facebook Share Buttons


In recent posts we have had a deep look into bookmarking and getting more viewers from social networks and social bookmarking websites.One of the key factors in getting people to share your posts was making it as easy as possible for them to do so.On most blogs there are bookmarking icons below the posts so when a reader is finished reading the post they have the option to share it.But what if the option to share was available throughout the post and followed them as they read ?

After writing the last post on social bookmarking i decided to look into creating floating bookmarking buttons.The buttons i wanted would be positioned in the bottom corner of the page and as the reader scrolled the buttons would stay fixed in position.At the time of writing i have the fixed social buttons on this blog in the bottom right corner.In case i change in the future you can see how they look on the Demonstration Blog Here.

float social icons


I have used only Facebook And Twitter Buttons, Other could be added.

Fixed Social Buttons

There are a number of ways to position the buttons but i have found a very easy way that just involves adding code to a gadget on your Layout/Design page.

Add The Social Buttons To Your Blog

Step 1. In your dashboard click 'Layout/Design' > 'Add A Gadget' > 'Choose Html/Javascript'

Blogger layout
add a gadget blogger
add html javascript blogger

Step 2. Copy the code below and paste it into the html/javascript gadget :

<a href=''><img alt='Best Blogger Tips' src=''/></a><div style='position: fixed; bottom: 1%; left: 1%;'/>
<br />
<table border="0"><tr><td>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
<script src='' type='text/javascript'> </script>
<a name="fb_share" type="box_count" href="">Share</a><script src="" type="text/javascript"></script>
</div><a href="" target="_blank"><small>Get Floating Social Buttons</small></a>

Move Gadget Position

You can change the position of the buttons by makeing a change to the code.The current position is bottom left as highlighted in red.

bottom: 1%; left: 1%;

To put the buttons in the bottom right corner change like this :

bottom: 1%; right: 1%;
top: 1%; left: 1%;
top: 1%; right: 1%;

Once you have the code entered save the gadget and check out the result on your blog.

What do you think ? Let us know !

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. very nice
    worked perfect
    but i put in in the center

  2. Thank you SOOOO much! This worked immediately and made my page look so much more professional. I've been scouring the internet searching for a way to do this. After many failed experiments I thought that maybe only really experienced web designers knew how to add this feature; certainly not someone who just start a company blog a week ago

    This site is going to make my life so much easier.

    Thanks again!

  3. Thank you! This was very easy to do. Just a question, though... are we supposed to change the code that has a link to your site/image?

  4. This comment has been removed by the author.

  5. thanks you very much this is working very good for my blog.

  6. Thanks for the tip!! works like a charm!! is there a way to put the FB button right UNDER the tweet button though? I have found that the FB button runs into text on my blog as I scroll down.


  7. How can I change the logos from fb and twitter? thank you

  8. hi, how can i make a floating button to have the "slide" effect when you scroll down? (as the floating menu in the left in this blog)?? thanks

  9. hiya, love your work! Especially the floating social media buttons you have on this post (tweet, like, share, g+ and pin it)- how is it possible to create one of my own? Thanks so much!

  10. Thanks for sharing. However need your help.

    I am looking for a share button like what you are having now. Tweeter, facebook, google+, stumbleupon and pinterest.

    Can you guide me how to get it please?

    I am only currently having fb, twitter and g+ on my blog here

  11. This comment has been removed by the author.


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us