Fixed Floating Twitter And Facebook Share Buttons

Posted : Thursday, July 01, 2010 | Post Author : Paul Crowe | 14 comments

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

Screenshot

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=’http://www.spiceupyourblog.com’><img alt=’Best Blogger Tips’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png’/></a><div style=’position: fixed; bottom: 1%; left: 1%;’/>
<br />
<table border=”0″><tr><td>
<script type=’text/javascript’>
tweetmeme_url = ‘<data:post.url/>’;
</script>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’> </script>
</td><td>
<a name=”fb_share” type=”box_count” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</td></tr></table>
</div><a href=”http://www.spiceupyourblog.com” 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 !

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

 

14 comments:

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

    ReplyDelete

  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!

    ReplyDelete

  3. Glad to have helped Meredith..

    ReplyDelete

  4. 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?

    ReplyDelete

  5. This comment has been removed by the author.

    ReplyDelete

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

    ReplyDelete

  7. Brenda and KristinaNovember 8, 2011 at 4:50 PM

    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.

    Thanks!!
    🙂

    ReplyDelete

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

    ReplyDelete

  9. 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

    ReplyDelete

  10. Thanks a lot.

    ReplyDelete

  11. 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!

    ReplyDelete

  12. 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 http://bigfatreality.blogspot.com

    ReplyDelete

  13. This comment has been removed by the author.

    ReplyDelete

  14. daviskills killsJuly 7, 2012 at 1:26 PM

    very nice

    ReplyDelete