Social Buttons for Tumblr , full code! – like, tweet, pin, g+ and SU

Hi at this time i made some social buttons for tumblr using the Basic Variables from tumblr Dev with the standard codes of Twitter, Facebook, Google +, Pinterest and StumbleUpon, so i´m bringing to you the codes!!
Hellyeah!!

Let’s Start with Basic Variables that i’ve used from Tumblr:

The permalink for a post.
Example: “http://sample.tumblr.com/post/123″
{Permalink}

The caption for the post.
{Caption}

And the URL for the photo of the post. No wider than 500-pixels.
{PhotoUrl-500}

So get the Basic Variables and put them inside of the social network´s codes.

Like Twitter:

<a href="https://twitter.com/share" data-url="{Permalink}" data-counturl="{Permalink}" data-text="{Caption}" class="twitter-share-button" data-count="vertical"></a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

Facebook:

<iframe style="border: none; overflow: hidden; width: 83px; height: 90px;" src="//www.facebook.com/plugins/like.php?href={Permalink}&amp;send=false&amp;layout=box_count&amp;width=83&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=346464335411868" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Pinterest:

<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url={Permalink}&amp;media={PhotoUrl-500}&amp;description={Caption}"><img title="Pin It" src="//assets.pinterest.com/images/PinExt.png" alt="" border="0" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Google +:

<div class="g-plusone" data-size="tall" data-href="{Permalink}"></div>

<!-- Place this tag after the last +1 button tag. --><script type="text/javascript">// <![CDATA[
  (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>

And StumbleUpon:

<su:badge layout="5" location="{Permalink}"></su:badge>
<script type="text/javascript">// <![CDATA[
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
// ]]></script>

Now you need to locate the post variables and insert your codes between them (anywhere in between these variables).
{block:Posts}
Your social buttons here
{/block:Posts}

You could do some layers with css or tables with your own customization or use the code below.

<div class="social4i" style="height:69px;">
<div class="social4in" style="height:69px;float: right;">


<div class="socialicons s4twitter" style="float:left;margin-right: 10px;"><a href="https://twitter.com/share" data-url="{Permalink}" data-counturl="{Permalink}" data-text="{Caption}" class="twitter-share-button" data-count="vertical"></a></div>


<div class="socialicons s4fblike" style="float:left;margin-right: 10px;">
<iframe src="//www.facebook.com/plugins/like.php?href={Permalink}&amp;send=false&amp;layout=box_count&amp;width=83&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=346464335411868" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:83px; height:90px;" allowTransparency="true"></iframe>

</div>


<div class="socialicons s4plusone" style="float:left;margin-right: 10px;">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall" data-href="{Permalink}"></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>


<div class="socialicons s4custombtn-1" style="float:left;margin-right: 10px;"><a href="http://pinterest.com/pin/create/button/?url={Permalink}&#038;media={PhotoUrl-500}&#038;description={Caption}" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It"/></a><br/>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div>


<div class="socialicons s4custombtn-2" style="float:left;margin-right: 10px;">
<su:badge layout="5" location="{Permalink}"></su:badge><br/>
<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script></div>



</div>
</div>

That´s all !!!

I hope this article helps you!

Regards!!