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


function setup_social_buttons() {

var $ = jQuery;

//replace this URL with whatever URL you want shared.
var url = '';
//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

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


//add facebook HTML
var $facebook_li = $('<li/>')
.append('<iframe src="'+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>')

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

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

//load twitter
$.getScript('', function() {
$; //show it

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

// Load Google Plus
$.getScript('', function() {

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

// Load StumbleUpon
$.getScript(''+url+'&a=1&d=socialprogress-su', function() {

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

// Load LinkedIn
$.getScript('', function() {