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 Twitter as well.

Although we aren’t sure if Twitter will actually revolutionize blogs (as other blogs claim), 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-ins 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 Sousa, a young designer with a strong passion for WordPress and Joomla!.

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.

• download the plugin (.zip, 9 Kb)

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