Twitter: raymondcamden


Address: Lafayette, LA, USA

Quick Code Sample - Add your Behance portfolio to your web site

04-05-2013 15,462 views Development, JavaScript 33 Comments

A few months ago Adobe acquired Behance, a sort-of "LinkedIn for Artists" (thanks TechChrunch for that description). At the time I didn't really pay attention, but earlier this week I spent some time on the site and was incredibly impressed. I think it is fair to assume that a majority of my visitors here fall more on the developer side than designer, but I'd still recommend you check the site out. Even as a non-designer, I found the site really cool. It is a pleasure to use. You can also use the site as a way to keep up with your favorite designers. Currently there are over one million users so there's a pretty huge community already. For a good example, check out the work from my coworker Greg Wilson: http://be.net/gwilson

Cool, right? I was very happy to see that Behance had an API. I plan on creating a demo of this sometime next week. In the meantime though I noticed that there was no way to embed portfolio data on another site via a simple widget. I thought it might be kind of fun to build that. Every user has a public RSS feed, so I thought there might be a nice little script I could build to allow folks to embed portfolios on their personal site. Turns out, I just started reading a book on this very topic ("Third Party JavaScript"), so what I've written now may be pretty bad. It works of course, but I'm hoping this book gives me some ideas on how to do it better. (And I promise - when I finish the book I'll return to this script and tell you guys what I changed.)

I began by creating a simple page.

You can see the script tag pointing to my behance script. I needed a way to specify a user so in this case I went with a global variable. It's possible to pass in variables via the query string, but this causes problems if you use async/deferred script tags. Now let's look at the actual script.

This may be a bit complex so let me break it down for you. Start at line 43 (notice - I know the Gist displays are a bit broken lately, sorry). I check for the global variable and if it doesn't exist, I exit immediately. Otherwise, I use JSON/P to open a connection to Google's Feed API. This lets me bypass cross-domain security issues as well as turn the RSS feed at Behance into a much simpler JSON structure.

One little nit here. Notice that I have to specify a callback function. All of the code on this page is meant to be self-contained. I don't want to leak out into the global variable scope and blow away any code you may have written yourself. But for the callback to work it needed to be visible globally.

So to get around that, I create a randomly named function. You can see that logic in lines 5 to 11.

Outside of that - the code is relatively simple. Take those results. Draw it into the DOM. And that's it. The CSS portion is a bit messy. You can see it as one ginormous string in line 57. That's probably something I could do better.

Over all though I'm pretty happy with the result. I want to thank Greg Wilson for helping me improve the design. You can see the example here:

http://www.raymondcamden.com/demos/2013/apr/2/test.html

I've got one little CSS issue I'd love some help with. The last thing I did was add the Behance logo to the top header. This pushed over the name a bit. If anyone has a fix for that, I'd appreciate it.

If anyone makes use of this code, please let me know.

Related Blog Entries

33 Comments

  • Commented on 05-12-2013 at 6:03 AM
    This is cool. But you could also use the behance api to fetch projects in a better way. The API provides more projects information and has more functionality including commenting, appreciations e.t.c
  • Commented on 05-12-2013 at 1:00 PM
    That version requires authentication. This one runs anonymous.
  • Yashi #
    Commented on 08-23-2013 at 4:29 AM
    this is awesome post... but i Agree with Evans, can you explain us.how to use behance api a-z using any method you know, javascript or php..and that would be help to the community...
  • Commented on 08-23-2013 at 2:45 PM
    The issue with a JS API is that you are limited to 150 requests per hour. Now - most of us have blogs that don't get that much traffic. Mine gets about 5-6K per day. If we assume the same amount of traffic all day, thats 208 requests per hour. So there is no way it would work. A server-side solution would let you cache.

    I don't know PHP so can't help there. Best I can suggest is their docs. It looks easily enough. If you wanted a CF solution I could whip you up a demo. :)
  • Commented on 08-23-2013 at 11:13 PM
    hi Raymond, thanks for your comment.. so can you explain bit more about your version. i mean can you reproduce this script for more customize version with all the method used by behance api for example project view, user statistics, featured projects, total views,... etc... then we can use this as alternative solution for what behance did.and include behance profile to our own website with more customize view.sorry i'm still in intermediate stage in js. so i hope you can extend this... and i keep watching this thread... thank you so much for what you did...
  • Commented on 08-24-2013 at 8:02 AM
    Well, to be clear, the Behance API can allow you to do cool stuff. Don't get me wrong. But the usage limits imo make it hard to recommend for a client side app. Every visitor to your site would make use of one API call and if you got any amount of traffic at all it would quickly eat up your usage.

    By doing the API calls on the server you can do caching. Ie, call once an hour, or heck, once a day even. Stuff like your project list doesn't change often. And if you provide a way to clear the cache you can handle it manually.

    Does that make sense? I mean - I can definitely write you some JS examples - I just worry about how useful it will be. Then again, maybe this is something you can contact Behance (ok, we both work for Adobe, but...) and see about increasing the data limit.
  • Commented on 08-24-2013 at 8:22 AM
    Thanks Raymond. so that is the case people who don't include behance portfolio to their website via API... and i Google every possible keyword to find any method. finally i found your blog.so now i understand what is the limitation of the behance API.and it's better to add a link pointing to the behance portfolio other than showing behance information through my website... actually my plan was a doing case study pages for every project i did and showing how many peoples are see this, how many peoples are like this and showing featured project... etc but unfortunately i can't do it.. :'( anyway thanks for your effort to show some method..and i look forward to hearing from you.. thank you once again raymond..
  • Commented on 08-24-2013 at 8:25 AM
    So... hard to understand your response. Are you saying you would still like to see an example? I can definitely show an example even if the data limits are low imo.
  • Commented on 08-24-2013 at 8:28 AM
    yes yes... i like to see examples...if you can make it more clear and detail instruction it would be great.. :) :)
  • Commented on 08-24-2013 at 8:31 AM
    No promises, but I can put it in my queue of things to dig into.
  • Commented on 08-24-2013 at 8:34 AM
    ok no problem. actually i still developing my site.. if you have free time, make a blog post for it.. i'll keep watching your blog... thanks raymond.
  • Commented on 09-05-2013 at 2:45 PM
    Hey Raymond,

    Thanks for uploading this code! I've got it working on my portfolio site and I'm really happy with it. I have one quick question though, how can I change the code to only load my two most recent projects instead of all of them?

    Thanks for the help,
    Kevin
  • Commented on 09-05-2013 at 3:07 PM
    I'm coding by hand, so pardon any typos. See this?

    for(var i=0; i<e.responseData.feed.entries.length; i++) {

    Change it to:

    for(var i=0; i<Math.min(e.responseData.feed.entries.length,2); i++) {

    Math.min(x,y) simply means, return the smaller of the two numbers. I didn't use just 2 because you may go into an artistic rage and delete all but one project. By using Math.min I can ensure I use the lower of the two numbers.

    The RSS should be sorted newest first.
  • Commented on 10-06-2013 at 2:55 PM
    Hi! Thank you for this post. I try to find the way to separate entry.content var to image and description, I would like to put only image and maybe fields. Can't find it on API page :( Can you help please?
  • Commented on 10-06-2013 at 6:58 PM
    I made a small modification to the code so that if you add this:

    var BEHANCE_IMAGEONLY=true;

    It removes the line of text after the image.

    http://www.raymondcamden.com/demos/2013/apr/2/v2/t...
  • Commented on 10-07-2013 at 1:13 PM
    thanks

    I don't know why, but I don't get all the feed, only 5 newest and 7 latest
    projects. what can be a problem?
  • Commented on 10-07-2013 at 1:44 PM
    Um, well it just reads the RSS feed - it doesn't filter by new or latest per se. It also has a limit of 10. See this URL used by the code:

    var url = "https://ajax.googleapis.com/ajax/services/feed/loa...; + BEHANCE_USER + ".xml&num=10&v=1.0&callback="+cb;

    You could change num=10 to num=20.
  • Commented on 10-16-2013 at 6:13 AM
    For folks who asked, I've begun work on a JavaScript API library wrapper:

    http://www.raymondcamden.com/index.cfm/2013/10/16/...
  • Commented on 10-16-2013 at 6:19 AM
    Thanks Raymond.....
  • Commented on 12-10-2013 at 6:31 AM
    Hi,
    Nice post!
    And, as I am pulling my projects from Behance in to my personal web site, I'd like as well to be able at least to 'favorite' them, but so far I found how to retrieve the value only. Any idea?
    mine so far is using something like 'https://www.behance.net/c/a?e=project&id=mypro...' but does not look so nice, although it works...
    and by the way, does anyone knows how the date format is given? it looks like milliseconds but it is definitely something wron for me as I am getting dates in order of Sat Jan 17 1970 00:20:49 GMT+0000 (GMT Standard Time)... :)
  • Commented on 12-10-2013 at 9:43 AM
    @jordi: This blog post works with the public RSS feed of your Behance data. It isn't a "real" API example. You would need to use the real API in order to do that and would need to have an authenticated connection as well. Definitely possible. As for the date format - perhaps it is seconds, not milliseconds?
  • Commented on 12-10-2013 at 9:59 AM
    Hi, thanks for the answer.
    And yes, it is seconds, It is a pity not to have thought of it myself. :P
    I'll look closer in how to apply 'favourited' functionality to my own blog using the API.
    thanks again
  • Commented on 01-20-2014 at 6:11 AM
    Just wanted to just say thank you for this! I used your edited library version for my gallery. I edited the code simplified it so it only displayed a collage of my photos which looks awesome.
  • Commented on 01-20-2014 at 9:16 AM
    You are most welcome, Rachel.
  • Commented on 01-23-2014 at 8:26 AM
    Raymond, thank you! This was very easy to include in my site and modify. I appreciate the support you've been able to provide via this post as well. Good luck with the next version!
  • Commented on 02-24-2014 at 1:03 PM
    Hi Raymond!

    Many thanks for the resource. It was very useful for the integration on my portfolio. You can see it running here: http://www.vdesigner.es

    For the CSS issue you said on the post I recommend to tag the name of the user using <a> or <span> and add some right margin (16px, the width of the Behance mini logo).

    I added some styles to integrate it with the style of my portfolio, feel free to take it if it can helps you.

    Cheers ;)
  • Commented on 02-24-2014 at 1:18 PM
    *sigh* I hate people who can do pretty. ;)
  • Commented on 02-24-2014 at 2:26 PM
    xD
  • rj #
    Commented on 04-13-2014 at 10:01 PM
    plss...help me in my web portfolio...need it badly...
  • rj #
    Commented on 04-13-2014 at 10:02 PM
    plss email me...
  • Commented on 04-13-2014 at 10:19 PM
    This blog is not a place to ask folks to build your portfolio for you.
  • Sean #
    Commented on 07-03-2014 at 3:11 PM
    Your addition of var BEHANCE_IMAGEONLY=true

    doesn't work for all project descriptions... e.g. try the example "timtadder" and scroll down.

    I've tried to figure out a fix, but can't quite get it to work, any ideas?
  • Commented on 07-04-2014 at 10:23 AM
    It's an easy fix. Change the replace on line 28 to

    content = content.replace(/<br>(?:.|\s)*/,"");

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty