You are here

Drupal Sharebar Configuration Manual

Look to your left and you'll see a social sharebar (my other websites Mediography.by & Vector.dj have their own versions). I use this module on all of my websites because it's my favorite one for social sharing due to its simplicity. On larger screens, you'll see the vertical version. But if you shrink your browser, it'll automatically turn to a horizontal version. I like it a lot. Today I'll show you how to configure & customize this for Drupal websites. Here we go:

1) Download the module called "ShareBar".

2) Upload, install & enable the module.

3) In your website's admin settings, go to Configuration -> ShareBar -> Configure ShareBar.

4) Basic configuration is pretty straightforward for "ADD SHAREBAR" & "DISPLAY OPTIONS", so I'll focus on how to customize the module so that it matches whatever layout you have on your website. The first customization you can do is for each button in "BUTTONS" (used for CSS below in step #6). For example, the following is what I have for the Facebook button used on this website:

I) "Big Button": No changes were made to the default code.
II) "Small Button": <li class="fbx"><div class="btn_fbx">Default code</div></li>

5) The second customization you can do is available in "CUSTOMIZE", so fill in the four fields:

A) "Sharebar Width": The default is 75, which is actually a good number. All of my websites use this default number.

B) "Twitter Username": Enter your Twitter username.

C) "Sharebar Background Color": For this website, I left this field empty and then used custom CSS code (second line of code as shown below at step #6A) to give it a transparent look to match the layout of the blocks at the right. For Mediography.by, I have it at F0F0F6 to match the background colors of the blocks on that website. For Vector.dj, I have it at C8B694.

D) "Sharebar Border Color": For this website, I left this field empty and then used custom CSS code (third line of code as shown below at step #6A) to match the layout of the blocks at the right. For Mediography.by I have it at F0F0F6 to match the background colors of the blocks on that website. For Vector.dj, I have it at AAAAAA.

6) Add some custom CSS code as necessary. There are two parts:

A) Vertical: CSS code for the vertical sharebar ("Big Button"). For this website, I had to add the following lines of code to match the layout of the blocks at the right:

body ul#sharebar {
background: transparent url(../images/white-trans-10.png) 0 0 repeat;
border-color: transparent;
}

B) Horizontal: CSS code for the horizontal sharebar ("Small Button"). Depending on how you have your website set up, you will realize that enabling too many buttons will cause issues, since you want to fit them all in one line if possible. Your code also needs to account for what percentage of width each button takes. For example, my website has four buttons, so each one should be 25% (which is actually 24% because I wanted some space before the first button). You also want to take expanding width of the sharing numbers into account because they will all be initially 0, but will eventually turn into double digits, triple digits and so on. Here's how I have my CSS code set up to take care of everything:

body ul#sharebarx li {
margin-right: 0px;
width: 24%;
}

body ul#sharebarx li.fbx {
padding-left: 4%;
}

.btn_fbx {
margin-left: -6px;
width: auto;
}

.btn_gpx {
margin-left: 52px;
width: auto;
}

.btn_lix {
margin-left: 51px;
width: auto;
}

.btn_twx {
padding-left: 46px;
width: auto;
}

And that's it. Good luck!

P.S. In the next few weeks, I'll show you how to configure & customize a Drupal module called Follow.

You are here