Simple Dribbble Shot Embed Plugin

I was sitting around today thinking about some parts of WordPress that I hadn’t got a chance to play with and I realized that I’d never touched the embedding framework built into core. Most people think of the embed framework in terms of the ability to immediately include oEmbed enabled resources into WordPress. oEmbed enabled resources include things like YouTube videos and Instagram media. If you’ve never taken a look at it, the oEmbed framework is neatly tucked into its own class which is really easy to read through.

Unfortunately, the resource I wanted to embed doesn’t conform to the oEmbed spec, so I was left with the manual method. Again, WordPress has a special class for dealing with these types of scenarios. Once I read through that class, I knew exactly how to do what I wanted.

I’m a big fan of the Dribbble API. It covers all of the main functionality of the website (at least in terms of data exposure) and is ridiculously clean in terms of resource representation. I thought it would be neat if a user could embed a Dribbble shot into a post or page (or any piece of content, really) just by copying and pasting the URL to that shot. I can think of several scenarios where this might be useful, including project profiles, discussions of WIP, or examination of design trends (colors, shapes, textures, etc.).

So that’s what I built. All told, it took me about twenty minutes to find the hooks I needed in WordPress and build the very small plugin that provided the functionality I desired. The plugin includes some basic caching so that the Dribbble API isn’t hit every time content is viewed. You can see the finished Dribbble Shot Embed plugin on GitHub.

If you’re interested in me developing this idea further, I’d love to hear from you. Alternatively, let me know if you use this as a starting point to develop your own WordPress embed system plugin. I think it is a good base and should be easy to build upon.

Leave a Reply

Your email address will not be published. Required fields are marked *