Tag: Twitget

Categories
Computers Notweet Programming

Twitget Improvement Addendum

Awhile back, I posted a modification to the Twitget Twitter widget I’m now using to display my tweets over there on the side bar. I’ve now made some further improvements since my original changes made an erroneous assumption about processing the tweet information.

First, hashtag links were losing the leading space when being displayed in the sidebar. The fix here was trivial, as it simply requires adding a space to the to preg_replace function calls in the process_links function that deal with generating the hashtag links.

The second fix is slightly more significant. Basically, if there are no URL entities in the tweet metadata, then the code needs to find link text within the tweet and turn it into a link. Here’s the new batch of code: 

function process_links($text, $new, $urls) {
        if($new) {
                $linkmarkup = '<a rel="nofollow" target="_blank" href="';
                $text = preg_replace('/@(\w+)/', '<a href="http://twitter.com/$1" target="_blank">@$1</a>', $text);
                $text = preg_replace('/\s#(\w+)/', ' <a href="http://twitter.com/search?q=%23$1&src=hash" target="_blank">#$1</a>', $text);
        }
        else {
                $linkmarkup = '<a rel="nofollow" href="';
                $text = preg_replace('/@(\w+)/', '<a href="http://twitter.com/$1">@$1</a>', $text);
                $text = preg_replace('/\s#(\w+)/', ' <a href="http://twitter.com/search?q=%23$1&src=hash">#$1</a>', $text);
        }

        if (!empty($urls))
                foreach($urls as $url) {  
                        $find = $url['url'];
                        $replace = $linkmarkup.$find.'">'.$url['expanded_url'].'</a>';
                        $text = str_replace($find, $replace, $text);
                }
        else {
            if ($new) {
                $text = preg_replace('@(https?://([-\w\.]+)+(d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '<a href="$1" target="_blank">$1</a>',  $text);
            }
            else {
                $text = preg_replace('@(https?://([-\w\.]+)+(d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '<a href="$1">$1</a>',  $text);
            }
        }

        return $text;
}

The framework here is pretty much identical as before. The main addition is the else clause in the if(!empty($urls)). The code after that is actually the previous link code- regexes like that are too persnickety to reinvent.

So this will suffice until the next problems surfaces.

Categories
Computers Programming

Minor Twitget Improvement

I noticed today that the Twitter feed over there was not displaying my tweets properly. Specifically, any links are displayed using the t.co URL structure which Twitter uses. I’d fixed this once before for the old feed, I figured it was worth investigating to see if I could fix it in the new one.

As it happens, the modification is pretty trivial, with only a few lines of code added in 1 source file.

The file to modify is twitget.php. Start by changing the function process_links to look like the following:

function process_links($text, $new, $urls) {
    if($new) {
        $linkmarkup = '<a rel="nofollow" target="_blank" href="';
        $text = preg_replace('/@(\w+)/', '<a href="http://twitter.com/$1" target="_blank">@$1</a>', $text);
        $text = preg_replace('/\s#(\w+)/', '<a href="http://twitter.com/search?q=%23$1&src=hash" target="_blank">#$1</a>', $text);
    }
    else {
        $linkmarkup = '<a rel="nofollow" href="';
        $text = preg_replace('/@(\w+)/', '<a href="http://twitter.com/$1">@$1</a>', $text);
        $text = preg_replace('/\s#(\w+)/', '<a href="http://twitter.com/search?q=%23$1&src=hash">#$1</a>', $text);              
    }
    if (!empty($urls))
        foreach($urls as $url){
            $find = $url['url'];
            $replace = $linkmarkup.$find.'">'.$url['expanded_url'].'</a>';
            $text = str_replace($find, $replace, $text);
        }
    return $text;
}

Here, we’ve added the argument $urls, which will come from the entities field of the tweet data. This data is used to create the appropriate anchor markup, in the foreach loop. The actual link URL is maintained, while the display URL is changed to the expanded_url field supplied by the entities information. Note I’ve also modified the replacement string for hashtag searches, adding &src=hash to the href attribute in the achor tag.

Now we need to add the entity data to the function calls. Search for the process_links function within the file. There were only two instances of it used in my version. Add the third parameter to the function calls as follows:

$link_processed = process_links($whole_tweet, $options['links_new_window'], $tweet['entities']['urls'])

That third parameter should be added to every invocation of process_links. That provides the URL information to make our earlier changes work.

That’s it. Save the file and Tweets should now display the proper link text, while still linking to the t.co URL’s as specified by Twitter’s guidelines.

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.