Help integrating these social share buttons into header?

[PRLuv]

Hi all,

I'm trying to modify this and everything I do screws it up just a bit.

On my current page ne1up dot NET, in the top upper right, you can see 'home, sign up, contact.' I already have these links pretty much right under there as large buttons, so they're redundant and I don't want them.

What I want instead of them, is the strip of Like-Tweet-+1 icons used at the bottom of picresize dot com website.

I will paste what I believe to be the relevant header code here:

<div class="header">
	<div>
		<div class="center">
			<div class="topLinks"><?php wp_nav_menu(array('menu' => __('Top Links', 'saas'), 'theme_location' => 'top')) ?></div>
			<h1 id="logo"><a href="<?php echo get_option('home') ?>/"><img src="<?php bloginfo('template_url') ?>/images/logo.png" alt="<?php bloginfo('name') ?>" /></a></h1>
			<div class="nav"><?php wp_nav_menu( array('menu' => __('Main Nav', 'saas'), 'theme_location' => 'main', 'link_before' => '<span>', 'link_after' => '</span>')) ?></div>

And what looks like the code from picresize that I'd really like to integrate cleanly:

<li><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?app_id=157315981004671&amp;href=http%3A%2F%2Ffacebook.com%2Fpicresize&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;"></iframe></div></li>
<li><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" id="twitterShareButton">Tweet</a>
<script type="text/javascript"><!--
	var o=document.getElementById("twitterShareButton");
	o.setAttribute("data-url","http://www.picresize.com");
	o.setAttribute("data-text","I use PicResize to resize and crop my pictures! #picresize");
	o.setAttribute("data-count","horizontal");
	o.setAttribute("data-via","picresize");
	//--></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div></li>
<li><div class="google"><g:plusone size="medium" href="http://www.picresize.com"></g:plusone></div></li>
<!--                    <li id="lovepicresize"><a href="ilovepicresize.php" title="Click here if you love Pic Resize!"><img src="/picresize-assets/gfx/icon_heart.gif" alt="I love Pic Resize!" align="middle" border="0" title="Click here if you love Pic Resize!" /></a></li>-->
</ul>                </div>

Any help would be appreciated. I know I'll have to make all the links and what not my own, but I'm just trying to get it up there in that same place, looking clean...and every way I try to put that code in there in place of those 'menu' links, I get something really scrambled...

THANK YOU!

[fize4ever]

Go to the Twitter button page, the Facebook like page, the Google 1+ page, make a sweet button out of each, follow the instructions on how to make each of them work in your themes and replace your old navigation with them.

Let me know if you get any errors in the process.