<div style="clear:both;overflow:hidden">
<style type="text/css">
.facebook { float: left; margin-left: 6px; margin-right: 10px; }
.twitter { float: left }
.pinterest { float: left }
</style>
<span class="twitter">
  <a href="http://twitter.com/share"{% if template == 'product' or template == 'article' or template == 'blog' %} data-url="{{ shop.url }}{{ social.url }}"{% endif %} data-text="{% if template == 'product' %}{{ product.title | escape }} by {{ product.vendor | escape }}{% elsif template == 'blog' %}{{ social.title | escape }}{% else %}{{ page_title | escape }}{% endif %}" class="twitter-share-button" data-count="none">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</span>

<span class="facebook">
  <iframe src="http://www.facebook.com/plugins/like.php?href={{ shop.url }}{{ social.url }}&layout=button_count&show_faces=true&width=450&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:30px" allowTransparency="true"></iframe>
</span>

<span class="pinterest">
<a href="http://pinterest.com/pin/create/button/?url={{ shop.url }}{{ social.url }}&media={% for image in product.images %}{% if forloop.first %}{{ image | product_img_url: 'large' }}{% endif %}{% endfor %} 
&description={{ product.title }}" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
</span>
</div>