Twitter Avatars In Comments WordPress Plugin

Advertisement

Over the last months, Twitter has become extremely popular across the Web, with more blogs, magazines and companies using it to communicate with their audiences and customers. Even we started Twittering a couple of months ago and have over 3,650 followers now. Please feel free to join us and follow Smashing Magazine on Twitter1 Follow us on Twitter2 as well.

Although we aren’t sure if Twitter will actually revolutionize blogs (as other blogs claim3), Twitter is definitely changing the way website owners communicate with their visitors, and we, designers, need to be aware of that and use appropriate tools to meet the expectations of our clients. Unfortunately, there are not that many plug-ins4 and extensions for Twitter out there, so we decided to release one: the Twitter Comments WordPress Plug-In.

Twittar WordPress Plugin

The objective was quite simple: create a plug-in that uses Twitter to show avatars in comments in WordPress blogs. But after discovering the potential of the Twitter API, the plug-in evolved into a complete “avatar for comments” solution for WordPress. The plug-in was developed by Ricardo Sousa95, a young designer with a strong passion for WordPress and Joomla!.

Twitter Avatars on WordPress Comments Plugin6

Features

  • Loads user’s avatar by matching the email address to the user’s Twitter email address.
  • If user doesn’t have a Twitter account, it first tries to load user’s gravatar. If user doesn’t have a gravatar, it loads a default image. This is an optional setting.
  • You can set a 2-pixel border to the images (you choose the color).
  • You can choose the size: we suggest 24, 48 or 72 pixels.
  • You can set an image other than the default one to load if a user doesn’t have a Twitter account or a gravatar.
  • It builds a valid image for you (with alt and title attributes, etc.) based on user details.
  • Allows you to add a class to the image, so you can style it later.

Download the plugin for free

The plug-in is released under the GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you would like to spread the word. You may modify the plug-in as you wish.

Twitter Avatars on WordPress Comments Plugin7

Installation instructions

  1. Copy the “twitter” folder to your plug-in folder (wp_root/wp-content/plugins).
  2. Log in to your WordPress administrator panel, and activate this plug-in (click “Plug-ins” and then “Activate” near the plug-in title).
  3. Now you will need to edit your template’s comments.php file to show the avatar near the user comment.
    1. Click on “Appearance” and then “Editor” in your WordPress back end.
    2. Choose comments.php or comment.php or the PHP file that manages your user comments.
    3. Find the lines where the template manages the comments, and add the following line where you want to show the user’s avatar:
      <?php twittar(size, placeholderimg, border, class, usegravatar, rating); ?>

      Note: You may need to change your template. If your template already supports gravatars in comments, you will need to delete the gravatar tag and add twittar. You may need to make some adjustments in order to show the avatar properly.

      You must change the values inside twittar();. Here’s how:

      size
      The size of the avatar (in pixels). Just insert the number (e.g. 45), without “px.” It is the size for both width and height.

      placeholderimg
      The URL for the image you want to use when the user has neither a Twitter account nor a gravatar. Must be inside quotes (“”). Optional.

      border

      The color for the 2px border. Insert the hexadecimal code of the color (e.g. “#FFFFFF” with the “” marks) but only if you want to use one.

      class
      A CSS class that you want to use to style the avatar. For example: “myimg.” In the CSS, you would include .myimg { }. Put inside “”.

      usegravatar
      Just insert 1 if you want to use gravatars, and 0 if you don’t. If you choose to use gravatars, it will try to load a gravatar image if a Twitter account and picture is not found, otherwise it will load the placeholderimg (default) image directly.

      rating
      Parameter for gravatars only. Read more at www.gravatar.com.

      Note: if you want to skip a parameter and add another in front of it, just replace it with “”.

      Example:

      An example configuration could be:

      <?php twittar("45", "", "", "myimg", 1, "R"); ?>

      Recommended sizes for images: 24, 48 or 72 px.

    4. Save the file and enjoy Twitter avatars (see the image below).

Please feel free to post questions about installation in the comments.

About the author

The plug-in was developed by Ricardo Sousa95, a young designer with a strong passion for WordPress and Joomla!. You can follow him on Twitter10.

Footnotes

  1. 1 http://twitter.com/smashingmag
  2. 2 http://twitter.com/smashingmag
  3. 3 http://mashable.com/2009/01/04/twitter-blog-design/
  4. 4 http://www.quickonlinetips.com/archives/2007/04/10-best-twitter-tools-for-wordpress-blogs/
  5. 5 http://www.ricardojrsousa.com
  6. 6 http://www.smashingmagazine.com/images/twitter-avatars-wordpress-comments-plugin/twittar.zip
  7. 7 http://www.smashingmagazine.com/images/twitter-avatars-wordpress-comments-plugin/twittar.zip
  8. 8 http://www.smashingmagazine.com/images/twitter-avatars-wordpress-comments-plugin/twittar.zip
  9. 9 http://www.ricardojrsousa.com
  10. 10 http://www.twitter.com/ricardojrsousa

↑ Back to top Tweet itShare on Facebook

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

Advertisement
  1. 1

    testing testing

    0
  2. 152
  3. 303

    This doesn’t work due to changes in the Twitter API.

    The script tries to find Twitter account information via:
    http://twitter.com/users/show/show.xml?email=email@address.com

    However, Twitter have stopped allowing searches based on the email address, so therefore this sadly can no longer be done. You can however use the following URL to grab the Twitter avatar based on the screen name, but you will need to ask for this information from the user in the comment form. See this URL:
    http://twitter.com/users/show/show.xml?screen_name=jamiebicknell

    0
  4. 454

    Antonio Bustamante

    February 7, 2010 7:11 am

    Jamie is totally right, the parameter ’email’ was deprecated in the Twitter API, and there is no practical way to do it. You could try to perform a ‘search’ according to the nickname of the visitor, but that requires authentication. It’s a shame, but I guess spammers found a way to take advantage of that feature.

    My suggestion is that Smashing Magazine should modify the plugin for it to work at least with Gravatar (but you don’t need a plugin for that)… so maybe a small warning message to the visitors regarding this situation?

    0
  5. 605

    Can you provide more information on other wordpress plugins, or do you have some resources you can share with us where we can find such useful stuff? Thanks.

    0
  6. 756

    thank youuuu saolun

    0
  7. 907

    thanks!

    0
  8. 1058

    thankyouuu

    0
  9. 1209
  10. 1360

    Nem funciona :/ Don’t works

    0
  11. 1511

    Does Smashing Magazine use this method?

    0
  12. 1662

    testing

    0
  13. 1813

    Holy shit, can somebody update this post saying this plugin does NOT work anymore? before anyone else, like me, wastes an hour trying to get it to work, only to find out the hard way…

    0
  14. 1964

    Looks like Twitter deprecated the email parameter in its API call, so the showUser($id) function no longer works. Too bad, really, because this looked like a pretty cool plugin.

    0
  15. 2115

    I like to post this comment .It helps a lot.The one thing I do know for sure, if that day comes, is that when it’s wedding cake cutting time, I will NOT make the same mistake I witness at every wedding. I will not be serving Champagne with dessert, but rather the slightly sweet and fizzy dessert wine,..

    Thanks and Regards

    0
  16. 2266

    Fine-sharing have been, thank you…

    0
  17. 2417

    Im going make a test. :)

    0
  18. 2568

    Failed

    0
  19. 2719

    It’s not working :/… The Twitter API has been updated!

    0
  20. 2870

    Hey Ricardo,

    Hope this works nicely with WP 3.x. Gravatars and Twitcons. Nice.

    Rats….Jamie Bicknell and other report that changes at Twitter will make this not work nicely. What a shame.

    Cheers,
    Tim

    0
  21. 3021

    Hi great plugin thanks!

    0
  22. 3172

    Testing

    0
  23. 3323

    prova

    0
  24. 3474
  25. 3625
  26. 3776

    Does this works with WAMP? I don’t know why but on my ‘local’ I have everyone ‘without twitter like ‘ – with default avatar:-(
    P.S. php_curl works

    P.S. Twitter api change!!!!!!!!!!!!!!

    0
  27. 3927

    i don’t get it:
    comments are displayed with the wordpress command
    how am i meant to ‘Find the lines where the template manages the comments, and add the following line where you want to show the user’s avatar’?

    0
  28. 4078

    Wow! Just testing

    0
  29. 4229

    I want to try this, but I’m a little confused…

    1) Does this work with Disqus? (for people who don’t already have an avatar)

    2) Does this plugin ONLY apply to people who have no avatar? I don’t want it to replace existing avatars with a twitter one, just to be there in case someone doesn’t have one at all.

    If the answers to both of those are yes, then I’ll install it.

    0

↑ Back to top