PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Tweetbacks and Re-Tweets for Blogger blogs

Posted by on 30th Mar 2009 | 5 comments

twitter-logTwitter has grown to be one of the most successful social media services, so it’s no wonder bloggers seek to utilize many Twitter based applications to enhance the community aspect of their blogs.

Tweetbacks and re-Tweets are particularly good functions to include in our blogs: Tweetbacks demonstrate how posts are discussed and syndicated through Twitter, while re-Tweets offer an easier means for readers to Tweet about our posts.

While there are plugins available for WordPress users to add Twitter functionality to their blog templates, Blogger users need to edit their templates directly in order to add these functions. In this article, I’ll explain how to add Tweetbacks and re-Tweet functions for Blogger powered sites.

Dan Zarella’s TweetBacks

Tweetbacks act like trackbacks; but rather than list links to a specific post, these will list any found Tweets about the specified post and include a thumbnail of the author’s Twitter avatar.

Dan has made this functionality incredibly easy to add to our blogs. All we need to do is paste a single line of code where we want the Tweetbacks to appear.

Blogger users could easily add this code to an HTML/JavaScript widget in the sidebar. Once the page has loaded, the script will pick up any Tweetbacks associated with the current page.

To make this function more interesting, you may prefer to add Tweetbacks below your Blogger comments section instead. This is surprisingly easy, though you will need to edit your blog’s template code in order to make this work.

  1. Go to Layout>Edit HTML in your Blogger dashboard. Ensure you have checked the “Expand widget templates” box.
  2. Search for this line in your template:
    <:b:includable id='comments'/>
  3. Immediately after this line, paste the following section of code:
    <script src="http://danzarrella.com/tb.js"></script>
  4. Preview your template which will ensure you have made no errors when pasting the code – if you have, the preview page will not load and you will be informed of the cause for the error. If all is well, proceed to save your template.

Now your Tweetbacks will appear on post pages, right after the comments section. If no Tweetbacks have been registered for this article, the message “No Tweetbacks Yet” will be displayed instead.

Learn more about Dan Zarella’s Tweetbacks

Add a re-Tweet counter with TweetMeme

Of all the “re-Tweet” buttons I have seen, the TweetMeme counter has proved the most interesting. This button adds a counter to display how many times the post has been “re-tweeted” along with a link for readers to easily Tweet about your posts:

To add the TweetMeme button to your Blogger template, you will need to override the automatic collection of the URL by adding the following lines of code in your template where you would like the button to appear:

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

If you prefer to add the button below each of your posts, you can paste this code in the post-footer section of your blog. However, many prefer to add this at the top right of their posts in similarity to the Digg button trend.

To add the button to the top of your Blogger posts, here is what to do:

  1. Go to Layout>Edit HTML in your Blogger dashboard; ensure you have checked the “expand widget templates” box.
  2. Find this line of code in your template:
    <div class='post-body'>

    If you cannot find this exact line of code, search for <data:post.body/> and look for the preceding line.

  3. Immediately after this line, paste the following section of code:
    <span style="float: right; margin: 0 0 5px 5px;"><script type="text/javascript">
    tweetmeme_url = '<data:post.url/>';
    </script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script></span>
  4. Now preview your template: you should now see the TweetMeme button appears to the top right of each post. If all is well, save your template and enjoy this new functionality.

Final thoughts

Using these Twitter-based functions in your Blogger powered blog is an ideal means for Twitter users to assist syndication of their posts, increase popularity of their blogs and create an increased sense of community around thier sites.

I hope you have found these explanations of how to implement Tweetbacks and re-Tweets useful for addition to your Blogger templates. Please feel free to leave your comments and suggestions below.


Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

5 comments - Leave a reply
  • Posted by Roseli A. Bakar on 31st Mar 2009

    This is great info Amanda.

    I could use this on some of my old blogs which are still at blogger.

  • Posted by Ummagumma on 9th Sep 2010

    Well, at least for me if did not work. I don't have the least idea how to post all tweets forma account in my blogspot. I dont have a line

    <:b:includable id='comments'/>

    maybe is due the model ( Josh Peterson) i use?

  • Posted by @voxie on 11th Sep 2010

    There is a much easier way of doing this. Go to your Blogger’s Settings > Formatting then scroll down to Post Template, and simply copy/paste the following in there:

    Tweet

  • Posted by @nicoartistico on 6th Nov 2010

    Thanks for these suggestions! You are great!

  • Posted by kai on 11th Dec 2010

    When i click retween it tweets the Blog name not the Post title..help