AmericanAnDerTU

So the Tweet Button that Twitter released yesterday is a pretty neat little toy. It is an absolute cinch to create yourself, but the problem that people always have is they don’t know how to insert the code themselves. Now, I’ve dabbled in HTML a little bit but I am by no means a master of it, I can’t code it myself, but I can read it and understand it (little tools like Firebug also help a lot when trying to decipher the code).

My blog here is my own little playground. I really should probably update the description to reflect that, but that’s another topic for another day. The best teacher is experience, so let’s get some experience…

What you will want to do is go to your blog and click the Customize button in the top right corner. Once you’ve done that, go to Theme and click “Use Custom HTML” if you haven’t already. If you’re already seeing some HTML code when you click that Theme button along the top row - good job, you’ve already got some experience.

Now scroll through your code here (best to copy it into a simple text editor of your choice) and find the section that looks like the picture below:

That section of code called “{block:Text}…{/block:Text}” will be found AFTER your header, so you want to look AFTER the </head> tag in your code. Once you’ve done that, simply copy the code that Twitter produces for you from the Tweet Button page and slip it in right where I’ve inserted it.

Obviously, if you are using your blog to also share things like chats, photos, videos, etc. then you will have to find the appropriate places in those blocks and put the button there. After a quick glance at my code there is a <div class=”body”> for Quotes and Links, but for the Tumblr postings that do not have a <div class=”body”> then you will have to experiment and see what works.

The only problem that I have with my solution is that the button appears at the bottom of every post on the main blog page and when you click this button, the link generated by the button is for the main page and not for the blog entry itself. However, if you click the title of the blog and THEN scroll down to the button, the link generated now will be for that blog post. You can see what I mean when you click the button yourself and the title generated in the tweet is either only “AmericanAnDerTU” or “AmericanAnDerTU / BLOG TITLE”.

Should anyone come up with a better solution, please contact me and let me know and I’ll include it in this blog post.

Many thanks to one of the comments posted here on the blog. After the “data-via” section of code, simply insert the following and your Tweet Button will now work like a charm: data-url=”{permalink}” data-text=”{Title}”.

That’s all that you have to do, nothing more. Try it out and see if it works!