A Fully Customized TweetMeme ReTweet Button for Your Blog Post

posted by Audee Mirza | Saturday, September 5, 2009

Follow me on Twitter
The thumbnail for this post is using Birdies~Cute Free Twitter Icons

Just few weeks ago, I added a TweetMeme Button to Graphic Identity Blog post. As you know already, that Twitter has became a big community to exchange links about latest news, pictures, blip of songs, and of course a blog post. These exchange is made happened by some ReTweet actions chain.
If you have a particular blog and you are familiar enough with this ReTweet term (or you can make it short as "RT"), then you may want to know about how to add a TweetMeme ReTweet Button to your blog post. It will track the number of RTs made for each blog post.
Actually the instruction to install the TweetMeme Button is clearly stated on Tweetmeme Help page. But I just want to let you know that I've combined several codes all together, so you will know that it is a fully customized TweetMeme RT button.

Read More

First of all, let's try to understand some options that make TweetMeme button as a smart RT add on for you blog.

Custom RT @username

tweetmeme_source = 'talktweetmeme';
By default the RT button will direct you in the format of "RT [@tweetmeme] [blog post title] [link]". If you want to see different format as if the RT comes after you, just change 'talktweetmeme' with your own Twitter username. This is pretty good because not only your blog post is spread out via RTs chain, but the other Twitter users can check your Twitter profile when someone RT your blog post and probably become your new follower :).
This is the example of how the customized code like:
 tweetmeme_source = 'graphicidentity';
Follow me on Twitter

Your Blog Permalink URL

tweetmeme_url = 'http://yoururl.com';
As it is intended as a RT for each blog post Permalink. Be sure to add your Permalink (permanent link) of your blog post with an exact CMS link format code. I'm using Classic Blogger Blogspot CMS, so I included ‹$BlogItemPermalinkURL$› to have a correct blog post link in the RT. Here is how the code will look like:
 tweetmeme_url = '‹$BlogItemPermalinkURL$›';

If you are using New Blogger Blogspot, there is a great tutorial to get the right permalink posted by Chetan. He is also my nice Twitter mate :)
Wordpress CMS users won't find any difficulties with coding to install this add on, because TweetMeme has provided a TweetMeme Button Wordpress plugin.

URL Shortener Service

tweetmeme_service = 'bit.ly';
The TweetMeme button add on allows you to use any URL shortener you like. The default option is: bit.ly URL shortener. Long URL won't help other Twitter user to RT your blog post right? :D
If you prefer to have tr.im as the URL shortener, just change the "tweetmeme_service" parameter as shown here:
tweetmeme_service = 'tr.im';

Button Styling

tweetmeme_style = 'compact';
The last options to complete the customization steps could be the button styling. Some of you may like a compact button. For that you just need to include the code above. Don't include this code if you want more bigger button.
Here is another tutorial, written by AllBlogTools.com to style your TweetMeme button if you are a New Blogger Blogspot user.

Follow me on Twitter

The next step is to to save all combined codes to your template. Please remember that I'm using Classic Blogger Template. So here is the codes that I've included in the end of Blogger HTML post tags, just before the comment tags:
‹script type="text/javascript"›
tweetmeme_source = 'graphicidentity';
tweetmeme_url = '‹$BlogItemPermalinkURL$›';
tweetmeme_service = 'bit.ly';
tweetmeme_style = 'compact';
‹script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"›

If you wanna know where your TweetMeme code is supposed to be added in New Blogger Template? Just visit this Anshul Dudeja's tutorial post to find out.

I hope you will find this tutorial useful and a RT is much appreciated! ;) Have a lovely weekend everyone!

Labels: , , , ,



  • wow, nice info, sista! thanks for share...

    By Anonymous gempur, At September 6, 2009 at 5:53 PM  

  • Nice, Audee! I think I'll implement this, as well...thanks for sharing :)

    By Anonymous Type Micah, At September 12, 2009 at 12:07 AM  

  • Ghofur & Micah:
    You are welcome and glad you like it! ;)

    By Blogger A u d e e, At September 16, 2009 at 9:32 AM  

  • Any idea how I can add thexyz link shortener to be used with the button?

    By Anonymous Perry, At December 1, 2009 at 10:01 PM  

  • Perry,
    I think you should visit the TweetMeme API Documentation for more information or just read the Tweetmeme Help page to find out more about it.
    I wonder if you've tried to use this script:
    tweetmeme_service = 'thexyz.org';

    By Blogger A u d e e, At December 4, 2009 at 8:25 AM  

  • but i need to know how to change the blog title.. if we use it in old blogger template, the blog title will be the title bar that can't be changed to the blog title.. :(

    By Blogger Benazio R.P, At February 3, 2010 at 10:59 AM  

  • Benazio,
    I'm not really sure if you can include your blog title in Classic Blogger Template, but you can try to attach this tag: <$BlogItemURL$> into:
    tweetmeme_url = 'http://yoururl.com';
    so it will look like this:
    tweetmeme_url = '<$BlogItemURL$>';

    Actually There's a tag to show a blog title, which is: <$BlogPageTitle$>, but the problem is, it won't direct the visitor to a particular link.

    Try to experiment with one of these Defined Classic Template Tags and good luck ;)

    By Blogger A u d e e, At February 4, 2010 at 5:58 AM  

  • oh i didn't know that you're indonesian :P

    yup, i already tried that one with that <$BlogPageTItle$> tag, but yeah, it only shows the Title not the link so it's an invalid link.

    hmmm i haven't tried that BlogItemURL.. i guess i'll give it a try yah :D thanks

    anyway, do you know how to raise "yahoo backlinks" ? *thinking*

    By Blogger Benazio R.P, At February 4, 2010 at 8:27 AM  

  • This was so helpful thank you for sharing, I was able to use this to customize the name on my own code.

    By Blogger Dragonblogger, At February 5, 2010 at 4:25 AM  

  • @Benazio,
    I don't think it is categorized as invalid link, because it wasn't meant to be a link for the first place but just text. Invalid link is a link that directs to no where, or broken :D
    Give a go to tweetmeme_url = '<$BlogItemURL$>'; and find it useful ;)
    :) I'm an Indonesian, and salam kenal yaaa!

    ah, I'm glad to hear that. This web tool snippet does helps in promoting your blog post.
    Thank you for your comments :)

    By Blogger A u d e e, At February 5, 2010 at 7:19 AM  

  • Thanks a lot, i love this tutorial, you explain step by step very well, i have never check if my Permalink is right or not, i'm going to check it immediately!

    By Anonymous Sushie, At March 18, 2010 at 1:13 AM  


Post a Comment

If you like Graphic Identity's articles & our free design box, please drop your comment or subscribe Thank you :)

GraphicIdentity admin will always moderate all comments. We will not publish comments that include irrelevant links with targeted anchor text. Also it will be nice if you mention your name rather than to comment as an anonymous user.

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

Home<< Home

Newer Posts       Older Posts