Primary Menu

Getting Social with Postscript5

The introduction

If you have ever seen my twitter interaction with Grace Smith then you know that we are pretty endearing to each other as friends and colleagues in the world of freelance. Over the past few years that we’ve known of each other, we have grown to trust each other and rely on the other’s professionalism and knowledge in our respective areas of expertise. Needless to say, we knew we’d work together professionally eventually, it was simply always a question of when.

Grace knew that her professional portfolio website needed a facelift in 2011. However, like with a lot of freelance professionals, personal projects tend to get the back seat frequently to incoming client work. This, she realized, opened the door for her bring myself into the mix and finally get us working on a project together. Grace proceeded to get the site to a certain point within her skills and knowledge, and then created a spec list of more advanced functionality that she had always desired for her site. The topic of this post was not one of her original requests. The “social” page was an idea that I brought to the table due to my desire to tinker and play with social media APIs. Grace ended up loving the idea of a single page showing her activity on many websites and gave me the green-light to have some fun and see what comes to fruition.

The Implementation

The files and code that I’m going to discuss are not the original implementation, but are what is live on Postscript5 Socialise page at the moment. I have taken only the relevant code/markup from the socialise page, as the rest is just a WordPress template for the page. I’m sure there is room for more consistency but I’m going to call that a work in progress.

Text files with the code. Viewing these directly may be easier to read than the Pre tags I’ll use below.

Most of this should be pretty easy to follow. I am using file_get_contents() to pull in our data from the various APIs and RSS feeds, with the exception of Twitter and Dribbble. I stuck with JSON when possible, but it wasn’t available for everything that Grace wanted.

Google+ doesn’t have a proper API quite yet, but searching around showed various methods to get a person’s public stream in JSON format, after a bit of cleanup. That explains the multiple str_replace() calls. Once one gets publicly released, I hope to return to the Socialise page and alter the working code.

Flickr didn’t offer a direct way, that I could see at least, to pull the actual image URLs from a person’s public stream. So I looked over their documentation and found that I could construct the necessary url with the Public Photo stream information and a second API call with each photo’s information. This allowed me to complete what you see on the page and get thumbnail versions of her three latest pictures.

Now that I had all of this information in arrays or objects, I could start to loop through them all and output the appropriate markup.

Hopefully this is also pretty self exclamatory. I either started looping through the data, or further manipulated the data with SimpleXMLElement for easier looping through the RSS feeds. A lot of the loops above include a counter because they didn’t offer a limit parameter and we only needed the latest post, or in the cases of Dribbble and Flickr, the latest 3 pictures. Each icon on the left of Grace’s socialise page links to her profile page, and then the right shows the latest message/item/pictures. I also included a general error message for each one in case there were any difficulties with retrieving the data.

But wait! You forgot to explain what’s going on with Twitter and Dribbble!

Ah yes, Twitter and Dribbble. On top of my interest in APIs, I have also recently formed interest in Object-orientated Programming in PHP, and viewed this as a chance to try my hand at it a bit more.

The way that both Twitter and Dribbble work on the Socialise page is to initialize a new instance from the class, and then call the getTweets() and getShots() functions within the classes. Both of these functions utilize the WordPress Transients API to help with caching. So to pull the data for the user, you pass in the user ID, the name you want to use for the transients field in the Options table, and in the case of Twitter, how many tweets you want to retrieve. The classes will check to see if their is any valid cache stored. If there is none, it will make a new API call and set a new cache instance. If there is a valid cache record, it will simply pull that and not touch the API. The Twitter cache is set to expire every 5 minutes, since Grace tends to be a lot more active there than on Dribbble, which has a cache time of 3 days

Hopefully this makes sense to those with PHP experience. However, I’m sure not everyone who reads this will have a lot of experience, so if you have any questions regarding how any of it works, please ask in the comment section. I’ll do what I can to help clarify.

I know that I had fun with coding the socialise page and definitely learned new things in the process. Based on feedback from Grace and from my own twitter stream, the socialise page has been one of the most loved parts of Grace’s re-launched site, right up next to the custom 404 page with 30 Rock’s Liz Lemon.

Post navigation

7 thoughts on “Getting Social with Postscript5”

Michael, superb post! I’m so glad you wrote about the process of developing this page, because so many people have asked how the Socialise page was created and I think this will answer a lot of questions out there.

I’ve loved every second working with you and without you the new Postscript5 would not be 1/10th of what it is 🙂