Tutorial -Add a Tweetememe Retweet Button to your Blog

retweet+copy 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 icon smile Tutorial  Add a Tweetememe Retweet Button to your Blog

Firstly be clear if you want the full version or the Compact version of this Retweet button.
retweet+button+types+copy 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.












Related Posts

Blogger Toolbox: Fresh, Free and Stunning Blogger Templates

40+ New and Fresh Blogger Templates

BloggerPower- A Super Flexible Blogger Template

Glassical: A Free Blogger Template ~ SmashingMagazine

Mindblowing Premium-Like Free Blogger Templates

Blogging Faceoff: Blogger vs. WordPress

HOW TO: Official Facebook Share Counters for Blogs

Create Mobile Version of Blog: 12 Free Alternatives

jQuery Powered Text / Font Resize Widget

HOW TO: Elegant CSS Message Boxes for Blogs

35 Comments

  1. Sudha

    05.08.2009

    Reply

    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! :)

  2. Anonymous

    05.08.2009

    Reply

    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/

  3. venkat

    05.09.2009

    Reply

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

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

    DiTesco

  5. Elena

    05.29.2009

    Reply

    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!

  6. Jeni

    07.07.2009

    Reply

    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!

  7. Jucarii

    07.09.2009

    Reply

    Nice website design! and nice tutorial btw

  8. karurkirukkan

    07.17.2009

    Reply

    thanks
    very useful

    rajinigantham.blogspot.com

  9. hemant

    07.24.2009

    Reply

    Nice tutorial … thanks. i am using it now :)

  10. Leslie M.

    07.30.2009

    Reply

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

  11. cheth

    07.30.2009

    Reply

    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

  12. Gil Bouhnick

    08.04.2009

    Reply

    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

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

  14. cheth

    08.05.2009

    Reply

    You're welcome :)

  15. Krsih

    08.10.2009

    Reply

    @LeslieVeg you can add this line to the script

    tweetmeme_source = 'LeslieVeg';

    This will solve the problem

  16. Lucas Tadeu

    08.14.2009

    Reply

    Nice tutorial, really well explained

  17. ghissy

    09.06.2009

    Reply

    Thanks sooooo much for this tutorial!!!!!!! xox

  18. Trudy

    10.25.2009

    Reply

    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?

  19. cheth

    10.26.2009

    Reply

    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.

  20. Doctor who blogs

    11.05.2009

    Reply

    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…

  21. AngelBaby

    12.15.2009

    Reply

    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

  22. Elle

    01.05.2010

    Reply

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

  23. Elle

    01.05.2010

    Reply

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

  24. Meggs

    01.19.2010

    Reply

    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.

  25. cheth

    01.19.2010

    Reply

    @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&#39; type='text/javascript'/>

    does this work for you?

  26. tratament sperma

    01.23.2010

    Reply

    @Meggs

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

    thanks cheth

  27. liloo

    03.23.2010

    Reply

    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

  28. PR Insights

    04.15.2010

    Reply

    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

  29. cheth

    04.16.2010

    Reply

    @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 :)

  30. nicholas.simon

    06.14.2010

    Reply

    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?

  31. cheth

    06.14.2010

    Reply

    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.

  32. gunawan

    07.19.2010

    Reply

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

  33. gunawan

    07.19.2010

    Reply

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

  34. Lian

    10.27.2010

    Reply

    Works great. Thanks.

  35. some really good tips! Thanks for sharing!

Leave a Reply









Recent Tweets

Follow Me On Twitter →

Email Updates

Get all our latest posts delivered right to your mailbox.