CreativeDive supports this item


This author's response time can be up to 5 business days.

17 comments found.

Could you place in your prudct description that this is not a working share script. In other words when you click on facebook for example it isnt going to actually take your user to facebook to share your page’s information. All of the buttons and hovers work beautifully and I will incorporate this into my project but now I have to code the back end myself.

Okay, I unterstand … sorry for this misunderstanding … I will write … “Linking your Fan Page or URL you wish – This Produkt dosen’t work with Share Button (e.g. Facebook Sharing Code)”

Hi I need help with the installation, it’s a bit more complex than I thought :stress: i’ll give you my login info if need thanks for your help :)

hi missfortune,

actually I do not give support for the integration. But try to describe your problem, then maybe I can help you.

Hallo, do you provide a PDF file? I need a custom search-icon, maybe with a “S” or ”?”.

thank you Jochen

I have built a page with the code and CSS, and it works fine. I have a site here and would like to have the social icons on the left hand side.

However, I’m having trouble figuring out how to incorporate the div and/or script into the pages. Can you give me any ideas?

Maybe, you can build a example page for So I can see the including problem. Maybe there are duplicate class names.

Trying to create an easing effect but can’t figure out what class to use to call the effect.. $.easing.easeOutCubic = function (x, t, b, c, d) { return c*tt + 1) + b; }

<script type="text/javascript">

$(”.sidebar”).mouseover(function () { $(”.sidebar”).fadeIn(100, ‘easeOutCubic’); $(”.sidebar-content”).fadeIn(100, ‘easeOutCubic’); }); $(’.sidebar-content’).mouseout(function() { $(”.sidebar”).fadeOut(100, ‘easeOutCubic’); $(”.sidebar-content”).fadeOut(100, ‘easeOutCubic’); }); </script>

the sidebar is not supported for animation effects. But you can adjust this for your own representations. Set the effect on mouse hover. either the entire sidebar, or each individual icon.

Hi Wootimes, All, Will I be able to create additional icons? Thanks,

Yes you can create additional icons. Add new css classes with background-image (icons) and enjoy it.

hello! can you please help me, in my editor and when I open my index.html local the icons are there! I’ve uploaded all things (style.css (which is surely included in my index ;) icons) and in the internet i cant see the icons?? pleaaase help

very confusing: The requested URL /icons/facebook.png was not found on this server! But its on the sevrer for sure! I’ve deleted it a thousand times and uploaded it again! so its no wonder that its not showed :( when i try to upload just one single .png and surf to it it works ^^

ok for people who maybe will have the same problem! I found out that there is an icons directory which is not displayed in my ftp-site with alot of website-icon-things haha! I changed the name to icon and now it works!

hi cturinsky, please check the file path to the icons. Perhaps the relative file path in the css file is no longer true. That you can check this by your absolute path. e.g.

Excellent script! Very simple and no JavaScript required. I added this on my our company’s website. Check it here:


I have installed a bottom demo on but nothing appears! It appears on a similar site but that is not set to 100%.



Hey, I looked at your site. You must set the “z-index” over you other html container.

Test this, edit your css file on class “pos-bottom” with “z-index: 9999”

.pos-bottom {
    bottom: 0;
    left: 100px;
    position: fixed;
    z-index: 9999;

Sorry – z-index. Fixed up now.


Nice Product.

How do I create a more dramatic hover effect? maybe a stronger color fade? or opacity?


hey, what a solution would you like? e.g. from “0” opacity to “1” opacity or other? specialize it please.


you can use “slide-in and -out” / add this line to css:

.sidebar-content {transition: all 0.5s ease-in-out}
.sidebar-content:hover {transition: all 0.5s ease-in-out}

or this for “slide-and-fade-in and -out” / add this line to css:

.sidebar-content {opacity:0.5;transition: all 0.5s ease-in-out}
.sidebar-content:hover {opacity:1;transition: all 0.5s ease-in-out}

Hello, these are only share buttons or I can use for follow or like?

Hi, this buttons have no function. This is a css package for styling only. E.g. you can set a link to your facebook page or edit them with javascript manually.

Hello, I purchase your WP addon, but it dont work: when I try to upload on my website, it say:

“The archive could not be installed. Found no valid extension.”

Can you help me? Thank you per advance

Sorry for my baddest english, i am from France :)

Hi, sorry this Item is not WP Plugin. You can put it manually in your html Template Code. E.g. In your footer.php

Use the Code from the downloaded files and fill the links with your Social Profiles. Dont forget to add the css Styles in your Main Template css file.

Can I replace on of the icons with my own icon?

Hi, can you help me how to install this on google tag manager pls?

Please, read the google tag manager documentation for using this. Without exactly questions, I can’t help you.

i have to have a script to implement…

What exactly does not work? Where can I find an example of your script? What is the purpose of the script?


doreso Purchased

Hi there, Is it possible to add our own icons ? thanks !


doreso Purchased

This is solved. I’ve find it out. No need to reply.


doreso Purchased

Just bought and installed as you described but as there are other css files, it totally destroyed the look of my site :/ Can you please help me to insert the code lines correctly without changing its original look? Thanks.

Have you solved this issue too?

i have purchased Social Sidebar – CSS Social Bar with Icons how can i install it in Joomla ?

Hey, this is not a plugin to install it. This package is created in pure HTML and CSS. You can add it to Joomla, but you need knowledge about HTML and CSS to include the files to your website.