Enter Search Query:

Add a social bar to wordpress

Last week I spent some time evaluating at social social media plugins for my WordPress blog. While there are lots of options, I found most of them pretty tacky looking…with limited options and none really suited my site design. I really wanted a floating social media bar on the left hand side of the browser with specific behavior. Turns out the only way to really accomplish what I wanted, was to code it up myself. Here’s how:
[requirements]

WordPress blog

Access to your wordpress theme files

Social media icon sprite

[step 1] Open your functions.php file in /wp-content/themes/yourthemename/ and at the bottom of the file add the following two functions:

Save your functions.php file and ensure that your blog still works by refreshing the homepage. You should not see any changes to your homepage yet because we haven’t called the functions we just created yet. If however you see a php error or a blank page, go back to your functions.php file and make sure you haven’t mistakenly inserted the code above within another existing function in that file.

[step 2] Find/create yourself a nice social media icon sprite and upload it to /wp-content/themes/yourthemename/images. We’ll be using CSS to grab the appropriate part of this sprite to create our icons. If you are unfamiliar with CSS and sprites and/or how to use them together, checkout SixRevisions.com.

[step 3] Create some CSS for the div id’s you created in your my_socialbar functions so that we can style our floating socialbar links with some button images from our sprite. To do this open up /wp-content/themes/yourthemename/style.css in an editor and at the bottom of the file add your changes (see sample from my site below). NOTE depending on your own sprite this code will vary.

To get our media buttons to show up, we’ll need to call our my_socialbar() function somewhere in single.php or header.php. I chose to call mine just in the opening main div in header.php as follows:

[html]
<div id="main">
<?php my_socialbar(); ?>
[/html]

[step 4] Now when you refresh your blog, you should have some social media buttons floating, on the left hand side of our screen. It’s time to add some nifty behavior to those buttons using jquery. If your theme header doesn’t already include jquery, here’s how to add it. Open up /wp-content/themes/yourthemename/header.php and add/replace the following line in your scripts section:

[step 5] Now lets create a javascript for the behavior of the social buttons. Mine move into full view when a pointer is hovered over a social media button. Save this javascript as social.js in your /wp-content/themes/yourthemename/scripts folder.

Comments for: Add a social bar to wordpress

I came from 6wunderkinder.com to your site cause i saw the social bar on their site and liked it so much i wanted to find out how to have them on my site as well 🙂

I checked the site again but couldnt find them icons anywhere on 6wunderkinder – so i like to ask you if those icons are freely available – and if so if you could point me to the right direction to find them.

There are a couple of things I would like to add though,
1.
needs to be closed. so put a at the end.

2. div id main most probably would be used by the theme, so you had better make it main1 and copy and paste main id as main1 in css. it is not very important but because of validation i though it would work well.