Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Twitter Avatars In Comments WordPress Plugin


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 Link

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 Sousa, a young designer with a strong passion for WordPress and Joomla!.

Twitter Avatars on WordPress Comments Plugin5

Features Link

  • 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 Link

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 Plugin6

Installation instructions Link

  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:

      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.

      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.


      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.

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

      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.

      Parameter for gravatars only.

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

      Example: Link

      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 Link

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

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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.

  1. 1

    Vitaly Friedman & Sven Lennartz

    January 8, 2009 5:22 am

    @Blogging2U (#1): that’s correct, we are going to try a number of different things in January.

  2. 2

    Raphael Camaprdou

    January 8, 2009 6:52 am

    In the same spirit, @tsaots created a WP plugin that greets you with your Twitter name. More info here.
    Neat concept, that can be developped:
    Why not greet the user via Twitter:
    “Hi Jon, I hope U enjoy reading my site. ++”

  3. 3

    Nice! Never seen anything like this before. Thanks for the plugin. I think plugins is kind of new category for freebies in SM, right?

  4. 4

    Wow, great idea and great job Ricardo! There’s loads of Twitter users that don’t have gravatars so this could be very useful.

  5. 5

    Nice plugin, I still get a lot of comments from people who don’t use Gravatar but do use Twitter.

  6. 6

    Great ideas! Both the Twitter avatars in comments plugin as well as plugins from Smashing Magazine in general.

  7. 7

    Ricardo Sousa

    January 8, 2009 5:48 am

    Thank you Smashing for publishing this plugin and users for the good comments you have been giving. :)

  8. 8

    Thanks for releasing this great plugins. fantastic idea!

  9. 9

    Very nice job! Thanks!

  10. 10

    genius. been waiting for something like this for a while now. love that it’s inclusive of gravatar and doesn’t outright replace it.


  11. 11

    Nice work, keep smashing :-)

  12. 12

    Looking good. Thanks SM!

  13. 13

    @Vitaly, that is an interesting approach. What happens if Twitter is down, it just finds the gravatar instead?

  14. 14

    That’s great!

  15. 15

    I wish I were so talented as to actually understand these instructions ;)

    Very cool concept though!

    I do have Gravatar, so I guess I will stick with that for now.

    Bella Casa blogs

  16. 16

    Karolis Pocius

    January 8, 2009 6:49 am

    Sounds nice, but here’s what I get after activating it and placing the code:

    Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set in /public_html/wp-content/plugins/twittar/twittar.php on line 178

  17. 17

    Very nice idea to get multiple avatar providers. Icons, fonts, textures, and now plugins, I like this renewal. Smashing is really a valuable resource on the web.

  18. 18

    Looks cool. I’m going to give it a try.

  19. 19

    @Karolis Pocius: yes, you will need to have cURL (libcurl) support in your PHP for this to work. You might try asking your host for this. If you have a dedicated server, installing it should be easy.

  20. 20

    Seems to work ! Great !!!

  21. 21

    Nice? Does anybody find Twitter not cool? Like me?

  22. 22

    great…. another great stuff from smashing magazine… thanks!

  23. 23

    Thanx! Will give it a go.

  24. 24

    Chris Heilmann

    January 8, 2009 8:20 am

    This is quite nice, but the performance of it is utterly terrible. For each comment you will have two http requests server side and then one client side to load the image. This could perform a lot faster if you do the lot client side (going through a PHP proxy) and delay the display of the image until the page has finished loading. That way you don’t punish users that really don’t care too much about avatars but deliver quickly.

  25. 25

    I agree with Chris that the amount of http requests this results in is unacceptable. I would however build in server-side caching. This will result in the best client side performance and it will also result in less load on the Twitter servers. That way everyone wins.

  26. 26

    Wicked! too bad Smashing isn’t using this plug-in :P

  27. 27

    Ricardo Sousa

    January 8, 2009 9:59 am

    @Chris Heilmann (#25) & @Marco (#26):

    Yeah. I thought about that too. However i wasnt able to come up with good solutions. I liked yours and will work to implement them :)

    @Chris W. (#12):

    Yes it will load gravatar instead.

    @Bella Casa (#15):

    Thanks. Anything i can help you with about instructions?

    Hope you enjoy it anyways.


  28. 28

    Anyway this could work by Twitter name and not by email address?

  29. 29

    Chris Wallace

    January 8, 2009 11:37 am

    How secure is the cURL usage in this plugin? Reason being, it could be a problem for non-techie bloggers that just “want twitter on their blog.”

  30. 30

    Ricardo Sousa

    January 8, 2009 12:47 pm

    @Chris Wallace (#31):

    Can you explain better what you mean? :)


  31. 31

    I just tried to install the plugin on my WordPress blog. Everyone who had a Twitter profile image just showed up as “Image Not Found”. It was trying to pull the images from myblogdirectory/_bigger. Pretty sure that isn’t right. Everyone who had only a Gravatar icon showed up okay. What gives? Do I need to change some code somewhere in order to get things working properly?

  32. 32

    Love it – will be implementing asap.

  33. 33

    Thanks – appreciate it.

  34. 34

    Ricardo Sousa

    January 8, 2009 4:13 pm

    Kristen (#33):

    If it is getting the images from your blog it isn’t (but remember that user must input the twitter mail :) ). So if you don’t mind can you share your blog adress so i can check?


  35. 35

    Nice plugin. Works like a charm.

  36. 36

    Brilliant :)


  37. 37

    Cool idea. You could potentially extend this to other avatar services, and have an admin menu for specifying an order of preference that the avatars appear in – like some people might prefer gravatars over avatars.

    Think I’ll wait til a later version, based on some of the comments, but awesome work!

  38. 38

    Carlos Guadián

    January 9, 2009 12:40 am


  39. 39

    Ricardo Sousa

    January 9, 2009 3:30 am

    @Laura (#39):

    Sure. I will add a couple more of things including the improvments in the global plugin way to do things so it can be more efficient. Thank you for your suggestions.

    Best Regards

  40. 40

    I don’t know why peoples use twitter?…

    Anyways Thanks for sharing.

    Omair Rais


↑ Back to top