Michaelbox » howto http://michaelbox.net A container of ideas, creativity, passions, and adventures Sat, 04 Feb 2012 20:15:11 +0000 en hourly 1 http://wordpress.org/?v= Getting Social with Postscript5 http://michaelbox.net/2011/08/23/getting-social-with-postscript5/ http://michaelbox.net/2011/08/23/getting-social-with-postscript5/#comments Tue, 23 Aug 2011 20:41:07 +0000 tw2113 http://michaelbox.net/?p=266 Warning, long post

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.

Socialise page code

PHP Classes for Twitter/Dribbble

Retrieving our data

include('ps5socialclass.php');
 
    //Twitter
    $twitter = new Twitter();
    $tweets = $twitter->getTweets('gracesmith', 'tweet-list', '1');
 
    //Dribbble
    $dribbble = new Dribbble();
    $shots = $dribbble->getShots('gracesmith', 'dribbble-shots');
 
    //Google+
    $googledata = file_get_contents("https://plus.google.com/_/stream/getactivities/?&sp=[1,2,'117113113218324562969',null,null,10,null,'social.google.com',[]]");
 
    //remove excess stuff
    $gplus = str_replace(")]}'", "", $googledata);
    $gplus = str_replace('[,' , '["",' , $gplus);
    $gplus = str_replace(',,' , ',"",' , $gplus);
    $gplus = str_replace(',,' , ',"",' , $gplus);
    $gplus_data = json_decode($gplus);
 
    //Sc.ripted
    $scriptedfeed = file_get_contents('http://sc.ripted.com/rss');
 
    //gracesmith.co.uk
    $blogfeed = file_get_contents('http://feeds2.feedburner.com/gracesmith');
 
    //last.fm
    $lastfm = file_get_contents('http://ws.audioscrobbler.com/1.0/user/postscript5/recenttracks.rss');
 
    //Flickr     
    $flickr = json_decode( file_get_contents("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&format=json&api_key=KEY_HIDDEN&user_id=27475012@N06&per_page=3&nojsoncallback=1") );
 
    $photoset = array();
    	if(isset($flickr)) {
    		foreach($flickr->photos->photo as $thepic) {
    			$picid = $thepic->id;
    			$photoset[] = json_decode(file_get_contents("http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=KEY_HIDDEN&photo_id=$picid&format=json&nojsoncallback=1") );
    		}
 
	}

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.

<div class="twitter">
		<?php if($tweets) { ?>
			<div class="social_icon">
				<a href="http://www.twitter.com/<?php echo $tweets[0]->user->screen_name; ?>" title="Twitter Profile">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Twitter-Social.png" alt="Twitter icon" /></a>
			</div>
 
 
			<?php foreach($tweets as $tweet) { ?>
 
			<div class="fake_lemon_quotes">
 
			<p class="thetweet"><?php echo $tweet->text; ?><br/>
			- <a href="http://www.twitter.com/<?php echo $tweet->user->screen_name; ?>/status/<?php echo $tweet->id; ?>" title="Permalink"><?php echo human_time_diff(strtotime($tweet->created_at)) . ' ago'; ?></a></p>
 
			</div>
 
			<?php } 
 
		} else { ?>
			<div class="social_icon error">
 
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Twitter-Social.png" alt="Twitter icon" />
 
			</div>
 
			<p>We're sorry, we seem to be experiencing some technical difficulties with Twitter. Hopefully we'll be back shortly</p>
 
		<?php } ?>
	</div>
 
 
 
    <div class="flickr">
    	<?php if($flickr) { ?>
    		<div class="social_icon">
    			<a href="http://www.flickr.com/people/<?php echo $flickr->photos->photo[0]->owner; ?>" title="Flickr Profile">
    			<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Flickr-Social.png" alt="Flickr icon" /></a>
    		</div>
 
    		<div class="flickrset">
 
			<?php $counter = 1;
 
			foreach($photoset as $photo) { ?>
 
				<?php if($counter < 4) { ?>
 
				<div class="flickrimg <?php if($counter == 3) echo 'lastshot'; ?>">
 
					<a href="<?php echo $photo->photo->urls->url[0]->_content; ?>" title="<?php echo $photo->photo->title->_content; ?>">
					<img src="http://farm<?php echo $photo->photo->farm;?>.static.flickr.com/<?php echo $photo->photo->server; ?>/<?php echo $photo->photo->id; ?>_<?php echo $photo->photo->secret; ?>_m.jpg" class="flickrpreview" alt="Flickr image preview" /></a>
 
					<p><a href="<?php echo $photo->photo->urls->url[0]->_content; ?>" class="flickrlink" title="Shot URL"><?php echo $photo->photo->title->_content; ?></a> 
					<span class="datetaken"><?php echo date("j M", $photo->photo->dates->posted); ?></span></p>
 
				</div>
 
				<?php } $counter++;
 
			} ?>
			</div>
 
		<?php } else { ?>
			<div class="social_icon error">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Flickr-Social.png" alt="Flickr icon" />
			</div>
			<p>We're sorry, we seem to be experiencing some technical difficulties with Flickr. Hopefully we'll be back shortly</p>
 
		<?php } ?>
 
	</div>
 
 
 
    <div class="theblog">
 
		<?php if($blogfeed) {
			$x = new SimpleXmlElement($blogfeed);
			$posts = $x->channel->item;
			$counter = 1; ?>
			<div class="social_icon">
				<a href="<?php echo $x->channel->link; ?>" title="<?php echo $x->channel->description; ?>">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/WP-Social.png" alt="Blog icon" /></a>
			</div>
 
			<?php foreach($posts as $post) {
 
            	if($counter == 1) { ?>
 
            	<p class="blogitem"><?php echo $post->title; ?><br/>
 
            	- <a href="<?php echo $post->guid; ?>" title="Permalink to <?php echo $post->title; ?>">Permalink</a></p>
 
            	<?php $counter++;
 
            	}
 
            }
		} else { ?>
			<div class="social_icon error">
 
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/WP-Social.png" alt="Blog icon" />
 
			</div>
 
            <p>We're sorry, we seem to be experiencing some technical difficulties with the blog feed. Hopefully we'll be back shortly</p>
 
		<?php } ?>
 
	</div>
 
 
 
	<div class="googleplus">
 
    	<?php if($gplus_data) {
    		$gplus_data = $gplus_data[1][0]; ?>
 
	        	<div class="social_icon">
    	    		<a href="http://plus.google.com/<?php echo $gplus_data[0][16]; ?>/posts" title="Google+ Profile">
    	    	<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Google-Social.png" alt="Google+ Icon" /></a>
 
				</div>
 
			<?php $counter = 1;
			foreach($gplus_data as $plus) { 
 
				if($counter == 1) { ?>
 
				<p class="pluses"><?php echo $plus[20]; ?><br/>
 
				- <a href="https://plus.google.com/<?php echo $plus[21]; ?>" title="Permalink to <?php echo $plus[20]; ?>">Permalink</a></p>
 
				<?php }
 
			$counter++;
 
			}
 
		} else { ?>
 
			<div class="social_icon error">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Google-Social.png" alt="Google+ Icon" />
			</div>
 
			<p>We're sorry, we seem to be experiencing some technical difficulties with Google+. Hopefully we'll be back shortly</p>
 
		<?php } ?>
 
	</div>
 
 
 
    <div class="scripted">
 
		<?php if($scriptedfeed) {
			$x = new SimpleXmlElement($scriptedfeed);
			$scriptedposts = $x->channel->item;
			$counter = 1; ?>
			<div class="social_icon">
				<a href="<?php echo $x->channel->link; ?>" title="<?php echo $x->channel->description; ?>">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Tumblr-Social.png" alt="Blog icon" /></a>
			</div>
 
			<?php foreach($scriptedposts as $scripted) {
				if($counter == 1) { 
 
            		$description = explode(": ", $scripted->description);
 
					$description[1] = str_replace('<p>', '', $description[1]);
 
					$description[1] = str_replace('</p>', '', $description[1]);
 
            	?>
 
            	<p class="scripteditem"><span class="scriptedtitle"><?php echo $description[0]; ?></span> - <?php echo $description[1]; ?><br/>
 
            	- <a href="<?php echo $scripted->guid; ?>" title="Permalink to <?php echo $scripted->title; ?> on Sc.ripted">Permalink</a></p>
 
            	<?php $counter++;
 
            	}
 
            }
		} else { ?>
			<div class="social_icon error">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Tumblr-Social.png" alt="Blog icon" />
			</div>
 
            <p>We're sorry, we seem to be experiencing some technical difficulties with the Sc.ripted feed. Hopefully we'll be back shortly</p>
 
		<?php } ?>
 
	</div>
 
	<div class="dribbble">
		<?php if($shots) { ?>
			<div class="social_icon">
				<a href="<?php echo $shots->shots[0]->player->url; ?>" title="Dribbble Profile">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Dribbble-Social.png" alt="Dribbble Avatar" /></a>
			</div>
 
			<!--The Lemon would be dunking on you-->
 
			<div class="points">
 
			<?php
 
			$myshots = $shots->shots;
 
			$counter = 1;
 
			foreach($myshots as $shot) { ?>
 
				<?php if($counter < 4) { ?>
 
				<div class="shots <?php if($counter == 3) echo 'lastshot'; ?>">
 
				<a href="<?php echo $shot->short_url; ?>" title="<?php echo $shot->title; ?>">
				<img src="<?php echo $shot->image_teaser_url; ?>" class="shotpreview" alt="Shot preview" /></a>
 
				<p><a href="<?php echo $shot->short_url; ?>" class="shotlink" title="Shot URL"><?php echo $shot->title; ?></a></p>
 
				</div>
 
				<?php } $counter++;
 
			} ?>
			</div>
 
 
		<?php } else { ?>
 
			<div class="social_icon">
 
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/Dribbble-Social.png" alt="Dribbble Avatar" />
 
			</div>
 
			<p>We're sorry, we seem to be experiencing some technical difficulties with Dribbble. Hopefully we'll be back shortly</p>
 
		<?php } ?>
 
	</div>
 
	<div class="lastfm">
		<?php if($lastfm) {
			$x = new SimpleXmlElement($lastfm);
 
            $songs = $x->channel->item;
 
            $counter = 1; ?>
 
			<div class="social_icon">
 
				<a href="<?php echo $x->channel->link; ?>" title="<?php echo $x->channel->title; ?>">
 
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/LastFM-Social.png" alt="Last.fm icon" /></a>
 
			</div>
 
			<?php foreach($songs as $song) {
				if($counter == 1) { ?>
				<p class="songlisting">Listened to: <?php echo $song->title; ?><br/>
				- <a href="<?php echo $song->link; ?>" title="Permalink to <?php echo $song->title; ?>">Permalink</a></p>
				<?php $counter++;
 
            	}
 
            }
		} else { ?>
			<div class="social_icon error">
				<img src="<?php bloginfo('template_url'); ?>/images/socialicons/LastFM-Social.png" alt="Last.fm icon" />
			</div>
			<p>We're sorry, we seem to be experiencing some technical difficulties with Last.fm. Hopefully we'll be back shortly</p>
		<?php } ?>
	</div>

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.

class Twitter {
	private $twitter_api_url = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=';
 
	public function getTweets($twitter_username = false, $trans_name = false, $count = false) {
		if(!$twitter_username) return 'Error, you have not provided a Twitter username.';
		if(false === ($tweets = get_transient($trans_name))) {
			$this->storeCache($twitter_username, $trans_name, $count);
		}
		return $this->readCache($trans_name);
	}
	private function readCache($trans_name = false) {
		return get_transient($trans_name);
	}
	private function storeCache($twitter_username = false, $trans_name = false, $count = false) {
		$tweets = wp_remote_get($this->twitter_api_url . $twitter_username . '&include_rts=1&count=' . $count);
		$tweettext = json_decode($tweets['body']);
		set_transient($trans_name, $tweettext, 60*5);
	}
}
class Dribbble {
	private $dribbble_api_url = 'http://api.dribbble.com/players/';
 
	public function getShots($dribbble_username = false, $trans_name = false) {
		if(!$dribbble_username) return 'Error, you have not provided a Dribbble username.';
		if(false === ($shots = get_transient($trans_name))) {
			$this->storeCache($dribbble_username, $trans_name);
		}
		return $this->readCache($trans_name);
	}
	private function readCache($trans_name = false) {
		return get_transient($trans_name);
	}
	private function storeCache($dribbble_username = false, $trans_name = false) {
		$shots = wp_remote_get($this->dribbble_api_url . $dribbble_username . '/shots');
		$shotstext = json_decode($shots['body']);
		set_transient($trans_name, $shotstext, 60*60*24*3);
	}
}

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.

]]> http://michaelbox.net/2011/08/23/getting-social-with-postscript5/feed/ 7 And now you know…my interview process http://michaelbox.net/2010/07/13/my-interview-process/ http://michaelbox.net/2010/07/13/my-interview-process/#comments Tue, 13 Jul 2010 16:00:44 +0000 tw2113 http://michaelbox.net/?p=187 The number 15

CC Attribution-ShareAlike 2.0 Generic http://www.flickr.com/photos/lincolnian/

If you are reading this post, then chances are high that you are well aware of my ongoing interview series “Do You Think You Know…”. If you have managed to beat the odds and do not know what I’m talking about, just read some previous posts, the series will stand out and you can get caught up easily.

At this point in time, I have conducted six interviews, and they all have had varying levels of popularity and high levels of enjoyment for both myself and the person we’re getting to know. Within this post, I hope to explain and describe the general process used going into each interview, even as it is bound to change and evolve with time and experience. I also hope to clarify motives for why I choose to make the effort.

Sadly, I am do not hold an employment position that uses any of my design and development knowledge. Any design or development work has been done during my free time away from a 40hr/week day job. While I won’t comment further on my day job, I will admit that I do still appreciate the amount of time available to think and brainstorm, even if it does suffer distractions. It was during that free time that the first draft of this post was written then on yellow legal paper. This is also when all questions, for the person in the hotseat, are conceived. I am able to sit, figure out what I am going to ask, and how I’m going to word them.

I have done what I can to keep the questions pretty open ended but also keep some topics regular with each interview. Questions involving favorite colors and fonts, preference between pirates and ninjas and the occasional zombie or pirate, and a nonsensical question involving birds on powerlines, have all been used regularly. One that I take a lot of pride in and put a lot of focus on is about twitter users that the interviewee recommends. This focus is because almost all of the people that we’ve gotten to know together, I first met on Twitter. One of the best parts about this question is the allowance granted to the interviewee to highlight some people important to them. Little bits of promotion and recommendation facilitates everyone winning and meeting new people.

At the end of the brainstorming stage, I have fifteen questions that I’ve done my best to tailor fit the person, their personality, and their areas of specialty. The questions are a mix of serious and (hopefully)humorous questions. Before sending the questions, I organize them in a manner that goes back and forth between serious and humorous. I do what I can to accomodate for busy schedules by sending the questions about two weeks before the day I plan to publish the post. I also send friendly reminders, if necessary, a couple times during the two weeks.

Once I receive the answered questions back, I put everything into a new wordpress post, apply the necessary styling, add the associated settings and metadata, and schedule it for the right date and time. The post going live is what I look forward to the most, as it is when myself and the interviewed get to have fun promoting the interview and spreading the love. Reading the twitter replies, retweets, post comments, and anything else make all the time and effort worth it.

At the end of the day, I get to take pride in that I got to promote someone I care about, support, and believe in. Meanwhile, that person gets to be in the spotlight for a day and be the focus of peoples’ attention. I hope that it is considered a huge honor, with them being in a field where so frequently they do the highlighting, primarily for clients. That is why I put forth the effort.

]]> http://michaelbox.net/2010/07/13/my-interview-process/feed/ 0