So today I needed to display photos from our Flickr Group without using php or asp.net. I have a WordPress widget that does this job nicely, but no PHP was allowed.
Thank goodness for jQuery! jQuery has a handy little function which allows us to load JSON data using an HTTP GET request, and then process the contents as an array. And with some natty CSS to square things up as a grid, I have nine random (ish) photos from our Flickr group displaying in a nice 3×3 grid.
(If that looks strange, make sure you check out part 1 of this tutorial!)
We now have our Tweets stored in $result so we can just cycle through them and print them out in our widget. To do that we need the next bit of code.
Rather than explain each line after the code, I have heavily commented it which takes you through the process step-by-step…
// If there are no results, lets pop up a default message
if ($result===false) {
echo "Sorry, nobody's home! Back in five.";
// Success! We have Tweets! Let's display 'em!
} else {
// First we grab our CSS stylesheet. It's a really simple one, but it's good practice to
// keep this in a seperate file.
echo'
';
// We need a way to count the number of Tweets we display, so let's start a counter at '0'.
$iTweets = 0;
// The first piece of HTML. The
class 'WordTweet' is there for our CSS styling
// The
unordered list is how we'll be displaying each Tweet
echo '
';
// For each part of the array, in other words each Tweet, we grab the
// string and call it $tweet
foreach ($result as $tweet) {
// We're interested in the text within the Tweet, not the other
// information like date (until later!). Let's grab that and call it $message.
$message = (string)$tweet->text;
// Now I like to take our any Tweets beginning with '@', as these are replies specifically
// to other people. If you wanted you could take this bit out, but don't forget to remove the
// closing '}'
if (substr($message,0,1) != "@" && ($iTweets < $options['tweets']+1)) {
// make_clickable is a helpful WordPress function that takes things like email addresses
// and websites in a string of text and turns them into links. Ah, the joy of regular
// expressions!!
$message = make_clickable($message);
// I don't display the first, as it's in the header of my theme, so I skip the first Tweet
//by making sure that $iTweet is greater than 0.
if ($iTweets > 0) { // You could take this line out...
// Display the Tweet, nestled in a
tag
echo '
' . $message . '
';
} // ...but you'd need to remove this too!
// That's one Tweet down, so let's increase $iTweet by 1
// and move on to the next
$iTweets++;
} // End of the If statement
} // End of the foreach loop
// Finish up our HTML output
echo '
';
} // End of the if ($result===false) statement
// And now that last bit of HTML from the WordPress Theme
echo $after_widget;
}
Make sense? Let’s take a look at two lines in a bit more detail.
echo'
';
get_bloginfo is a handy WordPress function which returns various useful pieces of information. For example, get_bloginfo(‘template_directory’) returns, you’ve guessed it, the URL of the template directory.
With get_bloginfo(‘url’) we are grabbing the blog URI which the user has set in Settings. We then just add in the path to the .css file, which we know is in the WordTweet directory.
Secondly,
if (substr($message,0,1) != "@" && ($iTweets < $options['tweets']+1)) {
So, (substr($message,0,1) is a way of grabbing a sub-string (part of a string) from our string $message. We are interested in the first character, because I want to know if it's a '@', so we add to parameters '0,1' The first parameter tells PHP where to start, and we start with the first character which is in position '0'. The second parameter is how many characters we want, in our case just the '1'.
We then check to see if this is NOT equal to '@' with !=. If it's NOT '@' then it's not a Twitter reply and so we can display this Tweet. But we have one more check to make!
The second part of that If statement checks to make sure we are only displaying the number of Tweets the user specified. Initially this was just set as $options['tweets'], but I had to change it to +1. Why? Because I'm not displaying the first Tweet (it appears in the header of my site) I need to start on Tweet 1, not Tweet 0 (the first in our array). Which means if I want to display 5 Tweets I actually have to loop through until 5 (rather than 4 - remember 0 to 4 is FIVE Tweets).
I hope that makes sense, as it's rather convoluted. If your blog doesn't display Tweets anywhere else, you can remove the && ($iTweets < $options['tweets']+1)) bit.
Right, that's it for part 2. Part three will finish things off with the options and look at the css. It's in the css that we add the Twitter logo. I'll also suggest some further reading, and ways you can develop this simple script further.
So you may have noticed in the sidebar over there on the right there’s a bunch of my recent Tweets. There are plenty of WordPress Twitter widgets, some better than others, but why not start and write your own? In this three part tutorial we’ll look at putting together the basic code, and then in further episodes we’ll start getting a little more advanced with some jQuery scripting.
First things first, make sure you read and understand the How to Create a WordPress Widget Tutorial, as we’ll be building on that code. In fact, adding in the Twitter code is reasonably straightforward.
Twitter has a API we can use to grab all the details, but our life get easy if we use a prewritten PHP class that does some of the hard work for us. A couple are kicking around out there, but I’m going to work with the lightweight twitterPHP by David Billingham. It doesn’t include all the functionality of the Twitter API, but it’s got everything we need to kick off with.