Twitter Tweet buttons for (each and every) Blogger comments! Don’t laugh! You might actually need them!

After spending a few hours exploring the possibilities of placing Facebook Like and Twitter tweet buttons for each and every comment posted on Blogger-powered blogs, I have discovered that for the time being only Twitter Tweet button can give us such possibility.

Some of you might be laughing right now, thinking that such sharing button placement ideas are complete waste of time but let me deliver the verdict point blank. You are so dead wrong!

Why must we place Twitter Tweet buttons for each and every comment?

If bloggers are truly honest with themselves, they should be able to admit that from time to time they will encounter comments that are so great, so helpful and delighting that they take the attention away from their blog posts!

This is especially true for blogs that are discussing religion, politics, sociology, design and technology. Unfortunately, those great comments never get the attention they deserved! Many were completely forgotten and some were even removed by bloggers that are scared of losing something. I don’t know, perhaps they were scared of losing their reputations!

By placing Twitter Tweet buttons for each and every comment, bloggers have the opportunity to give something back to commenters. I call it giving commenters equal opportunity to be heard by people other than your blog's frequent visitors. :)

How does the Twitter Tweet button for each and every comment look like?

The Twitter Tweet button for each and every comment looks the same as the common Tweet button. It’s the way we organize the tweet that looks different and I’m still working on it. For the time being, this is what I have at the moment.

As you can see from the second screenshot, each and every tweet has the same look and feel. It will tweet the topic touched by the comment and it’s unique URL. Theoretically, we can also include the body of comment in the tweet itself by grabbing the attribute of Blogger’s <data:comment.body/> data tag but Twitter’s infamous ‘140’ limitation would not enable us to send big comments via Twitter. However, if you are really good with JavaScript, I’m sure you can find a way to ‘summarize’ big comments behind the scene and parse it to Twitter’s widget. ;)

Now, would you like place Twitter Tweet button on each and every comment on your Blogger-powered blog?

How to place Twitter Tweet button on each and every comment posted on Blogger-powered blogs

I have tried to use the iframe-based Tweet button for this matter but failed. It seems that only the JavaScript-based Tweet button would allow us to get the results we need. So, here goes!

Open up your Blogger template and look for HTML <dd class='comment-footer'> tag. Once found, you should be able to see the following HTML <span> tag right under it.

<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

Right AFTER the HTML </span> tag (BEFORE HTML </dd> tag), add the following codes that include a customized JavaScript-based Tweet button that is using some unique data attributes.

<span>
<script charset='utf-8' src='//platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='&quot;likes this comment about &quot; + data:post.title' expr:data-url='data:comment.url' href='https://twitter.com/share'>Tweet</a>
</span>

A web developer that goes by the name of XeBii Mj pointed out something important right after I had published this post. It is indeed a bad idea to include the link to Twitter’s JavaScript file in every comment. So please look for ]]></b:skin> in your Blogger template and add the following code right AFTER it.

<script charset='utf-8' src='//platform.twitter.com/widgets.js' type='text/javascript'/>

Write once, run anywhere! Thanks, XeBii Mj! :)

Pay attention to the ones marked in red and green. In the example shown up above, I have chosen the horizontal tweet button. If you wish to use the vertical Tweet button, just change the value marked in red to ‘vertical’. If you have a better idea for your tweet, change the ones marked in green with something of your own.

Now decide where you want to have that new Tweet button appear on each and every comment. If you want to follow my exact placement which is floated to the right-hand corner (on the same row with the comment’s time stamp), then add some Inline CSS to your HTML <span> tag. Yours will probably look something like the following.

<span style='padding: 0 5px 0 0; float: right;'>

At the end of this installation; your newly added codes should look something like the following.

<span style='padding: 0 5px 0 0; float: right;'>
<script charset='utf-8' src='//platform.twitter.com/widgets.js' type='text/javascript'/>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='&quot; likes this comment about &quot; + data:post.title' expr:data-url='data:comment.url' href='https://twitter.com/share'>Tweet</a>
</span>

Congratulations! Now go and save your Blogger template! Enjoy your new Twitter tweet button for each and every comment posted on your Blogger-powered blog! :)