Setting up your social bookmarking buttons

Setting up your social bookmarking bar is precoded and is disabled by default until you want it.

  1. In your admin, go to the Transition Pro control panel and click on the Social Bookmarking tab
  2. Put a checkmark in the “Enable Social Bookmarking” box
  3. Click Save on the tab and you are done

If all went well, you should see the following social bookmarking bar just above the footer area:


This bar offers rollovers from the grey to full colour of each social icon present.

Adding or Removing Social Icons

Not everyone may want this particular selection, so you may want to add or remove a particular icon. You will need to open up a couple of files to edit this bar, which is really a good thing to know some basics of html and css.

IMPORTANT: Before modifying any code from any core files, make sure you keep a full backup of the original – just in case something goes wrong – trust me when I say that you will thank yourself for doing that for anything you do!

Removing a Single Icon

Whichever one you decide to remove, you need to do the following:

  1. Open your theme’s folder and go to the transition/includes/social.php  file and open it.
  2. Remove the line of code related to the social icon you want to remove – the code will look like the following:
    <a id="sc1" href=""></a>
    <a id="sc2" href=""></a>
    <a id="sc3" href=""></a>
    <a id="sc4" href=";url=&title="></a>
    <a id="sc5" href=""></a>
  3. Click Save and upload the file to replace the existing live version
  4. View the front of your site and it should be gone from the Social Bookmarking bar

Adding a New Social Icon

If you would like to add another icon, you will have to do a few things, including making a new icon. You may need to recreate new ones or if you find a new set of icons that includes the ones you want to add, you can use those. I have made a rollover state for each one for the default setup, the top icon being grey with a drop shadow and then the coloured version with a shadow below it as one single image. So when you mouseover, the coloured one moved upward to replace the grey one. To give you an example of what the actual icon looks like (for reference), see the screenshot below:


In the html code previously shown above, you will notice an “id” of sc1, sc2, sc3, etc. This is how the icons are loaded using css which you will find in the theme’s images folder (for the icons) and the style.css is the id styling that gives the rollover effect. An example of the css for this:

Social Icon Style for the Facebook sample: 
a#sc3{background: transparent url('images/icon-facebook.png') no-repeat 0px top;}
a#sc3:hover{background: transparent url('images/icon-facebook.png') no-repeat 0px -35px;}

The -35px you see above means that the grey and the coloured version is 35 pixels in height and when you hover (mouseover) over the icon, the icon moved up by 35px (-35px) to show the coloured version where the grey was.

NOTE: There is potential for new sets of icons to be added with theme updates which will give you the choice to select what you use or want to use from a larger selection.

Once you have your icons ready, you need to do the following:

  1. Upload your new icon to the theme’s image folder
  2. Add a new style for each one, just like you see in the sample above. So in the case of adding to what other is there, your a#sc will be the next sequence would be a#sc6 and a#sc6:hover
  3. Open the transition/includes/social.php file and add the following:
    <a id="sc6" href="the link for the social bookmarking service here"></a>
  4. Save the social.php file and you should see your new social bookmarking icon with it’s specific link applied.
By | 2010-09-25T01:49:36+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply