So over on my business site I include the 6 most recent dribbble shots in my footer, but have always run into an SSL problem

Since Dan and Crew aren't offering an SSL version of the API & site, that part of my site content is never encrypted, which means that my site visitors get a nice fat warning that part of the contents of this page aren't encrypted, which means now all your bases are belong to the hackers!

It really doesn't present much of an issue in real life, but I paid for the blasted SSL cert so I might as well make sure that it is able to do it's job right? Well after some poking and prodding I have come up with a solution to the problem. At least until dribbble adds SSL to their offerings.

API schmAPI

Right, so the real issue here is the links to the images. Those are assets that are included in the flow of the site, so must also be encrypted. Links don't affect the SSL integrity in quite the same way. So if you look at the data returned from an API call, you will see something like this in the shots array:

{"page":"1","per_page":6,"pages":14,"total":79,"shots":[
   {
      "id":1345978,"title":"Sometimes I write crap.",
      "height":300,
      "width":400,
      "likes_count":2,
      "comments_count":5,
      "rebounds_count":0,
      "url":"http://dribbble.com/shots/1345978-Sometimes-I-write-crap",
      "short_url":"http://drbl.in/jDOk",
      "views_count":47,
      "rebound_source_id":null,
      "image_url":"http://d13yacurqjgara.cloudfront.net/users/455/screenshots/1345978/new.article.png",
      "image_teaser_url":"http://d13yacurqjgara.cloudfront.net/users/455/screenshots/1345978/new.article_teaser.png",
      "player":{
            "id":455,"name":"Chris J. Davis",
            "location":"Dallas,TX",
            "followers_count":197,
            "draftees_count":2,
            "likes_count":157,
            "likes_received_count":504,
            "comments_count":299,
            "comments_received_count":270,
            "rebounds_count":14,
            "rebounds_received_count":11,
            "url":"http://dribbble.com/chrisjdavis",
            "avatar_url":"http://d13yacurqjgara.cloudfront.net/users/455/avatars/original/avatar_cjd_600.jpg?1305129296",
            "username":"chrisjdavis",
            "twitter_screen_name":"chrisjdavis",
            "website_url":"http://chrisjdavis.org",
            "drafted_by_player_id":null,
            "shots_count":79,
            "following_count":86,
            "created_at":"2010/01/15 08:06:42 -0500"
      },
      "created_at":"2013/12/13 10:40:34 -0500"
   }
]}

There's a lot off great stuff in here, but what we are interested in for now are the image links. There are two for the shot and one for the avatar that dribbble has on file for you. This technique will work for all three.

If you look at the URL for the images you will see that they are hosted on Amazon CloudFront. This is great news for us. CloudFront supplies both ssl and non-ssl URLs to any content housed therein. From our above example we have the URL:

http://d13yacurqjgara.cloudfront.net/users/455/screenshots/1345978/new.article.png

We can get the same asset by simply adding the s to the protocol:

https://d13yacurqjgara.cloudfront.net/users/455/screenshots/1345978/new.article.png

Go ahead, make with the clicky on both of those. Works like a charm. So awesome, that worked out well. Now I am sure you are asking yourself, "How do we update the URLs returned by the API to make them ssl safe?"

Even if you weren't thinking that, let's pretend you were so I can continue, m'kay? Great.

When in doubt, str_replace it

The solution is pretty simple really. We need to find the http in each image URL we are going to use and replace it with https. I will give you some code examples for a couple of different languages to demonstrate.

PHP — Gist

//create a stub to add our parsed shots to.
$str = '';
// here we assume you have already captured the API request content.
$shots = json_decode( $shots );
// next we iterate over the shots and find the URL we want to update.
foreach( $shots->shots as $shot ) {
$shot_url = str_replace( 'http', 'https', $shot->image_url );
$str .= '
';
}

Javascript — Gist
We are using jQuery and jRibble to help things along.

// an array to hold our parsed shots.
var str = [];
// next we iterate over the shots and find the URL we want to update.
var shots = function() {
$.getShotsByPlayerId( "popular", function(data) {
$.each(data.shots, function( i, shot ) {
var shot_url = shot.image_image_url.replace("http", "https");
str.push('
');
});
});
}

Right so at this point you should have shiny new ssl friendly URLs for your dribbble shots. For this of you who are Habari friendly, here is the method I have added to my theme.php file to make things happen on the site.

// the D_CACHE constant is set at the top of theme.php, right after your opening class invocation.
public function dribbble_shots() {
if ( Cache::has( array('dribbble', 'footer' ) ) ) {
$str = Cache::get( array('dribbble', 'footer' ) );
} else {
$url = 'http://api.dribbble.com/players/chrisjdavis/shots?page=1&per_page=6';
$rr = new RemoteRequest( $url );
$rr->execute();
  $shots = $rr->get_response_body();        
  $shots = json_decode( $shots );

  $str = '<ul class="dribbble">';

  foreach( $shots->shots as $shot ) {
        $shot_url = str_replace( 'http', 'https', $shot->image_url );
        $str .= '<li><a href="' . $shot->url . '"><img alt="' . $shot->title . '" src="' . $shot_url . '"></a></li>';
  }

  $str .= '</ul>';

  Cache::set( array('dribbble', 'footer'), $str, self::D_CACHE, true );
}
return $str;
}

Then we just call $theme->dribbble_shots(); ?> in our theme template and things are golden. Well that is it for now I think. I hope you find this helpful. If you have any questions or find bugs let me know!