This demo shows a Foobar with some social buttons. You can duplicate this by setting the following values when editing your foobar:

Set the widths as follows:

Left : 500px; Right : 0; Center : *

Set the left Html to:


<div id="social_target"></div>

Set the foobar custom CSS to:


ul.socialbuttons { height: 32px; padding: 0 !important; margin:0 !important; }
ul.socialbuttons li { padding:6px !important; float: left; list-style: none !important; }

Then finally add this javascript to the custom JS metabox


setup_social_buttons();

function setup_social_buttons() {

var $ = jQuery;

//replace this URL with whatever URL you want shared.
var url = 'http://themergency.com/foobar-wordpress-plugin/';
//uncomment the line below and comment out the above to set the URL to the current URL
//var url = window.location;

//replace this with your facebook app ID
var facebook_app_id = '125102657580278';

var $target = $("#social_target");

//add loading class
$target.addClass("socprog_loading");

var $ul = $('<ul class="socialbuttons"></ul>');

$target.append($ul);

//add facebook HTML
var $facebook_li = $('<li/>')
.append('<iframe src="http://www.facebook.com/plugins/like.php?app_id='+facebook_app_id+'&href='+encodeURIComponent(url)+'&send=false&layout=button_count&width=90&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>')
.appendTo($ul);

var tweet = 'FooBar - the unobtrusive jQuery notification bar that doesnt suck';
var twitter = 'themergency';

//add tweet HTML
var $twitter_li = $('<li/>')
.hide()
.append('<a href="http://twitter.com/share" class="twitter-share-button" data-url="'+url+'" data-text="'+tweet+'" data-count="horizontal" data-via="'+twitter+'">Tweet</a>')
.appendTo($ul);

//load twitter
$.getScript('http://platform.twitter.com/widgets.js', function() {
$twitter_li.show(); //show it
});

//add google+1 HTML
var $google_li = $('<li/>')
.hide()
.append('<g:plusone size="medium" href="'+url+'" count="true"></g:plusone>')
.appendTo($ul);

// Load Google Plus
$.getScript('https://apis.google.com/js/plusone.js', function() {
$google_li.show();
});

var $stumble_li = $('<li/>')
.hide()
.append('<div id="socialprogress-su"></div>')
.appendTo($ul);

// Load StumbleUpon
$.getScript('http://www.stumbleupon.com/hostedbadge.php?s=2&r='+url+'&a=1&d=socialprogress-su', function() {
$stumble_li.show();
});

var $linked_li = $('<li/>')
.hide()
.append('<scr'+'ipt type="in/share" data-url="'+url+'" data-counter="right"></scr'+'ipt>')
.appendTo($ul);

// Load LinkedIn
$.getScript('http://platform.linkedin.com/in.js', function() {
$linked_li.show();
});

}