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:

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="http://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.

January 26, 2011

Related Posts

7 comments found

Comments for: Add a social bar to wordpress

  1. Ajay Jamwal

    Hey dude,

    Thats great feature …..

    But how could I do the same in .NET website. ?

    Any help .

    Ajay

  2. Mike

    Hey,

    ” I got mine from 6wunderkinder.com”

    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.

    Thanks
    Mike

    1. Post author: 
      David Vielmetter

      6wunderkinder is copyrighted now so the icons are no longer available.

  3. David

    hey david,
    thanks a lot for the guidance. i served me well.

    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.

  4. Pingback: Custom Google Plus One Button | David Vielmetter

  5. daddy design

    good post. Have you tried social toolbar plugins like: social toolbar pro? http://socialtoolbarpro.com

  6. jagat

    you should visit this site http://www.scimad.com for a good look and take some inspiration

Leave a Reply

Your email address will not be published. Required fields are marked *