Saturday, May 2, 2009

Tutorial -Add a Tweetememe Retweet Button to your Blog

Tutorial -Add a Tweetememe Retweet Button to your Blog
Ok as you all know I'm having this very impressive Twitter Retweeet button on my blog, and getting mails constantly asking me to share this hack. Its been hard to help everyone install the widget so i decided upon writing this easy tutorial. Twitter is an excellent source for blog traffic that makes this a must install widget on your blog!



Go to Tweetmeme.com

Dashboard > Layout > Edit HTML and check the "Expand Widget Templates" option.

Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors :)

Firstly be clear if you want the full version or the Compact version of this Retweet button.
Tutorial -Add a Tweetememe Retweet Button to your Blog
For the Full version of the Retweet button:

Firstly Locate this code in your blogger template.

<data:post.body/>

And then copy and paste the below code just above the data:post.body tag


<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>


Now the customization part:
1.<div style='float:right; aligns the button to the right. set it as left if you want it on the left hand side of the post.
2.the above code was pasted above the <data:post.body/> tag. So if you want the retweet button in the bottom section of your post. Place the code below <data:post.body/>

Now for the Compact style of retweet button.

Instead of the above set of codes, paste the following for compact version.

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>


You can paste it either above <data:post.body/> or below as per your liking. The customization part is same as the Full version of the Tweetmeme retweet button. Any doubts implementing this hack? Do drop a comment here..

Get our expert testking 70-663 study guide and testking 646-229 design tutorials to prepare by successful designers to help you learn the best web designing practices. Become expert designer with testking 1z0-051 course.

35 comments:

  1. Hi chetz again a nice tutorial!!!I would love to try this in my test blog first and then add to my blog :)hey how come you come up with such amazing tutorials and hacks for bloggers!you rock!!!waiting for more tutorials on hacks and tricks for bloggers from you! :)

    ReplyDelete
  2. Hi,

    Please can you make sure you specify a tweetmeme_url, you can find more information on this on the tweetmeme help http://help.tweetmeme.com/2009/04/07/integrating-the-tweetmeme-button-into-blogger/

    ReplyDelete
  3. Very useful ,I will tryto add this twwet me retweet button to my blog ,let's hope my template supports it.

    ReplyDelete
  4. Very simple yet effective tool for blogger. I already installed it and it works like a charm. Thanks

    DiTesco

    ReplyDelete
  5. I just wanted to say that you have a great tutorial here. It's the first step in getting my social network bar done and you did a fantastic job of explaining things. Keep up the tutorials!

    ReplyDelete
  6. This is amazing! The first tutorial were I've been able to get the button to actual work and be in the right place! Thank You!

    ReplyDelete
  7. Nice website design! and nice tutorial btw

    ReplyDelete
  8. thanks
    very useful


    rajinigantham.blogspot.com

    ReplyDelete
  9. Nice tutorial ... thanks. i am using it now :)

    ReplyDelete
  10. wonderful!!! How can I get this to say, @LeslieVeg , instead of @tweetmeme??
    Really nice!
    Thanks you!
    Leslie
    LesieVeg@msn.com

    ReplyDelete
  11. you can change the source of your tweet from tweetmeme to your username just add a attribute and change source in the script and type your name :) if you need help do feel free to ask

    ReplyDelete
  12. What an amazing site. I love the design of it, thanks for the tips!

    I managed to embed the badge to my posts, hopefully people will start tweeting my articles now:
    MobileSpoon

    ReplyDelete
  13. Thank you so much! I had been trying with tips from everywhere and your hack is the only one that worked!

    ReplyDelete
  14. @LeslieVeg you can add this line to the script

    tweetmeme_source = 'LeslieVeg';

    This will solve the problem

    ReplyDelete
  15. Nice tutorial, really well explained

    ReplyDelete
  16. Thanks sooooo much for this tutorial!!!!!!! xox

    ReplyDelete
  17. For some reason, the compact version puts a question mark on my blog instead of a 0, if the blog has not been retweeted yet. Any reason why?

    ReplyDelete
  18. the question mark means 'fail' its usually the problem of tweetmeme... or it might be due to mistake in the code. try the normal one and tell us if that shows the ? too.

    ReplyDelete
  19. Hey thanks Cheth... this is @kirtitandel What an awesome tutorial.. especially for new bloggers like me!

    keep the good work.. as i always say, you are the F1 key for most of us..

    cheers...

    ReplyDelete
  20. I think I did mine right - can you check it out and let me know? Thanks for all your help with this.

    Love and Blessings,
    AmgelBaby

    ReplyDelete
  21. This isn't helping me. That tag is nowhere in my code...

    ReplyDelete
  22. Never mind I finally found it. Firefox was just being a butt. Thanks!

    ReplyDelete
  23. Please forgive me for being an idiot as far as technology is concerned.. I've been trying to find a fix re:a blogger/tweetmeme customization problem. I have the RT button in each of my posts, I have it set up in my post template so the RT button is automatically added. I am trying to customize it to show my username instead of @tweetmeme and I followed their directions (replacing 'tweetmeme' with 'myusername' in the specified field and it's not working. I am so frickin' lost! =( Is there something I'm supposed to do besides replacing 'tweetmeme' with my username in the code? Any help is greatly appreciated.

    ReplyDelete
  24. @Meggs,

    Use this code... and replace cheth by your twitter username

    <script type='text/javascript'>
    tweetmeme_source = &#39;cheth&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

    does this work for you?

    ReplyDelete
  25. @Meggs

    use the code provided to you by cheth, i used it and it worked like wonder.

    thanks cheth

    ReplyDelete
  26. Dear sir/madam,

    How do I make sure the button appears nicely on a black background? My blog is black, and I would like my tweetmeme retweet button to appear seamlessly on the page, like it does on yours, without the white border around it. thank you so much

    ReplyDelete
  27. Wow! It actually works! I've been trying to get a retweet button on my blog for the last two hours. It's been most frustrating. Fortunately I ran across this site. The button was up and running in a few minutes. Yours is the only script that worked out of about 5 or 6 I tried. Thank you so much

    http://pr-insights.blogspot.com

    ReplyDelete
  28. @liloo We havent done anything special the normal tweetmeme button appears nicely on black bakground too.. I'm not sure why its not appearing seamlessly on your page. We have changed the theme but it was the normal tweetmeme retweet button itself. :)

    @PR Insights

    We are glad that we helped you :)

    ReplyDelete
  29. Ok, do you know how I can remove my blog title from every tweet? I still want the post title but not the blog title?

    ReplyDelete
  30. You will have to edit it in your blgoger template from the title include tag. Remove the data:blog.title tag. But it maynot be too good for your blog SEO so we advice you not to do it.

    ReplyDelete
  31. thanks to the information,
    because it is very helpful especially in making and messing work on bloggers who I have today

    ReplyDelete
  32. thanks to the information,
    because it is very helpful especially in making and messing work on bloggers who I have today

    ReplyDelete
  33. some really good tips! Thanks for sharing!

    ReplyDelete

Please Don't Spam that's all. Grab our RSS Feed and we would Love to see you in our comments section more often.