As a blogger, you can connect to your commenters by letting them share their Twitter profile when they comment on your blog.

Wouldn’t it be cool if the commenter provides URL to their twitter profile in the website URL field, and you can add a link to a cute little icon with “Follow Me!” text right next to their comment?

So today, I’ll teach you how to add that kind of functionality to your WordPress blog.

I’m going to use the cute twitter icon offered by Function to demonstrate this technique.

1. Download the icon pack and add it to the images directory of your theme.

2. Now, we need to check if the URL in the comment URL field is linking to a twitter profile. We will do this by using regex.

Add the following code under the callback function of comments if you’re using wordpress 2.7 or under the comments foreach loop if you’re using wordpress 2.6.

If you’re using wordpress 2.7, add the following code below $GLOBALS['comment'] = $comment; line.

        $link = $comment->comment_author_url;
	$match_twitter = preg_match_all('/(.*)(twitter)\.com\/(.*)/i', $link, $matches);
	if($matches[2][0] == 'twitter' && isset($matches[3][0])) {
	  $link_to_twitter = true;
	}

3. $link_to_twitter variable will be true if the comment URL contains twitter profile URL. We can use the value of $link_to_twitter variable to add markup for twitter icon if it returns true. Following is an example of how I used $link_to_twitter variable to add twitter icon below the comment author name if it returns true.

        <p class="author_name"><?php comment_author_link(); ?></p>
        <?php if($link_to_twitter) { ?>
        <p class="author_name twitter"><a href="<?php comment_author_url(); ?>"><img src="<?php bloginfo('template_directory'); ?>/imgs/twitter_48.png" /></a></p>
        <?php } ?>

4. Now you can style the markup depending on your design.

I used the above example on Flexis (this feature comes pre-installed in Flexis). The screenshot below shows the outcome of the this technique.

Subscribe to RSS updates for more Tips and Updates.

This post is written by Muhammad Haris. You can follow him on twitter @mharis.