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.
BuddyPress Album – Free
BuddyPress Album. Photo Albums for BuddyPress. Includes Posts to Activity Stream, Member Comments, and Gallery Privacy Controls.
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.
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.
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.
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.
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
10 Comments
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!
cool
Awesome article. Thanks
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.
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…
What about front-end posting?
can sme onehelp me create a website like bribbble or behance with buddypress? if anyone can suggest portfolio theme where i can incorporate it?
Interesting article. Any news on the progress? Currently toying with a similar idea, maybe you have found some new insights?
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.
Leave a Reply