New and Improved Twitter Widget

I’ve been aware that my Twitter feed was not working. Twitter deprecated their original API and that pretty much killed the stock widget that my theme, Mystique, provided. I knew what need to be done to make it work again, but I never could find the time needed to sit down and work it out. Such is the life of an at-home Dad.

Thankfully, I’m not the only WordPress user out here on the Interwebs. I’m also not the only Mystique theme user. I checked in at the theme author’s web site to see if there might be anything in the works. There, I came across this forum posting. The topic title pretty much says it all.

So that lead me to Twitget which I’ve determined is a perfectly delightful little widget that does exactly what is needed. It handles the credential side of Twitter and grabs all the desired info to build a Twitter widget. Even more impressively, it provides an area within it’s settings to completely customize the look of the tweets.

I started with the coding concoction from the forum link, and then slowly molded it into the following framework:

<div class="latest-tweets">
<div class="info box clear-block">
    <div class="avatar">
        <img width="48" height="48" src="{$profile_image}" alt="{$user_real_name}" />
    </div>
    <div class="details">
        <a href="http://www.twitter.com/{$user_twitter_name}/" title="">@{$user_twitter_name}</a>
        <span class="followers"> {$follower_count} followers</span>
    </div>
</div>
<ul class="tweets box">
    {$tweets_start}
    <li class="entry first">{$tweet_text}
    <ul class="twitter_social">
        <li class="tweet_date"><a href="{$tweet_link}" rel="nofollow">{$tweet_time}</a></li>
        <li class="twitter_reply"><a title="Reply" href="{$reply_link}" rel="nofollow"></a></li>
        <li class="twitter_retweet"><a title="ReTweet" href="{$retweet_link}" rel="nofollow"></a></li>
        <li class="twitter_fav"><a title="Favorite" href="{$favorite_link}" rel="nofollow"></a></li>
    </ul>
    </li>
    {$tweets_end}
</ul>

This snippet of HTML goes in a text box within Twitget’s settings page in the blog admin area.

I also had to engage in some CSS magic to take care of the Reply, ReTweet, and Favorite buttons. Well, I call it magic since it was a first for me using the technique. Basically, I used a single PNG file with all of the necessary icons in it to generate the links, along with the hover effects. Googling “css sprites png hover” should turn up plenty of useful examples.

So a big thanks to the guys in the forum as well as Twitget’s author. This solution integrates well with Mystique and makes for easier customization as well. A solid solution all the way around.