Developing Over the Dribbble API With PHP
Dribbble is the design networking app sweeping the digital revolution by storm. This collection of creative individuals offer pictures, or “shots”, of their latest works and share criticism through the rest of the community. It’s a great learning environment for studying web designers, illustrators, and icon makers.
The community has been intricately planned and opened with an API. This stands for Application Programming Interface and would dramatically widen the range of adaptation to anybody who can understand the framework.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
In this brief tutorial I’ll be going over some of the basic concepts for developing over the Dribbble API. We will be focusing on PHP as the main programming language. This is causal to the fact PHP is supported in nearly every environment and it offers a very small learning curve for newbie developers.
Examining the API
In all truth It’s not a difficult sight to go through. In fact, Dribbble’s official documentation offers some great constructs into the powerful network of design shots.
When preparing for this type of project it’s key to consider a wrapper or library to work around. This saves us a load of time since we don’t need to re-create the most common functionality found within the API. The various libraries openly available through GitHub is another reason why PHP makes a great choice for the backend dev language.
For our example we can go through Martin Bean’s Dribbble wrapper to find exactly what we’re trying to do. You should download the most recent version and extract all the files into an open directory. Inside you’ll find two folders examples and src. It may be straightforward but “examples” will contain a few common implementations for function calls while “src” includes all of the files we need for a new project.
Working with our PHP Wrapper
Now that we’ve got everything settled we should create our application directory. At this point you’ll want to create a new project directory either on a locally installed version of Apache or in a remote web server.
WAMP and MAMP are still today the best options for all-in-one install packages. These include Apache as a web server with PHP/MySQL support for backend functionality. Once installed you’ll be working within a root www directory – this should hold all your server files.
I’ve created a new folder titled “dribble1” and moved the entire “src” folder into this. Also inside of our “dribble1” folder I’ve created a new file index.php which we can use to store all of our example code. You can structure your hierarchy in any way you’d like, just be sure all the src files are kept together and can be accessed from your project.
Including Headers
At the very top of your new index.php file it’s important to include the following code bits. These are used to create a connection into the wrapper package we downloaded.
[/code]
Above we first require the core dribbble file from our wrapper’s src. Then we declare a $dribbble variable and set this to a new instance of our dribbble class. This is just some basic OOP in PHP, very basic constructs. Don’t fret too much if you don’t understand the syntax used.
Once this is included we have access to manipulate almost any area of the site at whim. There are many pre-defined functions written which allow us to pull comments, users, shots, and tons of other data.
As a basic example let’s look at a single user feed. This is possibly the most in-demand technique and does not require very much code. The inclusion of your most recent Dribbble shots into your portfolio page offers a level of professionalism which just can’t be matched with Twitter.
Pulling Single User Data
The code below is an example pulling data from a sample user. In this case we’re working with alexanderustinov who creates many icon sets and user interfaces.
$shots = $player->shots( array( ‘per_page’ => 5 ) );
foreach ( $shots->shots as $shot ) {
echo sprintf(‘
‘, $shot->url, $shot->image_url, $shot->title);
} ?>
[/code]
The shots should be called as above with $shot->image_url. This is the default 400×300 image size seen on all shots from the network. The API also offers access to a teaser image which is used in profile pages and search results. To use this replace image_url with image_teaser_url in the same context.
Above we are looping through each shot entry found for the given username. The only reason we can quickly cycle through these is because of the wrapper class we included earlier in our page. We set the per_page variable to 5 meaning once we hit 5 shots we don’t want to pull any more from the database. This number could be updated to any value you’d like.
Displaying In-Page Shots Comments
Known little to outsiders of the community many of the popular shots in Dribbble have constructive feedback and some interesting page comments. This is one of the best ways designers can share their ideas and criticisms with others in a pleasant way.
The following code could also be placed anywhere in your index.php file below the wrapper include. It will pull comments from a generated shot ID and display 5 from the first page.
$comments = $shot->comments( array( ‘page’ => 1, ‘per_page’ => 5 ) );
Afterwards we confront some simple if/else logic checking if any comments could be pulled. If so we create another foreach loop to extract the data into a set of paragraphs inside an unordered list. All of the page HTML is easily malleable and shouldn’t take long for even novice web developers to pick up on.
Conclusion
This has been a brief introduction into developing over PHP and Dribble’s API. The network is constantly growing and features some of the best design work found from around the web. Thanks to Martin Bean and his Github repos to expedite the process.
If you’re lost I’d recommend checking out a few PHP tutorials on Google. There are options for beginners to dive into classes and Object-Oriented constructs. I’d also suggest our list of video tutorials in web design which covers a cascade of topics including markup and project development.