Close
Close

How I added the Twitter ID field to comments on Twitip.com

A couple of days ago I added the ability for those leaving comments on my TwiTip Twitter Tips blog to add their Twitter ID as well as their URL to comments. Since doing this I’ve been asked time and time again how we did it. In this guest post Sean Walberg (the guy who actually made it happen and who is my server admin on TwiTip) explains how he did it.

If you’ve been to Twitip.com in the past couple of days, you’ve probably noticed that commenters have Twitter IDs in their posts:

Picture 1.png

This was something Darren thought up while we were preparing to move his server, and asked me to put it in place. Twitip runs on WordPress, which is easily extended through plugins. Fortunately, someone wrote a plugin to take care of most of what’s needed to do this.

The steps we’ll follow here are:

  1. Get the plugin and activate it
  2. Configure the plugin for the new Twitter ID field
  3. Modify your theme to capture the information in your comment form
  4. Modify your theme to print the Twitter ID in the displayed comments

The first thing you’ll need is the Extra Comment Fields plugin. I used Version 1.2 Beta if you want a direct download link.

There’s one PHP file in there that you’ll put in your wp-content/plugins/ directory. When you go back to your WordPress Admin page, you’ll see the Extra Comment Fields plugin in the Inactive Plugins section of your Plugins page (off to the right of your screen, between Settings and Users). Activate this plugin.

The Extra Comment Fields plugin is tricky in that there are several references to the field name, and they all have to match (including the case). I chose “twitter” which should be easy enough to remember.

From the WordPress Admin screen, navigate to Settings, then Extra Comment Fields. (If you don’t see Extra Comment Fields in the list of plugins, go back a step and make sure you activated it)

Type “twitter” into the text box and click “Add Field”. Your screen should look like this:

addfield.JPG

This step makes the necessary changes to the database to store the comment. Heed the warning you see, if you delete this field, it removes the column in the database.

Next, go into your theme directory, it’s in wp-content/themes/. Darren runs Thesis, so we’re looking at wp-content/themes/thesis. Open up comments.php. Find the spot where the comment form is displayed by looking for comment_author_url.

You’ll want to add a new comment field with the name of “twitter”. This will depend a lot on your theme, but cutting and pasting goes a long way here. The big change, though, is that WordPress doesn’t keep this value in your cookie, so you can’t pre-populate this in the value attribute (in simpler terms, people who have commented before will have their name, email, and URL filled in, but not the Twitter ID). In Thesis, you’ll have:

                        else { // Otherwise, give your name to the doorman
?>
                                        <p><input class="text_input" type="text" name="author" id="author" value="<?php echo $comment_author; ?
>" tabindex="1" /><label for="author"><?php _e('Name', 'thesis'); ?></label></p>

                                        <p><input class="text_input" type="text" name="email" id="email" value="<?php echo $comment_author_emai
l; ?>" tabindex="2" /><label for="email"><?php _e('E-mail', 'thesis'); ?></label></p>
                                        <p><input class="text_input" type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"
 tabindex="3" /><label for="url"><?php _e('Website', 'thesis'); ?></label></p>

                                        <p><input class="text_input" type="text" name="twitter" id="twitter" value="" tabindex="4" /><label for
="twitter"><?php _e('Twitter id', 'thesis'); ?></label></p>
<?php

In the default theme, it’ll look like this:

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<p><input type="text" name="twitter" id="twitter" size="22" tabindex="4" />
<label for="twitter"><small>Twitter ID</small></label></p>


<?php endif; ?>

At this point load your site in your browser to make sure everything looks OK.

The last step is to print the Twitter ID alongside the comments. This is also done in comments.php. The comments are printed out in a loop which varies from theme to theme. In Thesis, you’ll start right after:

<?php
thesis_hook_before_comment_meta();
thesis_comment_meta($comment_number);
thesis_hook_after_comment_meta();
?>

(It’s entirely possible there’s an easier way to do this in Thesis)

In the default theme, you’ll see the following, and you’ll want to start right before it.

                        <?php comment_text() ?>

Wherever you end up starting, insert the following code:

<?php if ($comment->extra_twitter) {
// Strip out the @ if they put it there because we're going to need to get rid of it for the url anyway
$extra_twitter = preg_replace("/^@/", "", $comment->extra_twitter);
$extra_twitter = htmlentities($extra_twitter); ?>
<a href="http://twitter.com/<?=$extra_twitter ?>">@<?=$extra_twitter?></a>

<?php } // extra_twitter ?>

The Extra Comment Fields plugin puts the data from the twitter field in a method of the $comment object called extra_twitter (and if you called your variable foo, it would be called extra_foo, and so forth). The above code checks to see if it’s been set (that is, someone submitted a Twitter ID), and if so, strips off any leading “@”. This allows people to enter their Twitter IDs both with and without the @. The code then calls the htmlentities function to strip out any funny stuff, and then print it out as a link. If you want to style the link with any CSS, change the HTML accordingly.

That’s it!

Sean Walberg is a network guy, freelance author, and systems administrator.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Ganesh says:

    That’s a cool hack. Every since I saw the twitter id field on TwiTip, I’ve been curious about it. Its a great addition to a blog that talks about twitter. I think adding a twitter id field would be nice for some social blogs too.

  2. Harish says:

    Thats a great coding.The plugin is mush useful for all the twitter user who blog.And also useful to twitterers too.This sounds great and interesting to me.

  3. bonoriau says:

    This really interesting. I’m going to try immediately. thank you for the tips.

  4. bonoriau says:

    This really interesting. I’m going to try immediately. thank you for the tips. @ Bonoriau

  5. Amy Nathan says:

    Too complicated for me, but I’m saving the link for the future! I seem to now be the sounding board for all my newbie Twitter friends!

  6. Thanks! Been waiting for that info. Now… wondering how much 2.7 might mess this up…

  7. Elliot says:

    Great tip!, another resource to keep the people connected who comment on the posts;))

  8. Mike Nichols says:

    Thanks for this great tip! I use Thesis, too, and will be adding this to my site soon. But I’ll be looking for ways to use the custom.css and custom_functions.php rather than editing core files, which is now discouraged in Thesis.

  9. It’s about time you posted the directions :D This is sweet! Thanks so much Darren and Sean — I use Thesis so I get to borrow all this code exactly!

  10. I noticed the inclusion of the twitter ID on twitip. Thank you for providing the code. This will be So useful. :-)

  11. Someone should right a plug in just to do this. There are so many theme’s out there and it almost seems that every coder uses a different method of building a theme.

    I use the citrus theme from UBD, and I love it but am not sure if doing what you said above will do the trick for me or not. I am willing to send you the theme if you want to take a look at it. Just let me know.

  12. Sean says:

    @Michael Carnell – The plugin apparently works in 2.7, at least according to the comments on the plugin page

    @Mike Nichols – This was my first exposure to Thesis. There is a hook right above where the twitter id is printed, so I’m sure there is an easy way to print the comment in a separate function. However, I didn’t see any such thing for modifying the comment form itself. The CSS can be used to style the new option if you want, it has an ID

    @Colin – I’m not sure a plugin could be written to do this because there are no core hooks/filters at that point. It’s fairly easy to set up a development WordPress environment, so just give it a shot on your local machine. It’s just a matter of finding out where the stuff is printed (look at the generated source and then do a search in the code) and trying it out.

  13. Styletime says:

    Added! Thanks for that tip!

  14. Styletime says:

    Done but for some reason I have a ‘ appended to the end of the Twitter username? ;(

  15. kantush says:

    Would you be able to do this if you’re using comments plugin such as intense debate? I don’t think so, but I’ll still give it a try.

  16. thank you for this tut!!!! this rocks. works like a charm, and easy to do. needed a little tweaking for me, but it got me there :D:D:D thank you once again

  17. Andy Bailey says:

    This might be something I could write a plugin for, no form editing required I think.

    I’ll see if I can give it a go later and if it continues to be as easy as I think it might be then it could be done by the end of the weekend.

    I’ll let you know!

  18. Jake says:

    Darren/Sean – thanks for posting this. For one it is nice to see the “inner workings” and also I was looking into implementing that on my couple of blogs. Gives me a better direction to work on.

    Thanks and great post!

  19. Matt Gio says:

    Interesting. I would have never thought to add that. What a brilliant idea.

  20. Rahul says:

    Quite a cool idea. Humm…

    gosh now do i have to play with this <?php tags? not again…

  21. Like this idea – simple but valuable.

    Cheers.

    @holeinhiseye

  22. Wow. Thank you so much. This was easy to do with the step by step instructions and a value added that will continue to produce time and time again with each new comment. Thank you for the idea and willingness to share.

  23. Nice mod, I like it, it a new way to network yourself apart from the regular site.

  24. Andy Bailey says:

    I have a working version of my plugin on my local site which does all above automatically. only need to add one line to the comments.php for where you want the link to be output.

    should be finished tomorrow!

  25. Andy Bailey says:

    ok, plugin finished.
    easy install, one line to add to comments.php to show twitter id or link to users twitter page

    you can see it working here
    http://www.fiddyp.co.uk/i-just-voted-for-commentluv-in-the-mashable-web-awards/#comment-35080

    I called it WP-Twitip-ID :-)

  26. Jon Griffith says:

    Nice…greatly appreciated.

  27. Takumi_86 says:

    Good tips but unfortunately this tips wont worked on Blogspot, is there a way to put this on blogspot?

  28. Otto says:
  29. Bob says:

    Check out Sugarrae’s Social Profiles plugin for WordPress.
    http://www.sugarrae.com/wordpress/social-profiles/

    It allows you to add social network profile links to the comments of your registered users as specified by the user on their profile page. Stuff like flickr, Stumbleupon, Digg, and of course Twitter.

  30. Eric Tan says:

    Can’t get it to work… oh well…

  31. Rosario says:

    Oh my ! Wonderful post . Thank U

  32. Thanks for explaining your approach. I find it very validating because it is the same approach I came up with the day I saw it appear on Twitip. I have now implemented it on several blogs and for anyone who wants to use this approach to expand their twitter network I have created a section on my link directory just for blogs that give a twitter ID field

    http://wtfarewegoingtodonow.com/link-directory/

    One quick question Darren have you found a way for logged in folks such as admin and others to use the same field info I can come up with a couple of plugins that allow adding fields to user profile, but I can’t seem to align the same field names. I hope some coding genius is working on a plugin to address this issue. I would like to offer it to my registered users as well as casual comenters.

  33. Dan says:

    I tried twitter this and it failed. It needs lots of work and configuration which defeats it as a plug-in. A plug-in is something ready to go. You can spend a whole afternoon tinkering with the code and it still does not works well with twitter.

    Hope someone comes up with better tool.

  34. Rachel Levy says:

    Great post! And, great idea to add twitter id to blog comments (but it’s not active here!)

    @bostonmarketer

  35. Sire says:

    @-Dan…Andy Bailey did, look up a couple of comments.

  36. Thanks a lot for this mod Darren&Sean! i’m going to implement this asap.

    @PetervanVeen

  37. dedmoroz says:

    Interesting. Thank you for information! =)

  38. Very cool tweak. Thanks for sharing this. I put it up in a jiffy. One thing I would add to this is a nofollow in the Twitter ID link that is displayed so you don’t dump all your Google juice over to Twitter. This is done by adding the rel=”nofollow” tag to the link.

  39. I just discovered one problem with this. It works great other than it doesn’t display my own Twitter ID as the author of the post. Since I am already logged in, I don’t have a place to enter my Twitter ID and there is no field for me to enter my ID when I comment.

    That said, I’ll probably just put a quick check in the code to see if it is my comment and if so, display my Twitter ID.

  40. nicholi says:

    This seems interesting but has quite a few steps to follow even with the plugin. Shouldn’t the plugin do all this stuff?

  41. Fantastic! Thanks Sean. I’m using Thesis too so should make it easier to follow your instructions. Will give it a go. Many thanks.

  42. Ari Herzog says:

    I was tweaking my own Thesis code to do this very issue when I thought to myself, “I wonder if someone published a guide?” recalling Twitip.com used it.

    Thanks for the hook help (a concept I’m still figuring out) and I’d never have thought of activating a new plugin.

    All set now by clicking my name above.

  43. Young says:

    Cool.I will try it out soon.

  44. Lovely find, would like to see if bloggers will accept it or not?

  45. Young says:

    I have tried the way, and it workable but there are still two problems:

    1. there is border on the field area, but my theme has not.

    2. the background are white, but my theme is green.

    By the way, my blog use UBD Citrus Theme, so do you know how to settle the above two problems?

  46. Hans Looman says:

    Thanks for the great manual, works ok. One other thing that may be improved is a hack that actually let’s one edit the twitter ID because you will run into people that enter mistakes.
    (Just had one on the very first comment entered :-)

    Other than that: kuddos!

    @hlooman

  47. I followed directions but must have missed something. Won’t work for me?

  48. Ben says:

    Otto: Thanks for the hint, made me look into the Twitter API. I hacked together a solution based on your idea:

    Automatically add a Twitter profile link in the comments.

    Hope this helps!

  49. Jason says:

    do you have similar plugin or hack for blogspot?

    my site is http://itblood.blogspot.com and i wish to implement this.

  50. Tracy Green says:

    How woulde google make money from twitter…adding ads would not seem to work.