Custom element messes up on website.

I created this code on a html edit site but when I place on my website the buttons seems to get lost. Im not so good with coding so any help is appreciated.

Code is below.

<a onclick="window.open('http://www.vst4free.com/plug_ins.php?win32=Clap_Drums_VSTi_FREE.exe','newwin');" href="http://adf.ly/1451508/drumkit"><img alt="" src="http://studio-heads.net/wp-content/uploads/2013/07/Download.jpg" />

<div style="position:absolute;
left:390px;
top:150px;"><!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall" data-href="https://plus.google.com/103108034209481076738"></div>

<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<div style="position:absolute;
left:120px;
top:0px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FStudio-HeadsNet%2F301091339933540&send=false&layout=box_count&width=450&show_faces=false&font=verdana&colorscheme=light&action=like&height=65&appId=142795379250567" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

<div style="position:absolute;
left:-115px;
top:70px;"><a href="https://twitter.com/Studio_Heads" class="twitter-follow-button" data-show-count="false">Follow @Studio_Heads</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></a>