Miscellaneous Hacks - AddThis Floating Horizontal Bar

This is a simple integration of the AddThis Floating Horizontal Bar

At present most share buttons are located in static places.
If you add one to the header, some one has gone down the page, they might not go back up and it the share button.
If you add a social media share button to the last post, you also have to find ways of integrating the buttons into your blogs, photo albums etc.

The new horizontal share bar is easy to install and makes sharing unobtrusive until the user begins scrolling down your page.
Appears on Scroll
The on-demand behavior of the horizontal bar boosts sharing because it appears as your visitors scroll down the page.


To see this bar in action, Im running it on my own forums
http://www.thespainforum.com/

Scroll down the page and it will suddenly appear at the top of the screen
Go back up and it auto hides
This means that if like me you have buttons in the header and the navigation bar are not covered at any time.

Instillation is two template edits

Header template

After

PHP Code:

<!-- /logo --> 

Add

PHP Code:

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div> 

At the very end of the footer template add this

PHP Code:

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script> 

If you want to track your clicks, you can register for a free account with AddThis and simply replace [YOUR PROFILE ID HERE] with your profile id

Further information and more layout options can be found on AddThis
http://www.addthis.com/labs/floating...ogin&lb=1#code

[sulasno]

tagged and thanks

I would assume this would also work for vB 4.X

[Lee G]

I dont see why it wont work on vb4, unfortunately I haven't got my vb4 test site running at present

You can set the bar to show earlier or later when the page is scrolled down by altering one number in the above code. Something I forgot to mention in the original integration

In the footer code, alter this line

PHP Code:

bar_show_below : 150 

Edit the 150 to make it show earlier or later

[LordVader]

Spot On

And I can confirm it works flawlessly on (VB'408)

Exactly what I was looking for, looks great & its not in your face all the time, Perfect. :up:

Rated *****

Thanks

L.V