How to Integrate Twitter to WordPress Blog Comments
Twitter is the most important tool in the social media industry today. Everyone is looking for a way to get connected with the tweeps at Twitterville.
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.
Shark SEO
21st Apr, 09
Genius! That’s a really cool feature that I’ll use soon, thanks!
Marco
21st Apr, 09
Pretty cool and interesting technique, can’t wait to see it work.
http://twitter.com/marcofolio/
Keep up the good work!
Marco
21st Apr, 09
Oh darn, it probably only works when the user added the URL in the “website” input field. You might want to do it in the actual comment too, since many people will post it there!
Haris
21st Apr, 09
@Shark Thanks for your kind comments. Hope you’ll implement this on your blogs.
@Marco I haven’t added this technique to TS blog yet but I will add it as soon as possible. Yes, you have to add link to your twitter profile in the website URL input field however, you can modify the same code above to scan through the actual comment and add twitter icon beside the commenter profile but if there are enough requests, I will blog the recipe.
Web Designer
21st Apr, 09
Very good feature indeed. it will definitely add some values to the twitters
Haris
21st Apr, 09
I am glad to be helpful Web Designer. Stay tuned for more.
Chri
21st Apr, 09
I am using the Una-theme (http://dinolatoga.com/2008/07/04/una-wordpress-theme/), so I dont need it, but this was a great feature! Keep up the good work
Haris
21st Apr, 09
Chri, you can integrate it in your own theme by following the steps above.
links for 2009-04-21 « Giri’s Blogmarks
21st Apr, 09
[...] Integrate twitter with worpdress comments (tags: wordpress twitter) [...]
Alex Mihaileanu
21st Apr, 09
The funny thing is that no one actually signed the comment with his Twitter URL
). I’ll do that just for testing.
I think you should check out this plugin as well: http://www.fiddyp.co.uk/wp-twitip-id-plugin-add-a-twitter-field-to-your-comment-form-easily/ – if I understood well, it creates an extra comment field for the Twitter URL and after publishing the comment, it ads (under the Gravatar, if you want) a “Follow me” button. That should be cute
Haris
21st Apr, 09
@Alex: Yeah, that is true. I know about the plugin. You can use that plugin but my solution is without the use of the plugin. One less plugin is better. Stay tuned for part 2 of this post where I will share another method to integrate twitter with blog comments.
Mark Fulton
24th Apr, 09
Cool idea
I think it would be better to have two fields, one for personal website an additional optional field for Twitter profile. I have seen this before on sites like TwiTip.com
Monday Morning Roundup - April 27, 2009 — WPCandy — WordPress Themes, Plugins, Tips, and Tricks
27th Apr, 09
[...] How to Integrate Twitter to WordPress Blog Comments – everyone likes a link back to their Twitter profile, right? (mine is @danphilibin) In this tutorial, you’ll learn how to let your blog commentators share a link to their Twitter profile if they enter that in the website URL field when commentating. Awesome! [Link] [...]
PimpMyWordPress
28th Apr, 09
Great post. Can’t wait to give a try.
ahmed
15th May, 09
Now everybody is talking about twitter power so this technique will be very helpful.
chauhan
18th May, 09
Nice posting which can help to each and every person those are using wordpress and twitter.
http://twitter.com/chauhanajit
Mahesh
22nd May, 09
Nice tutorial.. Thanks!
links for 2009-04-21 .:: [aka щямукюшт] Ozver.in | Озверин
14th Jun, 09
[...] How to Integrate Twitter to WordPress Blog Comments (tags: twitter wordpress blog code webdev comments) [...]
Monday Morning Roundup – April 27, 2009 | Word Press Magazine
15th Jul, 09
[...] How to Integrate Twitter to WordPress Blog Comments – everyone likes a link back to their Twitter profile, right? (mine is @danphilibin) In this tutorial, you’ll learn how to let your blog commentators share a link to their Twitter profile if they enter that in the website URL field when commentating. Awesome! [Link] [...]