Categories
Admin

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.

Categories
Computers Programming

Custom More Text for WordPress Posts

A note to the less programming savvy readers out there, this one is full of programming jargon and can likely be safely ignored. In fact, unless you’re writing a blog client, you’re likely to find this one pretty uninteresting.

For those who are interested, the rest is after the link with the custom text…

Categories
Computers Notweet Programming

WP Mystique Twitter Widget

The standard Twitter widget that comes with the Mystique theme has a couple of shortcomings, in my opinion. One, any shortened URL’s are displayed using Twitters t.co link instead of whatever shortener the user may actually be using. I’ve installed a YOURLS site for just this purpose, so I’d like to see my site displayed. Second, hashtags are not linked back to a Twitter search.

Below the fold are a few lines of PHP that will address these problems. A brief word to the wise, these mods only work with Twitter’s API V1. API V1.1 will require OAuth to perform this task.