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

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Evans Mwendwa posted on 5/12/2013 at 3:03 PM

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

Comment 2 by Raymond Camden posted on 5/12/2013 at 10:00 PM

That version requires authentication. This one runs anonymous.

Comment 3 by Yashi posted on 8/23/2013 at 1:29 PM

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...

Comment 4 by Raymond Camden posted on 8/23/2013 at 11: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. :)

Comment 5 by Yashi posted on 8/24/2013 at 8:13 AM

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...

Comment 6 by Raymond Camden posted on 8/24/2013 at 5:02 PM

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.

Comment 7 by Yashi posted on 8/24/2013 at 5:22 PM

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..

Comment 8 by Raymond Camden posted on 8/24/2013 at 5:25 PM

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.

Comment 9 by Yashi posted on 8/24/2013 at 5:28 PM

yes yes... i like to see examples...if you can make it more clear and detail instruction it would be great.. :) :)

Comment 10 by Raymond Camden posted on 8/24/2013 at 5:31 PM

No promises, but I can put it in my queue of things to dig into.

Comment 11 by Yashi posted on 8/24/2013 at 5:34 PM

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.

Comment 12 by Kevin McCarthy posted on 9/5/2013 at 11: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

Comment 13 by Raymond Camden posted on 9/6/2013 at 12:07 AM

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.

Comment 14 by katya posted on 10/6/2013 at 11: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?

Comment 15 by Raymond Camden posted on 10/7/2013 at 3:58 AM

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.co...

Comment 16 by katya posted on 10/7/2013 at 10: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?

Comment 17 by Raymond Camden posted on 10/7/2013 at 10: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..." + BEHANCE_USER + ".xml&num=10&v=1.0&callback="+cb;

You could change num=10 to num=20.

Comment 18 by Raymond Camden posted on 10/16/2013 at 3:13 PM

For folks who asked, I've begun work on a JavaScript API library wrapper:

http://www.raymondcamden.co...

Comment 19 by Yashi posted on 10/16/2013 at 3:19 PM

Thanks Raymond.....

Comment 20 by jordi posted on 12/10/2013 at 5:31 PM

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... 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)... :)

Comment 21 by Raymond Camden posted on 12/10/2013 at 8:43 PM

@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?

Comment 22 by jordi posted on 12/10/2013 at 8:59 PM

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

Comment 23 by Rachel posted on 1/20/2014 at 5:11 PM

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.

Comment 24 by Raymond Camden posted on 1/20/2014 at 8:16 PM

You are most welcome, Rachel.

Comment 25 by Josh posted on 1/23/2014 at 7:26 PM

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!

Comment 26 by Vໜtor posted on 2/25/2014 at 12:03 AM

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 ;)

Comment 27 by Raymond Camden posted on 2/25/2014 at 12:18 AM

*sigh* I hate people who can do pretty. ;)

Comment 28 by Vໜtor posted on 2/25/2014 at 1:26 AM

xD

Comment 29 by rj posted on 4/14/2014 at 7:01 AM

plss...help me in my web portfolio...need it badly...

Comment 30 by rj posted on 4/14/2014 at 7:02 AM

plss email me...

Comment 31 by Raymond Camden posted on 4/14/2014 at 7:19 AM

This blog is not a place to ask folks to build your portfolio for you.

Comment 32 by Sean posted on 7/4/2014 at 12:11 AM

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?

Comment 33 by Raymond Camden posted on 7/4/2014 at 7:23 PM

It's an easy fix. Change the replace on line 28 to

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

Comment 34 by Peter Easton posted on 2/10/2015 at 7:27 PM

HI Raymond, great post,( i hate behance) I was wondering if you knew a way to modify this to show more than one users work? I have it looping through my students galleries but for some reason all the galleries are the same person. any pointer would be great
Pete

Comment 35 (In reply to #34) by Raymond Camden posted on 2/10/2015 at 7:29 PM

Heh, you hate Behance? Then why use it? :) Um - can you show me your code? Not as a comment, put it up someplace where I can run it.

Comment 36 (In reply to #35) by Peter Easton posted on 2/10/2015 at 7:36 PM

don't have a choice the school uses it for galleries, i can but its basically back to your code with my urls, I just started tinkering today

Comment 37 (In reply to #35) by Peter Easton posted on 2/10/2015 at 7:38 PM

my looping code is:
$db_hostname = "xxxxx";
$db_database = "xxxxx";
$db_username = "xxxx";
$db_password = "xxxx";
$dbconnection = @mysql_connect($db_hostname, $db_username, $db_password) ;
@mysql_select_db($db_database, $dbconnection);
$access_sql = "SELECT * FROM `pshow` WHERE `deptcode` = 'webgroup'";
$access_statusSet = @mysql_query($access_sql, $dbconnection);
while ($stu_user = mysql_fetch_assoc($access_statusSet)){
$username = $stu_user['username'];
?>
<div><div id="behance_p"></div>
<script>
var BEHANCE_USER = "";
var BEHANCE_IMAGEONLY=true;
</script>
<script src="/assets/portfolio/behance_show.js" async=""></script>

Comment 38 (In reply to #35) by Peter Easton posted on 2/10/2015 at 7:54 PM
Comment 39 (In reply to #38) by Raymond Camden posted on 2/10/2015 at 8:06 PM

Ah, you want to use the newer version of my code, detailed here: http://www.raymondcamden.co.... I'll see if I can whip up a demo that shows 2 users.

Comment 40 (In reply to #39) by Peter Easton posted on 2/10/2015 at 8:38 PM

that would be great, thanks

Comment 41 (In reply to #38) by Raymond Camden posted on 2/11/2015 at 4:06 AM

It was done quickly, but you can see it here: https://github.com/cfjedima...

Basically it is rather simple. Just use renderProjects N time. In each case, change the user and div to populate the projects.

Comment 42 by Missing Thumb posted on 7/22/2015 at 4:59 AM

RE: your little CSS issue,

In your - div.behance_title img - Styles remove all margins, remove the float, give the image a position: absolute; and left: 19px;

Comment 43 (In reply to #42) by Raymond Camden posted on 7/22/2015 at 12:56 PM

Ah thanks. If I update this sample in the future I'll remember that.

Comment 44 by Michael Algeo posted on 8/26/2015 at 1:53 PM

I have a question regarding the styling. I was wondering if you could possibly help me out.

I'm wanting to match the style of this:

http://webdesign.tutsplus.c...

But I don't know where to add my css. Like the description area, photo area and such.

Any ideas where to begin?

Comment 45 (In reply to #44) by Raymond Camden posted on 8/26/2015 at 9:53 PM

If I remember right, I embed the CSS towards the end of the JS. You can see the definitions there - and that is where you would begin modifying.

Comment 46 (In reply to #45) by Michael Algeo posted on 8/27/2015 at 10:07 AM

Perfect! I'm glad you seen this! I thought I'd let you know, I got it to work my way using the API and demos you had posted on GitHub. I hope you know I greatly appreciate this. I recommend everyone to give that a try. I've also recommended it in my comments.

I'm trying to prep my portfolio website you see :)

Comment 47 by Tim Barkley posted on 2/18/2016 at 5:18 PM

Hey there, I really appreciate this post!
How would I go about having the links open in a new window?

Comment 48 (In reply to #47) by Tim Barkley posted on 2/18/2016 at 6:06 PM

Also, how to change the number of projects that show up

Comment 49 (In reply to #47) by Raymond Camden posted on 2/18/2016 at 7:18 PM

Modify the code that generates the link to include target="_new".

Comment 50 (In reply to #48) by Raymond Camden posted on 2/18/2016 at 7:21 PM

I believe thats in the URL value - I think the 10 there should be changed. You would need to check on the Behance side though to see if it is supported.