Tuesday, March 8, 2011

How to Add A Tweet Button to Your Blogger Posts

After reading this post on Dear Crissy, I decided to figure out how to add a Tweet button to my posts so readers can share on Twitter quickly.  After a little googling and a lot of trial and error, I have it working!

My blog is on Blogger, so if you’re using Wordpress or any other blogging platform this probably won’t help you.  And I’m by no means an expert on html or blog customization – I mostly just try things out and cross my fingers!  Make sure before you make any changes to your template you save a backup copy to your computer.  Enough disclosures, here’s what worked for me!

3 8 11 tweet button 1

First, log into twitter and click on the “resources” link, which is on the right side of your twitter home under all of the recommendations.

3 8 11 tweet button 2

Click on “create tweet button”.

3 8 11 tweet button 3

Choose how you want your button to look, then make sure your twitter handle is in the box in step 2.  You can add another handle to all your tweets if you’d like to – I didn’t.

3 8 11 tweet button 4

Your code will show up in the text box on the bottom right, in step 3.

3 8 11 tweet button 5

Now open up the design section of your blog and click the “Edit HTML” link at the top of the page, under the tabs.  Now click the “Expand Widget Templates” box.

3 8 11 tweet button 6

Press Control+F, which will open up a little search box at the top of your page.  Type “<data:post.body/>” (without the quotes) into the Find: field, which should automatically bring up that line of code, highlighted, in the text box of your design page.  By the way, I found out where to post the code from this blog post.

3 8 11 tweet button 7

You’ve backed up your template, right?  Okay then, go back to your Twitter page and copy the code that was generated for your button.  Paste it into the template for your blog right above the code we searched for on the last step.

3 8 11 tweet button 8

Click the orange “Save Template” button.  View your blog and marvel at your new Tweet button!

For some reason pretty much all of my posts say they’ve been tweeted twice, which I know isn’t the case.  Hopefully it works itself out, maybe it’s just a syncing issue?

Try it out and let me know if it works for you!

18 comments:

  1. thank you! i had read a tutorial before, but without being able to search i couldn't find where the code was supposed to go. this was perfect!

    ReplyDelete
  2. I can't remember where I read about that search function (maybe the article
    I linked to?) but isn't it so handy? How did I not know about this before?

    ReplyDelete
  3. Thank you! Great tutorial. I read Dear Crissy's post too but it wasn't for blogger and never really looked into anymore.

    ReplyDelete
  4. Yay!!! It worked for me! Thank you for the detailed instructions :)

    ReplyDelete
  5. It looks great, I'm so happy it worked for you!

    ReplyDelete
  6. Thank you so so much for the tutorial, I've never played around with html before but I was able to add a tweet button to my blog today!

    ReplyDelete
  7. I'm glad it worked for you! I've learned just enough html to be dangerous -
    one of these days I'm going to break my blog! :)

    ReplyDelete
  8. Thanks for the tutorial! I found your post by Googling for how to do a Twitter button. I just used your instructions and I think it's working...

    ReplyDelete
  9. Thank you! Thank you! Thank you! Now, if you could just help me figure out why the videos I capture on my digital camera can't off said camera and posted to Facebook and my blog. (I am SO technologically un-advanced.) THANK YOU!

    ReplyDelete
  10. If you find someone to teach you the video stuff, come back and tell me
    'cause I'd love to know too! :)

    ReplyDelete
  11. oh. my. gosh!! thank you sooooo much! you have made this html moron very very happy today! you rock like kiss!!

    ReplyDelete
  12. I can't ask for a better compliment than that! :) I'm so glad it worked for
    you!

    ReplyDelete
  13. you'll notice, though, that if you're trying to RT a post from someone's main page... say for instance you go to bobalookids.com and then click on the Tweet button on any of your posts and you will see that it doesn't RT your post URL... it just RT's your blog URL. People actually have to click into your post to and then click on the Tweet button for your post URL to show up.

    ReplyDelete
  14. Thanks for the tutorial...done! :)

    ReplyDelete
  15. You're a genius and your explanation made it so simple. Thanks a million!

    ReplyDelete
  16. What a compliment! :) I'm glad it worked for you!

    ReplyDelete
  17. Thanks! I always forget that others being able to share is an important part of boosting ones blog!

    ReplyDelete

Thanks for commenting - I love to hear from you!

Related Posts Plugin for WordPress, Blogger...