Introducing Tweetbacks Plugin for WordPress

Advertisement

Just yesterday we introduced Twitter Avatars In Comments1 plugin for WordPress that enables bloggers to have both Twitter and Gravatar avatars in blog comments. We are certainly not going to turn Smashing Magazine into a repository of Twitter plugins for WordPress, but we are confident that it does make sense to introduce another plugin that enables another kind of Twitter integration in blogs.

Tweetbacks2

This is why this post releases the Twittbacks WordPress Plugin that was developed and released especially for Smashing Magazine — this plugin imports tweets about your posts as comments. You can display them in between the other comments on your blog, or display them separately.

Advantages of our implementation

This implementation is inspired by Dan Zarrella’s great work on TweetBacks. Although his implementation3 does what it promises, we felt that it could be done in another way and offer users an alternative to display tweets in a more convenient way.

Dan’s solution uses JavaScript, which will work on more platforms, but we felt that it would be useful to actually store the tweets in the database instead of using JavaScript to display them. Because our implementation stores Tweets in the database, you can create new plugins that use this data on the top of our plugin.

Besides, our implemenation does not does not require JavaScript and requires significantly less time to load (server-side, not client-side). (Because we know you want to test this, and be able to ditch the plugin if you don’t like it, we’ve added an uninstall function, which will delete all the stored tweets from your WordPress database.)

Installation

The installation couldn’t be simpler:

  1. download the plugin from Joost de Valk’s release post4,
  2. copy the “tweetbacks” folder to your plugin folder (wp_root/wp-content/plugins);
  3. login inside your WordPress administrator panel and activate this plugin (Click “Plugins” and then “Activate” near to the plugin title);
  4. if you are using WordPress 2.7, just add the code presented in the next section of this post (Styling and Adding Tweetbacks in WordPress 2.7) and you are done.
  5. otherwise if you are using older versions of WordPress, you can add Twitterbacks similarly to the way it is presented in this5 tutorial:
    1. Access your comments.php file and locate the following code:

      <?php foreach ($comments as $comment) : ?>

      Immediately after the above code, place this code:

      <?php
        $comment_type = get_comment_type();
        if($comment_type == 'comment') {
      ?>

    2. Next, scroll down a little bit and locate the following code:
      <?php endforeach; /* end for each comment */ ?&gt

      Put the following code right before the above code:

      <?php } /* End of is_comment statement */ ?>

      This will filter out all of the tweetbacks, trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display tweetbacks, and a third loop to display the trackbacks and pingbacks.

    3. Right under the code from step 2 you should find this code:

      <?php else : // this is displayed if there are no comments so far ?>

      Put the following code right before the above code:

      <h3>Tweetbacks</h3>
      <ol>
      
      <?php foreach ($comments as $comment) : ?>
        <?php $comment_type = get_comment_type(); ?>
        <?php if($comment_type == 'tweetback') { ?>
          <li><?php comment_author_link() ?>: <?php comment_text() ?></li>
        <?php } ?>
      <?php endforeach; ?>

      Followed by this:

      <h3>Trackbacks</h3>
      <ol>
      <?php foreach ($comments as $comment) : ?>
        <?php $comment_type = get_comment_type(); ?>
        <?php if($comment_type != 'comment' && $comment_type != 'tweetback') { ?>
          <li><?php comment_author_link() ?></li>
        <?php } ?>
      <?php endforeach; ?>
      </ol>
    4. And you are done.

Styling and Adding Tweetbacks in WordPress 2.7

As the plugin will import these tweets into your comments, they will by default be shown as normal comments on your blog. They will get the class tweetback. If you’re using WordPress 2.7 and the default theme, or any other theme that has taken the styling from the comments from the default theme (which is a sensible thing to do), you could style these tweetbacks by adding something like this to your stylesheet:

.commentlist li.tweetback {
  background-color: #94E4E8;
}

If you want to display them separately, you’ll have to separate your comments, pingbacks and tweetbacks from each other. A great tutorial on how to do that is Separating Pings from Comments in WordPress 2.76.

After you’ve done that, you can add the following code to display the tweetbacks:

if ( !empty($comments_by_type['tweetback']) ) :?>
  <h2 id="tweetbacks"><?php echo count($comments_by_type['tweetback']);?> Tweetbacks to &#8220;<?php the_title(); ?>&#8221;</h2>
  <ul class="commentslist tweets">
    <?php wp_list_comments('type=tweetback'); ?>
  </ul>
<?php
endif;

If you want to give that list of tweetbacks a different look and feel, you can add a callback to the wp_list_comments call above. The callback could make them look like this, for instance:

Separated Tweetbacks

The code for the callback used above looks like this:

function yoast_list_tweetbacks($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  $avatarurl = str_replace("twitter:","http://s3.amazonaws.com/twitter_production/profile_images/",$comment->comment_author_email);
?>
  <li class="tweetback" id="comment-<?php comment_ID(); ?>">
    <div id="div-comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
        <img alt='' src='<?php echo $avatarurl ?>' class='avatar avatar-40 photo avatar-default' height='40' width='40' />
        <cite class="fn"><a href="<?php echo $comment->comment_author_url; ?>" rel='external nofollow' class='url'><?php comment_author(); ?></a></cite> <span class="says">says:</span>
      </div>
      <div class="comment-meta commentmetadata"><a href="#comment-<?php comment_ID(); ?>"><?php comment_date('F jS, Y'); ?> at <?php comment_date('H:i:s'); ?></a></div>
      <p><?php comment_text(); ?></p>
    </div>
  </li>
<?php }

Because these tweetbacks are stored as comments in your database, you can all sorts of cool things with them. Improving the Web7 has written a Widget pack that will work with this plugin, called Tweet Stats8. It allows you to add widgets with “Recently tweeted posts” and “Most tweeted posts” (see examples below).

Displaying Twitter in a variety of ways

If you have any installation problems, questions or suggestions for this plugin, please either comment on this post or add your suggestions in the support forum9 on WordPress.org.

About the author

The plugin was developed by Joost de Valk10, a Dutch geek and WordPress developer. You can follow him on Twitter11.

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/08/twitter-avatars-in-comments-wordpress-plugin/
  2. 2 http://yoast.com/wordpress/tweetbacks/
  3. 3 http://danzarrella.com/tweetbacks-beta.html
  4. 4 http://yoast.com/wordpress/tweetbacks/
  5. 5 http://wphacks.com/how-to-separate-wordpress-comments-and-trackbacks/
  6. 6 http://sivel.net/2008/10/wp-27-comment-separation/
  7. 7 http://www.improvingtheweb.com/
  8. 8 http://www.improvingtheweb.com/wordpress-plugins/tweet-stats/
  9. 9 http://wordpress.org/tags/tweetbacks
  10. 10 http://yoast.com/
  11. 11 http://twitter.com/jdevalk

↑ Back to topShare on Twitter

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Thanks!
    Now it’s tweetermania time!

    0
  2. 2

    Great plugin, definetly worth integrating if you are tweeting your latest blogs and articles around!

    0
  3. 3

    Nice! Very useful, I will be adding this to The Dude, just finished applying the wordpress hacks from your other post that are useful to me too!

    Smashing Magazine u are legends :)

    0
  4. 4

    That’s great!
    Thanks SM!

    0
  5. 5

    Very nice. Can’t wait to try it out.

    0
  6. 6

    Hey, we created a Tweetback plugin too, you may want to look at this.

    0
  7. 7

    You guys a really putting out quality stuff here!

    0
  8. 8

    Congratulations for the great plugin!

    Best Regards

    0
  9. 9

    Richard Andersson

    January 9, 2009 6:09 am

    Very useful little thing! Keep it up!

    Thanks!

    0
  10. 10

    Wait, how do other people going about a “Tweetback”? What does their twitter msg need in it?

    0
  11. 11

    Awesome app, great job Dan! FYI, TweetBacks has a new logo; much nicer than the one in this post.

    0
  12. 12

    Appears not to work with intensedebate. Am I right?

    1
  13. 13

    Nathan, their tweet needs a link to the post in it, from a supported shorturl provider. The plugin currently supports tinyurl, is.gd, bit.ly, snipr, snurl, snipurl, tr.im,adjix, advu & zima.

    0
  14. 14

    Thanks… TwitterTools is out the window since it doesnt accounce new posts in a shortened url like tinyurl

    0
  15. 15

    Thanks for all the kind words! Be sure to follow me on twitter to get the latest updates on the plugin!

    0
  16. 16

    Marcuss Zilgalvis

    January 9, 2009 8:48 am

    That’s awesome ! Thank you for filling your spare time to create this for all of us :)

    0
  17. 17

    Another nice tweetback plugin … released yesterday ;)

    will be found under:

    http://tweetback.holzhauer.it/

    0
  18. 18

    Hmm…, have it installed but tweetback class isn’t showing up. Could be my theme maybe?

    0
  19. 19

    Very nice plugin. Will for sure be using this sucker!

    0
  20. 20

    this is a badass widget. instant classic.

    0
  21. 21

    For everyone who has issues implementing the code for below 2.7 blogs: it should be == "tweetback", not = "tweetback", and for the trackbacks it should be != 'comment' && != 'tweetback' instead of just != 'comment'.

    0
  22. 22

    Got this up and running on my blog. Is it possible to block your own Tweets from appearing in your Tweetbacks?

    0
  23. 23

    Iain Broome not yet, but that’s a great idea!

    0
  24. 24

    Oh yeah Yoast.com is looking good! Will put this up on my very first WordPress theme design on my website! Thanks for sharing! ;)

    0
  25. 25

    Works wonderfully – thanks Joost :D

    0
  26. 26

    Vitaly Friedman & Sven Lennartz

    January 9, 2009 4:09 pm

    @Joost de Valk (#19): thanks, the post was updated.

    0
  27. 27

    Can´t make it work with the Revolution theme. I can se that somebody has tweeted in the sidebar for the widget latest comments. I can see that there has been a comment (tweet) left in the commentsection, but I cant´t see the comment (tweet) itself.

    What to do?
    Thanks!

    0
  28. 28

    Would like to thank Joost as he helped me get things rocking nicely with this plugin at my site (onemanlab.com). Really a great tool, lots of potential.

    0
  29. 29

    Nice. I will be adding this into my sites over the next couple days. Thank you for releasing this.

    0
  30. 30

    very nice i’ll add to my blog.

    thanks

    0
  31. 31

    Very cool – I like being able to have tweets integrated with comments. Would love to be able to filter my tweets out – looking forward to that addition!

    In the meantime (for WP 2.7) can we delete our own tweets by moderating those particular comments?

    Thanks for a great plugin!

    0
  32. 32

    Thx for all your help in reaching Digg front page!

    0
  33. 33

    Jean-Marc Liotier

    January 10, 2009 3:13 am

    Let’s have the same for an open microblogging network such as Identi.ca’s Laconi.ca !

    0
  34. 34

    Hi! Thanks for a great plugin!

    Just a little idea for improvement:
    Many people have a registered webpage on their twitter-profile. What if the plugin could allow the link in the tweetback to point to the webpage of the author, in stead of the tweet itself? I think that would be more useful than todays’ solution.

    It could also be possible to choose between the two in the settings page.

    Again – just a suggestion. Thanks for a great plugin! :)

    0
  35. 35

    Asking @disqus if they will intergrate this seeing as i use disqus for my comments on my MT blog. I do not use WP.

    0
  36. 36

    hey,

    thanks for the great plugin!
    how can i automatically show the tinyurl of the article (which appears f.ex. in twitter) below my article? is this possible?

    0
  37. 37

    Terrific concept, thanks for developing it.

    I installed it on one of my blogs running WP 2.7, following the first two steps described above. But I get this error:

    Parse error: syntax error, unexpected T_ENDIF in /[path]/www.nevillehobson.com/next/wp-content/plugins/thesis-openhook/thesis-openhook.php(279) : eval()'d code on line 7

    Any idea what I need to edit and where? Thanks.

    [edit] Reading that code again, looks like it actually might be an issue with the theme (Thesis). I’ll post this on their support forum as well.

    0
  38. 38

    Dmitriy Donchenko

    January 10, 2009 10:44 am

    WordPress 2.7 code version has error in 1-st line

    1. if ( ! emptyempty($comments_by_type['tweetback']) ) :?>

    must be

    1. if ( !empty($comments_by_type['tweetback']) ) :?>

    0
  39. 39

    It would be great if this could be added as a Dashboard thing, but not set as visible on the site.

    0
  40. 40

    Thank you super, this is a great post… You give me lot more idea now =)

    0
  41. 41

    Awesomeness!

    0
  42. 42

    Hey all,

    I really dig this plug-in, and I’m using it on my site ShortFormBlog, but I noticed a pretty significant problem cropping up when I was using it. For whatever reason, the app keeps calling up posts that aren’t actually there, and generating hundreds of tweetback comments for 404 errors.

    Here’s a screenshot of what I’m talking about: Flickr

    Any suggestions?

    0
  43. 43

    My comments.php file doesn’t contain the following line of code:

    <?php endforeach; /* end for each comment */ ?&gt

    Instead, it contains the following (with the proper brackets)

    ?php } /* end for each comment */ ?

    I’m running WP 2.6, but the above code doesn’t appear in the 2.6 tutorial you linked to.

    My comments form seems to work fine despite the weird code. Nevertheless, do I need to get someone to fix my comments.php code in order to make Tweetbacks work? (I tried to implement, but tweetbacks were not getting picked up, so I went back to the previous code for now).

    0
  44. 44

    Great plugin!

    I’m using Agregado theme on wp2.7, and while it counts the tweets, I can’t get them displayed.
    Ideas?

    Also: comment date on tweets appear to be 1969. Hmph.

    0
  45. 45

    I like this, great new wordpress marketing!

    0
  46. 46

    There are some serious problems wiith this plugin.

    1) tweetbacks are automatically approved
    2) there is no way to show tweetbacks on the comments page (admin side), since the type has not been added to dropdown list, so you’d need to got through ALL your posts to check for twitter spam.

    Other than that it looks interesting but really, spam is an issue and always has been. Why would you not even think about it during implementation?

    0
  47. 47

    There is a big problem with bit.ly integration for short URLs. I’m starting to receive in my admin comments panel ALL links created with this url shortener, so I’m getting filled with comments. The strange part is that these appear only in the admin panel (comments section) but are not published on the blog.
    Well, it’s a problem anyway that you should fix ASAP

    0
  48. 48

    I am having the same problem… my comments show 998 comments, only showing up in admin panel. Everything else seems to work, just dont know why I have a bunch showing in admin panel. I thought it was something in my code, but now I dont think so.

    0
  49. 49

    thanks man ……..cool plugin

    0
  50. 50

    cool new plugin! This integrates twitter interaction even more with our blogs!

    0
  51. 51

    I was just talking with Dan Zarrella on Twitter about this several days ago. I am amazed to see this here already, good work! I had to Digg this & add it to Delicious too.

    I will be implementing this on my Social Media blog: Tips on Enterprise 2.0 with Web 2.0 for Social Media I am a big fan of Twitter and just blogged about Twittertainment, looks like I need to let my readers know about this too.

    Thank you,

    0
  52. 52
  53. 53

    Does it work on wordpress 2.7.1 ?

    0
  54. 54

    This is awesome, but I can’t get it to work with my blog which uses Thesis Theme and Intense Debate.
    Any help? :)

    0
  55. 55

    Steve Patterson

    May 24, 2009 7:29 pm

    Bizcards Blog: I tried to do this with mine. It didn’t work. It would delete my Trackbacks and not display them. Plus, my Tweetbacks still show as comments. I retried it and it dropped the bottom comment area. So I guess I have to keep them as regular comments for the time being. Unless someone can help me with it.

    0
  56. 56

    i have use the latest version. do i need to add the code?
    There is configuration in the version. can anyone advisSE:

    0

↑ Back to top