13 January 2009 ~ Comments ~ Share ~

How to add "Tweet this" button to Blogger Template

Blogger Howto Tips and Tricks Twitter
Twitter is among the most popular micro-blogging platform. Sharing something on Twitter is sometimes called “Tweet this” and is used to share a link to news, blog post or anything else you wanna share with your followers.
Putting a “Tweet this” button on your blog post makes it easy for your blog visitors to share your posts on twitter. Which in turn brings traffic to your blog. How much traffic it brings depends on how popular the person is and how many people follow his/her tweets. But it is always a good idea to make it easy for your blog visitors.
I searched for this kind of code I can insert in my Blogger template but couldn’t find any help. I am not exactly a web developer but know how to tweak the code to make it work. So after doing some trial and error, I can say, if you add the following code to your blogger template you can get “Tweet this” on your Blogger blog too:

<a expr:href=’”http://twitter.com/home?status=Reading ” + data:post.title + ” @YOURTwitterUSERNAME ” + data:post.url’ title=’Tweet it on Twitter’><img src=’http://LINK TO TWITTER IMAGE ON YOUR SERVER‘/></a>

A little explanation for the highlighted part of the code:

  • Replace YOURTwitterUSERNAME with your twitter user name, if you wanna track and see who is sharing your blog posts. Otherwise simply delete @YOURTwitterUSERNAME.
  • Replace the image URL http://LINK TO TWITTER IMAGE ON YOUR SERVER by the link for twitter image on your server.
  • I have added ‘Reading’ before the twitter status, if you want you can change/remove it.
  • Now add the resulting code to your blogger template. Which should be copied in the footer. Let me know if you need help in that.

The final code should look like it:

<a expr:href=’”http://twitter.com/home?status=Reading ” + data:post.title + ” @knowliz ” + data:post.url’ title=’Tweet it on Twitter’><img src=’http://lh4.ggpht.com/_4qUhcu23NoM/SHqbsDONCSI/AAAAAAAAGCE/MqYaroCiKCk/s144/itwitter.png’/></a>

Modifying the template:

  1. Go to Layouts.
  2. Expand your template under Edit HTML.
  3. Search for ‘p class=’post-footer-line post-footer-line-3′.
  4. Copy and modify the code as mentioned above in the article. (Be sure to take a backup of your template first.)
  5. Paste the modified code just after the line you searched.

Note:
Once you modify the template to include the above mentioned code.

  • ‘Tweet this’ button will appear in every post automatically.
  • You have to do it just once.
  • Even the old posts on your blog will have this button automatically.
  • When the reader click this button, it will include the URL of the post in the person’s tweet unless the readers intentionally remove it by editing the tweet.

If you have any suggestion for this post, drop in a comment. And if you like “tweet this” post and Follow knowliz on twitter.

Follow Knowliz on Twitter - Small
Update # 1: (02/13/09) – Added details about template modification.
Update # 2: (02/13/09) – Added details about changes you should see in your blog.
VN:F [1.8.1_1037]
Rate this post:
Rating: 4.2/5 (5 votes cast)
VN:F [1.8.1_1037]
Rating: +2 (from 6 votes)

Related Posts

Tags: ,
  • Murray Izenwasser
    Love the code, but I can't seem to find the right place to put it, as in, where's the footer?
    s

    thx!
  • Kevin
  • Anonymous
    Thank you for this post. Pardon my ignorance, but I have some questions. Does adding this code into my blogger template put the button in each post I write? Or do I have to add code to each post?


    When a reader clicks the "tweet this post" button, does it include a url to the post in the person's tweet?



    Finally, please tell me exactly where in the template I add the code -- where in the footer?



    Thanks so much!
  • Anurag Bansal
    Yes, once you add this code into your template, 'Tweet this' button will appear in every post automatically. You have to do it just once, even the old ones will have this button automatically.


    When the reader click this button, it will include the URL of the post in the person's tweet unless the readers intentionally remove it by editing the tweet.



    To put this into your blogger template:

    Expand your template under Edit HTML.

    Search for 'p class='post-footer-line post-footer-line-3'.

    Copy and modify the code as mentioned above in the article.

    Paste the code just after the line you searched.



    Hope it helps.
  • Gabe's Wit
    My link isn't active. I can't figure out why I can't click on it. Any thoughts? This is on blogger.
  • Anurag Bansal
    @Gabe's Wit:
    I have updated the article with the information about how to add this code in your template.

    Please follow the details and then try again.

    Currently, it looks like you have copied the code into a post where "expr:href" doesn't seem to create a link.



    Hope it helps.

    Cheers
  • Evolution - World
    Knowliz thnx for the post
  • techniqueal t.
    wonderful post! havent had the chance to fully explore twitter but will certainly keep this hack in mind. thanks a lot for sharing!
  • MandM
    Great concept - any suggestions as to how one might shorten the URL's automatically?


    I just put your code into my blog and then clicked on the Tweet it on Twitter button and got the full URL showing up which made it too long to tweet without taking it out and shortening it on tinyurl.com.
  • Anurag Bansal
    Generally, when you post, twitter will shrink the URL by itself. But yes, while posting it will consume some of the precious 140 characters.
    I am trying to find a solution to this, if you have any suggestion, they are most welcome.



    Cheers
  • Plenty
    Hi i add the code and the twitter image comes up, but the tweet this thing doesnt - can you help? http://www.plenty2say.com
  • Anonymous
    hi


    i currently entered the code



    in this site

    http://www.bonanzle.com/booths/RHINESTONE/items/PUZZLED_QUEEN_RHINESTONE_SHIRT





    and I can't seem to click on it



    any suggestions...thanks
  • Anonymous
    I can't find the code details in my 'edit html' section.


    any thoughts on about how far down i have to scroll? maybe copy the entire code and hightlight or screen shot it?
  • Anurag Bansal
    Did you check the box to expand the template under Edit HTML? You won't find the code it is not expanded.
  • Darlene Siddons
    this is great info...thanks....i need to know where i find the "link to the twitter image on your server"....this may be a silly question but i am having an issue getting this on my blog and i am thinking this may be my issue...


    thanks ahead of time

    darlene
  • Anurag Bansal
    @Darlene:
    You need to upload the 'Twitter Logo' to any of the image sharing websites, like Picasa, Imageshack, Photobucket etc.

    One you upload the image there, you can find the link to this image - Generally it is called 'Direct Link to the image'. Just copy this link and replace it in the code.



    Hope it helps.

    Cheers

    Anurag Bansal
  • Darlene Siddons
    where do i find the twitter logo...thanks ahead of time...


    darlene
  • Anurag Bansal
    @Darlene:
    If you want you can use and download the image from my blog. Please don't link to the image from this blog because of the bandwidth issues.

    You may just Right-Click on the image and Save to Desktop.

    Hope it helps.



    Thanks

    Anurag Bansal
  • Travis Manley
    Works great but, is there a way to center the Twitter logo in the footer?


    Thanks!
blog comments powered by Disqus