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:

bitly function – To shorten urls for Twitter (NOTE: No longer necessary because twitter shortens submitted URLs automatically)

[php]
//START bit.ly my links
function bitly($link)
{ if ($link == ‘site’)
$url = get_bloginfo(‘url’);
else
$url = get_permalink(); //get wordpress permalink
$login = ‘davidvielmetter’; //bit.ly username
$apikey = ‘R_111111111111111111111111ee’; //bit.ly apikey
$version = ‘2.0.1’;

//build a url
$bitly = ‘http://api.bit.ly/shorten?version=’.$version.’&longUrl=’.urlencode($url).’&login=’.$login.’&apiKey=’.$apikey.’&format=’.$format;

//get short url from bit.ly
$response = file_get_contents($bitly);

//echo short bitly url
$json = @json_decode($response,true);
echo $json[‘results’][$url][‘shortUrl’];
}
//END bit.ly my permalinks
[/php]

my_socialbar function – To generate social media links we can assign to buttons

[php]
//START the Social bookmark bar
function my_socialbar() { ?>
<div id="social-bar">

<a id="facebook-icon" class="pngfix" title="Facebook" href="http://facebook.com/share.php?u=<?php if (is_home()) echo site_url(); else echo the_permalink(); ?>&amp;amp;t=<?php if (is_home()) { echo urlencode(bloginfo(‘name’)); ?> | <?php urlencode(bloginfo(‘description’)); } else echo urlencode(the_title(”,”, false)) ?>" style="margin-left: -17px;">Facebook</a>

<a id="twitter-icon" class="pngfix" title="Twitter" href="http://twitter.com/share?url=<?php if (is_home()) { echo site_url(); ?>&amp;text=<?php echo urlencode(bloginfo(‘name’)); ?> | <?php urlencode(bloginfo(‘description’)); ?> <?php } else { echo the_permalink();?>&amp;text=<?php echo urlencode(the_title(”,”, false)); } ?>" style="margin-left: -17px;">Twitter</a>

<a id="digg-icon" class="pngfix" title="Digg" href="http://digg.com/submit?url=<?php if (is_home()) echo site_url(); else echo the_permalink(); ?>" style="margin-left: -17px;">Digg</a>

<a id="delicious-icon" class="pngfix" title="Delicious" href="http://del.icio.us/post?url=<?php if (is_home()) { echo site_url();?>&amp;amp;title=<?php echo urlencode(bloginfo(‘name’)); ?> | <?php urlencode(bloginfo(‘description’)); } else { echo the_permalink(); ?>&amp;amp;title=<?php echo urlencode(the_title(”,”, false)); } ?>" style="margin-left: -17px;">Delicious</a>

<a id="stumble-icon" class="pngfix" title="StumbleUpon" href="http://stumbleupon.com/submit?url=<?php if (is_home()) { echo site_url();?>&amp;amp;title=<?php echo urlencode(bloginfo(‘name’)); ?> | <?php urlencode(bloginfo(‘description’)); } else { echo the_permalink() ?>&amp;amp;title=<?php echo urlencode(the_title(”,”, false)); } ?>" style="margin-left: -17px;">StumbleUpon</a>

</div>
<?php }
//END the Social bookmark bar
[/php]

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.

[css]
/* Social Bar */
#social-bar { height: 305px; width: 6px; position: fixed; left: 0px; top: 50%; margin-top: -195px; z-index: 1000 }
#social-bar a { display: block; overflow: hidden; text-indent: -8793px; height: 41px; width: 41px; border:none; margin-bottom: 3px; margin-left: -17px }
#social-bar #facebook-icon { background: url(images/sprite.png) -6px -78px }
#social-bar #twitter-icon { background: url(images/sprite.png) -6px -119px }
#social-bar #rss-icon { background: url(images/sprite.png) -6px -160px }
#social-bar #email-icon { background: url(images/sprite.png) -6px -201px }
#social-bar #stumble-icon { background: url(images/sprite.png) -6px -242px }
#social-bar #delicious-icon { background: url(images/sprite.png) -6px -283px }
#social-bar #digg-icon { background: url(images/sprite.png) -6px -324px }
#social-bar #tooltip { position:absolute; background: #000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:4px 8px 4px 8px; color:#fff; font-size:11px; font-weight:bold; display:none; white-space: nowrap; }

* html #social-bar { position: absolute; }
* html #social-bar a { margin: 6px 0 0 -17px; }
[/css]

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:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>

[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.

[javascript]
$(function() {
// Social Bar Hover Effect
$(‘#social-bar a’).hover(function() {
$(this).stop().animate({‘margin-left’ : ‘0’}, 200);
}, function(){
$(this).stop().animate({‘margin-left’ : ‘-17px’}, 200);
});

// Social Bar Tooltips
$("#social-bar a").hover(function(e) {
var y = $(this).offset().top – $("#social-bar").offset().top;
var content = $(this).attr(‘title’);
var id = $(this).attr(‘id’);

$(this).attr(‘title’, ”);

$("#social-bar").append("<div id=’tooltip’>" + content + "</div>");
$("#social-bar #tooltip").css(‘opacity’, 0.7).css(‘top’, y + 8).css("left", 50).data(‘trigger’, id).fadeIn();
},
function() {
var trigger = $("#social-bar #tooltip").data(‘trigger’);
var content = $("#social-bar #tooltip").html();
$(‘#’ + trigger).attr(‘title’, content);
$("#social-bar #tooltip").remove();
}
);

});
[/javascript]

[step 6] Now we’ll need to modify the /wp-content/themes/yourthemename/header.php once more to include our newly created js file from [step 5].

[html]<script src="<?php bloginfo(‘template_url’); ?>/scripts/social.js" type="text/javascript"></script>[/html]

That’s really all there is to it. You should now have a nifty floating social button bar that moves in and out on mouse hover.