• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

Dribbble is one of my favourite sites, Its a site where designers, illustrators and graphic designers can post small screen shots of what they are working on and other members can “like” their work and comment on it, they can also do “rebounds” which is a graphic reply to an image ( the site uses lots of basketball terminology throughout). I use the site for two things, I post themes I’m working on for ThemeFurnace ( you can follow me here ) and I use it for inspiration if Im stuck on a particular design element by looking at what other people have done. To join, you must be “drafted” by another member, this has produced claims of the site being elitist but I think without that, the quality would detoriate. The work that is posted is usually of a high quality and there are quite a few famous designers who use it regularly.

There are a lot of other sites which allow users to post their creative work such as Creattica and Behance, allthough these focus on larger images, the principle is the same. This got me thinking about an upcoming project – rebuilding DesignersTalk with WordPress and also adding a portfolio section for our members to use. I thought it would be cool to look at how you could accomplish the Dribbble functionality using WordPress and any available plugins, so that is the subject of today’s post – please note this post isnt a complete walk-through, Im just looking at what plugins would be needed. I may do a complete tutorial after I have completed it for my site.

BuddyPress

Dribbble is a community site, so our go-to plugin for creating communities is BuddyPress, it’s really an amazing plugin for creating social networks that pushes WordPress’ capabilities. It  has support for activity streams, user groups, forums, user profiles, friend lists, private messaging and it can be extended even further with BuddyPress specific plugins. You don’t have to use all the features – you can enable / disable as required.

For creating a Dribbble clone, you wouldnt need the groups or forums, you would be using it for activity streams, friends, extended profiles and @mentions.

BuddyPress Followers

Dribbble doesnt use “friends” as such, it uses the Twitter model of followers, meaning you dont have to have friend requests accepted to see what people are doing on the site. Luckily there is a BuddyPress plugin called “BuddyPress Followers“which will add this functionality. The plugin integrates seamlessly with your site, adding a new activity stream tab, follow/unfollow buttons to user profiles and adds menus to display the users following/followed and total counts.

BuddyPress Profile Fields

On people’s profile pages on Dribbble, there is the following information shown – Location, Website and Twitter account. BuddyPress gives you the option to create custom Profile fields so you can better tailor it to fit your site’s needs. After adding those, you could also use the “BP User Profile Map” plugin which adds a Google map to the users profile page displaying their location.

Gallery Plugins

Now we come to the most important part of the installation – we need a gallery plugin to allow members to upload their images, create galleries (or projects as Dribbble calls them). Luckily there are a few powerfull plugins allready created for this purpose…

BuddyPress Portfolio – Free

BP-Portfolio is a BuddyPress plugin that allows members to create their own portfolio (a set of projects : IT projects, recipes, achievements of designer, … ). Right now each project includes a title, a description, an url and a screenshot of the project. The size of the description can be defined in the admin panel, as the template to be used.

BP-Portfolio »

BuddyPress Album – Free

BuddyPress Album. Photo Albums for BuddyPress. Includes Posts to Activity Stream, Member Comments, and Gallery Privacy Controls.

BuddyPress Album »

BP Gallery – From $30

Bp Gallery is the ultimate gallery plugin for your Buddypress powered site. It Gives you complete control over the media. Since the files are stored on your server, so you have full control over the media and you don’t have to worry about giving your private data to anyone else.

Bp Gallery »

Like Buttons

One of the main things when posting your image on Dribbble is seeing how many “likes” you get, along with “views” and “comments” – those are the metrics that you use to jufge how popular an image was. There is a free BuddyPress plugin to add this functionality, called simply “BuddyPress like” – just download it and activate it and you will now have a like button for people to use on status updates and other activities.

BuddyPress Like »

Jobs

Dribbble has a jobs section which charges $200 to list a job for 30 days. We are really spoiled for plugins and themes covering this in the WordPress world, its something I’ve covered before so I wont go into detail here about it. You would have to use a job board plugin, rather than a theme which would take over your whole site.

WordPress Jobbin

One of the closet plugins I found to to the Dribbble job board is “WordPress Jobbin” plugin which costs just $15 and provides the required functionality, including the ability to charge for listings.

WordPress Jobbin »

Pro System

Another way that Dribbble monetizes the site is its “Pro System” – which is bascially a paid account upgrade which adds extra features for members such as stats, attachments, projects a pro badge and so on at a cost of $20 per year.

To add this functionality, a membership plugin would be needed. I have covered these before, another area of WordPress plugins that is well-served.

Membership

One free membership plugin which looks promising is “Membership” which has BuddyPress specific features built-in :

BuddyPress rules – limit and protect access to groups, group creation, pages, blogs, private messageing

You may not be able to create an exact clone of the Dribbble Pros system with this plugin, but you could offer different benefits like extra private messaging limits, access to specific pages, access to the job board etc.

Membership »

Conclusion

This post covers most of the functionality required to create a Dribbble clone. There are some things missing I will need to figure out in future such as displaying popular items. Im sure that Dribbble itself has an algorythm to determine what items get show on the homepage as “popular”. With our WordPress based system you could determine it by comments, likes & views or a mixture of all 3. Im not a programmer so not sure how this could be accomplished (if anyone has any suggestions, please let me know) but for the purposes of creating your site, you could just show the latest images posted on the homepage.

I hope this plugin sets you thinking about what type of communities you could build with WordPress and BuddyPress – it’s truly a very flexible system.


Post Tags

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

14 Comments

  1. Gravity

    This was a pretty nice tutorial. I am starting off getting my hands on buddypress to implement a membership site and see how buddypress works and I think I could use this tutorial to connect bits and pieces. Thanks!

  2. clintongreen

    Awesome article. Thanks

  3. Nasir

    i need some creattica or dribbble like wordpress theme, i dont know programing so it will be great to find a ready made template available already.

  4. anonymous

    great article… but does anyone have a theme like dribble ready

    it would be nice if themefurnace have one to sellit… that would be perfect…

  5. Milos

    What about front-end posting?

  6. sara

    can sme onehelp me create a website like bribbble or behance with buddypress? if anyone can suggest portfolio theme where i can incorporate it?

  7. Interesting article. Any news on the progress? Currently toying with a similar idea, maybe you have found some new insights?

  8. Photo Credit: Daniel Ogren & Austen Squarepants on Flickr.
    Advantage: Harry Potter and the Deathly Hallows Pt.
    However, for a Christmas treat, why not spoil yourself and take a Harry Potter
    walking tour.

  9. Nice article but didn’t get dribbble clone demo or theme, but got much inspiration from it. Thanks a ton mate! :)

  10. I think a great thing of dribbble is the color meta! Maybe there is a plugin for that?!

  11. hi, the only thing i did not quite get is how i can incorporate a user portfolio stream the same way dribble, behance.net and fubiz. net have theirs.
    i want to design a website similar to behance which is similar to dribble the only thing that has been holding me back so far is the fact that i havent really found a a plugin or anything to stream or feed user portfolios ( whatever they upload on the home page) like behance and dribble.
    can you please clarify which plugin here does that or any other plugin that does
    thank you

  12. One of the greatest golfing period take places in Canada at Okanagan Valley.
    All the above major parts of the course need to be maintained
    in a proper and orderly fashion thus increasing the efficiency of the course itself in order to reduce the wastage of the surface.
    Yet, as forgiving as the club is, advanced players will take delight also when that errant shot does not necessarily
    run out-of-bounds.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors