How To Use The Tweet Button On Tumblr

I must admit, it took me a while (lots of trial and error) to figure out how to properly implement Twitter’s Tweet Button on Tumblr. Hopefully this article will help you help you do the same.

Step 1
Head over to Twitter’s website. Under “Goodies” you will find the Tweet Button link. For brevity’s sake, just click this direct link.

Customize the Tweet Button to your liking. Choose your button type: vertical, horizontal or no count. Even recommend a person or two to follow.

Step 2
Copy the code that Twitter generated and paste it into your favorite text editor. We’re going to need to do a bit of hacking to make it work how we want it to. You should have something similar to what’s below:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="andre_io">
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Add the following parameters into the hyperlink code:

data-url="{ShortURL}" data-counturl="{Permalink}"

Your code should end up looking like this:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-counturl="{Permalink}" data-count="horizontal" data-via="andre_io">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

What we just did was ensure that our Tweet button was linking to our post instead of to our homepage. We do this by telling Twitter to use the post’s short url while referencing the full permalink. Referencing the full permalink allows for our short url to properly count towards our post’s total retweet count.

Step 3
This step is optional. Here we define what text we want the retweet to default to. The main challenge that we must face is that each type of post (text, photo, video) uses a different tag to identify its title. In fact, some types of posts don’t even have titles!

Once again, we will be adding this bit of code to our hyperlink.

For text posts and chats add:

data-text="{Title}"

The complete code for text posts and chats should look like this:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-counturl="{Permalink}" data-text="{Title}" data-count="horizontal" data-via="andre_io">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

For links add:

data-text="{Name}"

The complete code for links should look like this:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-counturl="{Permalink}" data-text="{Name}" data-count="horizontal" data-via="andre_io">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

For photos, photosets, videos, quotes and audio posts that have no title we must improvise and add something generic:

data-text="Check this out"

The complete code for photos, photosets, videos, quotes and audio posts should look something like this:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-counturl="{Permalink}" data-text="Check this out" data-count="horizontal" data-via="andre_io">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Step 4
Now all we have left to do is copy/paste our snippets of html into our theme code.

Under each post type in your code copy/paste the appropriate snipped of html. For example, under posts of type “stat-text” we would copy/paste the snippet of html that we tweaked in Step 3 for text posts.

That’s it! Your all done. Feel free to give me a retweet if you found this article useful.