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 Barcelona, 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:

      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: 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 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 https://www.smashingmagazine.com/images/twitter-avatars-wordpress-comments-plugin/twittar.zip
  6. 6 https://www.smashingmagazine.com/images/twitter-avatars-wordpress-comments-plugin/twittar.zip
  7. 7 https://www.smashingmagazine.com/images/twitter-avatars-wordpress-comments-plugin/twittar.zip
  8. 8 http://www.twitter.com/ricardojrsousa
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 Barcelona, on October 25–26, 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.

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

    0
  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?

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

    0
  5. 5

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

    -1
  6. 6

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

    1
  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. :)

    1
  8. 8

    Thanks for releasing this great plugins. fantastic idea!

    -1
  9. 9

    Very nice job! Thanks!

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

    ciao,
    ‘enzo

    http://twitter.com/_enzo

    0
  11. 11

    Nice work, keep smashing :-)

    0
  12. 12

    Looking good. Thanks SM!

    0
  13. 13

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

    0
  14. 14

    That’s great!
    TNX!

    0
  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
    Bella Casa blogs

    1
  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

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

    0
  18. 18

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

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

    0
  20. 20

    Seems to work ! Great !!!

    0

↑ Back to top