Over a million developers have joined DZone.

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

DZone's Guide to

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

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required

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.

<!doctype html>
<html lang="en">
		<h1>Regular Site</h1>
		Some vanilla content.

		<div id="behance"></div>		
		<script>var BEHANCE_USER = "gwilson";</script>
		<script src="behance.js" async></script>


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.

(function() {
//Generate a unique-ish cb handler
var cb = "bh";
for(var i=0; i<20; i++) {
cb += Math.floor(Math.random()*10);	
//Display results
window[cb] = function(e) {
if(!window.BEHANCE_DOM) var d = document.querySelector("#behance");
else var d = document.querySelector(window.BEHANCE_DOM);
if(e.responseStatus === 200) {
var title = e.responseData.feed.title;
title = '<a href="http://be.net/' + BEHANCE_USER + '"><img src="http://assets.behance.net/img/portfolio/badges/badges/be-badge-small.png"></a>' + title;
var link = e.responseData.feed.link;
var body = "";
for(var i=0; i<e.responseData.feed.entries.length; i++) {
var entry = e.responseData.feed.entries[i];
//Remove the inline style
var content = entry.content.replace(/style=".*?"/, "");
//preprend a link
content = content.replace(/>/,"></a>");
content = "<a href='" + entry.link + "'>" + content;
body += "<div class='behance_entry'><a href='" + entry.link + "' class='titleLink'>" + entry.title + "</a><br/><p>" + content + "</p></div>";
var result = "<div class='behance_main'><div class='behance_title'>"+title+"</div>";
result += "<div class='behance_entries'>" + body + "</div></div>";
d.innerHTML = result;
} else {
//handle error
d.innerHTML = "<div class='behance_main'><p>Sorry, we couldn't load the Behance feed.</p></div>";
if(!BEHANCE_USER) return;
var url = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http%3A//www.behance.net/" + BEHANCE_USER + ".xml&num=10&v=1.0&callback="+cb;
var script = document.createElement("script");
script.src = url;
//append CSS
//credit the second comment: http://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "div.behance_entry { clear:both; } div.behance_main { border-style:solid; border-width:thin; width: 250px; } div.behance_entry { padding-bottom: 10px; } div.behance_title { margin-left: auto; margin-right: auto; width: 100%; font-weight: bold; text-align: center; background-color: black; color: white; padding-top: 5px; padding-bottom: 5px; } div.behance_entry a.titleLink {display:block; text-align: center; margin-bottom: -25px; } div.behance_entry img { display: block; margin-left: auto; margin-right: auto; margin-bottom: -10px; } div.behance_entry p { margin-left: auto; margin-right: auto; display:block; width: 202px; } div.behance_main a { text-decoration: none; font-weight: bold;} div.behance_main { font-size: 0.8em; font-family: Arial; } div.behance_title img { margin-top: auto; margin-bottom: auto; margin-left: 10px; float: left; }";

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 let's 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:


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.

#1 for location developers in quality, price and choice, switch to HERE.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}