codigo de botones de compartir

[alfredo11101]

hola buenas
como extraer codigo de botones de compartir
he visto esta plantilla esta bien pero no me gusta mucho,
fabulous-themexpose.blogspot.com.es/2014/03/praesent-vitae-quam-vitae-arcu-posuer.html

lo que me ha gustado de la plantilla son los botones de compartir del final de cada posts(como el que viene en el link de arriba)
dejo una captura para mas detalle http://i.imgur.com/A3OvI4e.png


lo he intentado he extaredo unos codigo pero no funcionan si quedan asi los botones http://i.imgur.com/xqQYfyN.png
el codigo que habia extraedo era este

Codigo CSS es esto;

Código HTML:

/* CSS Slide Share Button */
      #button-count-share{width:100%;overflow:hidden;background:transparent;margin:0 auto;padding:3px;margin-top:15px;margin-bottom:15px;}
      #button-count-share span{float:left;position:relative;font-size:13px;color:#fff;margin:12px 5px 12px 5px}
      .button-share{background:#f0f0f0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:140px;margin:4px;border-radius:1px;}
      .slide-share{z-index:2;display:block;height:100%;left:0;position:absolute;width:140px;margin:0}
      .slide-share p{font-family:'Open Sans';font-weight:400;color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
      .button-share .slide-share{transition:all 0.4s ease-in-out}
      .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
      .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
      .google #___plusone_0{width:90px!important;top:10px;right:10px;position:absolute;display:block;z-index:1}
      .facebook .slide-share{background:#4f79bc}
      .twitter .slide-share{background:#63cef2}
      .google .slide-share{background:#f36261}
      .facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share{left:140px;opacity:0.6;}

Codigo HTML esto;

Código HTML:

<div id='button-count-share'>

<div id='social_share'>
<div class='ct-wrapper' style='width: 670px;margin-bottom: 20px;;'>
<div id='share-buttons'>
<div class='facebook2 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'><p> facebook </p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='fa fa-twitter'>
</i>
</i>
<div class='pslide'>
<p> twitter </p>
</div>
 <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>
                 
                </a>
                <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='google share-button'>
<i class='icon'>
<i class='fa fa-google-plus'>
</i>
</i>
<div class='pslide'>
<p> google+ </p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
                <script type='text/javascript'>
                  window.___gcfg = {lang: 'id'};
                                    (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>
<div class='facebook1 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'><p> fb share </p>
</div>
  <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
</div>
</div>
</div>



        
        </div> 

Nose que estoy haciendo mal.
programadores alguien sabe algo. gracias desde ya