Menu Search
Jump to the content X X
The Smashing Book #5

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. new Smashing Book 5 features smart responsive design techniques and 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 Sousa95, a young designer with a strong passion for WordPress and Joomla!.

Twitter Avatars on WordPress Comments Plugin6

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 Plugin7

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 Sousa95, a young designer with a strong passion for WordPress and Joomla!. You can follow him on Twitter10.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
SmashingConf Oxford

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 Oxford, on March 15—16, 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

    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

    Great work – this and Tweetbacks will be awesome

  15. 15

    That’s great!

  16. 16

    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

  17. 17

    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

  18. 18

    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.

  19. 19

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

  20. 20

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

  21. 21

    Seems to work ! Great !!!

  22. 22

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

  23. 23

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

  24. 24

    Thanx! Will give it a go.

  25. 25

    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.

  26. 26

    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.

  27. 27

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

  28. 28

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


  29. 29

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

  30. 30

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


↑ Back to top