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

Subscribe via RSS or Email:

Related Posts


8 comments:

XeBii Mj said...

Great idea!
i just had question, placing tweet button in every comment doesn't increase HttpRequests?
while looping through 100 or may be 1000's of comments :|

Or
platform.twitter.com/widgets.js loads Once and no mattery how much and where you called the tweet button doesn't effect the Performance

Anonymous said...

XeBii Mj,

Damn! You're absolutely right! Thanks for pointing it out. :)

Yes, I agree. It's better to place platform.twitter.com/widgets.js somewhere outside the new <span>. Perhaps somewhere after ]]></b:skin>.

XeBii Mj said...

Thank you Saidul A Shaari :)

Anonymous said...

XeBii Mj,

Hey, don't mention it. It was you who made the whole thing better for everybody! :)

Gary Asip said...

can u do this for facebook like button?.. it would be great!

MUX SPARROW said...

I tried this on my dummy blog with threaded comment.. not work for thhreaded comment yea, Sir?

Anonymous said...

MUXLIMO,

To be honest, I have no idea at all because I have never tested it with the new threaded comment.

Anonymous said...

Gary Asip,

I'm afraid that it is not possible to achieve the same thing with the Facebook Like button. I have tried it before. Trust me. :)

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.