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;
	var facebook_app_id = '161897763967073';
	var facebook_url = 'https://www.facebook.com/themergency';
	var twitter = 'themergency';
	var $target = $("#social_target");
	//add loading class
	$target.addClass("socprog_loading");
	var $ul = $('<ul class="socialbuttons"></ul>');
	$target.append($ul);
	//add facebook follow button
	var $facebook_li = $('<li/>')
		.append('<iframe src="//www.facebook.com/plugins/follow.php?href='+encodeURIComponent(facebook_url)+'&layout=button_count&show_faces=false&colorscheme=light&font&width=100&appId='+facebook_app_id+'" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px;" allowTransparency="true"></iframe>')
		.appendTo($ul);
	//add tweet follow button
	var $twitter_li = $('<li/>')
		.hide()
		.append('<a href="https://twitter.com/'+twitter+'" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @'+twitter+'</a>')
		.appendTo($ul);
	//load twitter
	$.getScript('http://platform.twitter.com/widgets.js', function() {
		$twitter_li.show(); //show it
	});
}