Add That Nifty ReTweet Button on a WordPress.com Blog Post

WordPress.com offers you your own free space to keep your small business blog until it is time for you to have your own self-hosted WordPress site setup. I’d like to share some tips on making this work for you, even if you aren’t the most tech savvy blogger out there.

Sometimes to add a little “POP!”, you have to learn a CSS trick or two.

  1. Make sure you are in the “HTML” view of your post. (See ScreenShot)
  2. Remember you must be in the HTML view to add this code or else it will not work!

    This is the code to edit and add into every single post that you want to be retweetable:

    <div style="float: right; margin-right: 20px;"><a href="http://api.tweetmeme.com/share?url=URLsource=TWITTERID" target="_new"><img src="http://api.tweetmeme.com/imagebutton.gif?url=URL" alt="Tweet: POST TITLE" width="51" height="61" /></a></div>
    • Where is says URL: make sure you put in the full address of your post, not just the address of your homepage. When people tweet about a specific post, you want to make sure you help them look credible and send their interested friends or coworkers to the right place! Do not add any extra spaces or characters to the code, this could cause it to not function properly or at all.
    • Where it says TWITTERID: you can type in your own twitter username there. The ID you type in there will show us as who you are “RT”ing.
    • For all alt tags, all you need to type in place of POST TITLE is the title of your post. When visitors hover over your retweet image, they will see: Tweet: My Newest Blog Post.
    • You can past these at the top or bottom or in the middle of any post. It’s best to wait till you are finished and ready to publish the post before dealing with adding this button. (Trust me.) :)
    • You can make this image show up on the right side or left side of your post by changing the “float”. As you can see, I usually make my buttons float right, but it’s a personal preference. If you want it to “float” left, simply change the code: <div style=”float: right …to… <div style=”float: left …etc.

    If you’d like to add a little something extra to track your clicks, you can even setup an account on bit.ly and add the API in this code to track your blogpost being tweeted with a URL shortener.

    <div style="float: right; margin-right: 20px;"><a href="http://api.tweetmeme.com/share?url=URL&service=bit.ly&service_api=YOUR-API-CODE-FOUND-IN-YOUR-BIT.LY-ACCOUNT-SETTINGS&source=TWITTERID" target="_new"> <img src="http://api.tweetmeme.com/imagebutton.gif?url=URL" alt="POST TITLE" width="51" height="61" /></a></div>

    This code probably works with many other url shorteners with APIs. If you have another type and test this, please stop by and let us know if it worked!

    If it looks confusing, don’t worry, this is why there are plugins for self-hosted WordPress to automatically write this code for you. However, while your blog is still new, it’s ok to add this code to your favorite posts to make sure they are easily sharable.

  3. Tweet: Add That Nifty ReTweet Button on a WordPress.com Blog Post

    Voila! You’ll get your fancy retweet button! ->