Add a Twitter Button to your Tumblr Blog


We already gave you a tutorial to add a Facebook Like Button to Tumblr.  This time we’ll show you how to embed a twitter button to your Tumblr blog.  It’s fairly easy since it uses the official Twitter code to work, and you just need to paste it within your Tumblr theme html.

Bear in mind that this is not a twitter “follow us” button, that one is the equivalent of the fan box for facebook.

Insert a Twitter Share Button in your Tumblr Blog.

  1. Get the Twitter Button Share Code for Tumblr here. Choose the format you want.  This is the twitter button code that will always work in your Tumblr

  2. <a href="http://twitter.com/share" class="twitter-share-button" data-url="{ShortURL}" data-text="{Title} |" data-count="none" data-via="canyon">Tweet</a>


  3. Now, where you should insert the twitter button?. As we said several times each time that you need to embed a button, it depends on the Tumblr Theme, but basically, the code should go always before each post type closing tag (they are listed below). Go to customize Theme >> Edit HTML, look for each one of them and always paste the twitter button before the tag. This doesn’t mean that it should go right before, since there could be more code, like the ones for notes and tags, that could make the button position look horrible.

  4. {/Block:Photo}
    {/Block:Photoset}
    {/Block:Text}
    {/Block:Quote}
    {/Block:Link}
    {/Block:Chat}
    {/Block:Audio}
    {/Block:Video}
    {/Block:Answer}


  5. But wait, you also need to paste the following script either in your description box or before the closing head tag (even though the twitter button page doesn’t even mention it, it could bring rendering problems.)

  6. <script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>


  7. We pasted the Twitter Code right before the tag {PostNotes} , for each of the posts types, it should most of the time be there since it shows the Likes and Reblogs you get. The key thing is that you try until the button shows right below your post content but before the notes.

If you can’t manage to get it to work, leave a comment with your theme and tumblr blog and we’ll help you insert the twitter button

Want more buttons to bring targeted visitors to your Tumblr Blog?. The pinterest button for Tumblr seems to be the one that works the best for photo blogs, and the google plus button for tumblr works well on those more focused on content.

58 Responses to "Add a Twitter Button to your Tumblr Blog"

Add Comment
← Older Comments
  1. Verden Designs

    December 21, 2012 at 9:11 pm

    I am not super tech savvy, and since I am using a special theme, I am not sure how to properly put in a Twitter and Facebook icon link. My theme is Color Shades by gondava. I look forward to hearing from you as soon as possible.

    [Reply]

  2. joe

    January 7, 2013 at 6:44 am

    i dont know where to put the code in my html and my theme is chunk

    [Reply]

  3. Zinhle

    February 10, 2013 at 3:58 pm

    Hi I’ve been struggling to copy the code to my HTML , I really need your assistance, my blog URL is the above mentioned and my Twitter handle is ThatDarn_Zinhle. And my theme is Kalalalani

    [Reply]

  4. Elin

    March 11, 2013 at 9:53 am

    I cannot make it work either… the tweet end up in the bottom left corner of my blog..!
    Would love to get some help from you!
    My theme is “quite big”.

    Best regards.

    [Reply]

  5. Colson Engelberger

    March 12, 2013 at 2:52 am

    I’m using a royal chameleon theme and I am so confused. Please help me!

    [Reply]

  6. Zoe

    March 19, 2013 at 11:42 am

    Hi,
    I dont know where to post the code. Im using the Astronaut theme

    Zoe

    [Reply]

← Older Comments

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>