Searching...
Monday 1 October 2012

Create Floating Bar For Pinterest & Other Sharing Buttons


float bar for sharing buttons
This is one of the few social sharing widgets that took a lot of my time in designing it. You have seen the trend of floating sharing count buttons on popular blogs. The traditional icons are now replaced with auto incremented counter buttons that are updated in seconds.  We created different versions of this bar applying both Jquery effects and CSS3 styles but this widget is different because it contains custom twitter, pinterest and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. Pinterest pin it buttons are causing great trouble and it badly fails in fetching the correct thumbnail image. In most cases it does not even select a image thus making the entire pinning concept tasteless. We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float  to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience. We have tested the widget on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.
Developers and bloggers are requested to link back to this post if in case they wish to share our code with their readers. Lets get to work now!

Which Social Networking Buttons To Use?

Your first priority should always be Facebook, Google+, Twitter, Linkedin and Now Pinterest. All these sharing counters play well in circulating your content over a wide range of visitors. Social Media is a non-stoppable engine, which if driven correctly and carefully can bring tons of valuable traffic each visitor worth a dollar. Since displaying too many count boxes could surely effect your blog load time therefore we have added a AddThis share button which provides visitors with over 330+ social sharing options all at one place.

Why not use JQuery?

Ignore JavaScript and its library which is Jquery as much as possible. Browsers like Internet Explorer still lacks support to all functionalities offered by jquery. Moreover JavaScript is responsible for a great percentage of your overall blog load time. We therefore did not add a smooth sliding effect to this plugin as we previously did toJquery Sliding share widget

How it works?

We have integrated both Addthis and ShareThis service in it. In order to customize the twitter button and others we took the Sharethis default code and customize it to change the button image, bubble size and count text. The widget that we initially developed looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below:
float bar for sharing buttons
You can observe that both Twitter, Google Plus, Pinterest and Stumbleupon are displayed with custom shapes, same sizes and different count colors. I spent a lot of time trying to make all buttons of the same size by using a common image linked by a sprite but the only problem with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis. If you add this sharing bar to your blog, you will see zero on all counters unless someone clicks them and circulates your content.
To correct this issue I had to unfortunately dropped the idea of sharing the above designed version and share this tutorial widget instead. However the widget on our blog still contains the twitter button which wont display official count but that of ShareThis. If you would like to replace it with the official big size twitter count box then you can surely do this by customizing the code shared below.
Adding Floating Bar To Blogger
The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Then Click Expand Widget Templates
  6. Search for


     7.   Just below it paste the following code:



Just replace rnhckr.blogspot.in  with your twitter username.
   8.  Save your template and you are all done!

Got Questions?

This floating bar would display on post pages only and wont display on homepage. The widget has a white background and floats to the left of blog posts. If incase you want it to float to right then all you need is to edit the part of the code bolded in black. You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves and your loved ones. Peace and blessings pals! :)

3 comments:

  1. I favour the depth! more info
    Check out my page : official website

    ReplyDelete
  2. This does NOT work, every website tells me to do this and it does not work.

    ReplyDelete
  3. KEVIN SAVOIE ,
    plz follow stap by stap tetorial than tell me,
    what problum you face

    ReplyDelete