Miscellaneous Hacks - Sharebar - Sidebarslider

Hello,

i create a little modification for my site and want to share it with you.

With this modification you can make a sharebar-slider for your forum.

Please look screenshots for more details or visit http://abload.net for a live demo.


1. Open template "additional.css"
2. Past following code at the end

#followTab {
background: #fff;
width: 52px;
list-style: none;
position: fixed;
z-index: 5;
right: 0;
top: 180px;
padding: 8px 5px;
border-right: none;
border-radius: 5px 0 0 5px;
}
#followTab li {
margin:9px 0 0 0;
line-height:0
}
#followTab li:first-child {
margin-top:0
}
#followTab a {
display:block;
width:24px;
}
#followTab a span {
position:absolute;
top:-999em
}

3. Open template "footer"
4. Past following at the begin

<ul id="followTab">
<li>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=150946958326648&amp;xfbml=1"></script><fb:like href="" send="false" layout="box_count" width="30" show_faces="false" font="tahoma"></fb:like>
</li>
<li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></li>
<li><script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})(); 

</script><a class="DiggThisButton DiggMedium" rev="technology"></a></li>
<li><g:plusone size="tall"></g:plusone><script type="text/javascript">
  (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
</ul>

You must edit your facebook-App-ID in this Code! (Where get a App-ID from Facebook? Look at my other modifications.)

5. Finish!



Changes for your own:

- To adjust the height from the top of the page, change the top: 180px; line in #followtab (additional.css) to the value you need in pixels.

-In the default configuration it is aligned to the right, if you want it aligned to the left, change the #followtab class to this:

#followTab {
background: white;
width: 52px;
list-style: none;
position: fixed;
z-index: 5;
left: 0;
top: 180px;
padding: 8px 5px;
border-right: none;
border-radius: 0 5px 5px 0;
}

- to change the background-color, change in #followtab background: #fff
Here you can find many colors:
http://www.colorpicker.com/
http://tomheller.de/theholycymbal/html-farben.html

-If you want to add more buttons to the sidebar, simply find <ul id="followTab"> and add the additional button's HTML code in <li></li> tags. You can rearrange the order as well.

Note:
- click install
- dont forget to rate and nominate it

[AURFSCAN]

<ul id="followTab">
So theoretically you could put other content eg.  icons, links in between  here?  usergroup permissions too etc.
</ul>

could be useful.. thanks

[doraj]

Hello,

when I paste the code on the footer template, I have this error:

Warning: Invalid argument supplied for foreach() in [path]/includes/functions.php on line 3555

I use vB 4.1.9

Regards

[Kraxell]

when I paste the code on the footer template, I have this error:

Do you have install TMS or something?

could be useful.. thanks

Sure

Please mark install for support.

[doraj]

Hello Krazell,

Yes I have TMS.

[Kraxell]

ist a Bug from tms . please deactivate tms, install this modification and than activate tms again .

[mfnforex]

thank you
it is great

[doraj]

Hello,

I resolved working a little bit with TMS, and now it works well!

Please, I have a request for you.

I use a fixed style, I would like set Sharebar align on the left side of the Forum (near the left border of forum), but I have any problem with css.

It seems, that also if I change the "left" field, the Bar remain always blocked.

Thanks

[Kraxell]

Please mark as install for support.

If you want to take it to the left, please do follow:

Open template additional.css
Find

#followTab {
background: #fff;
width: 52px;
list-style: none;
position: fixed;
z-index: 5;
right: 0;
top: 180px;
padding: 8px 5px;
border-right: none;
border-radius: 5px 0 0 5px;
}

Replace with:

#followTab {
background: white;
width: 52px;
list-style: none;
position: fixed;
z-index: 5;
left: 0;
top: 180px;
padding: 8px 5px;
border-right: none;
border-radius: 0 5px 5px 0;
}

[doctorsexy]

Installed works great..thank you....