The first in a series, I give you SocialThing for Websites, the Challenge of Easy Integration, a short article about how we kept the SocialThing's client integration to one line of code for the partner to paste in.

Granted, this is the baseline implementation. If you want the client to use your authentication, or post stuff into feeds, there is a bit more work to do, though not much.

Enjoy!

Oh hi, long time no speak. How's every little thing?

I've spent the past few months working on the SocialThing for Websites client, which you can see in action on AOL's country music blog The Boot. Techcrunch didn't tear it apart, and the comments aren't as rabid as one might expect on an article about an AOL product, so I suppose it came out next-to-all-right.

The client itself was a lot of fun to work on, and there were a lot of interesting technical hurdles that we had to hitch our pants way up and leap over which kept things awfully interesting. More on those later, though.

For now, I wanted to point you towards the backbone of the SocialThing client, aimapi-core.js, now hosted on Google Code. This is a pared down, bare bones, just-what-you-need-and-nothing-else version of the original Web AIM Javascript API that AOL released back in November of 2006.

So, you ask - besides dropping all the UI stuff that you weren't particularly interested in the first release, what's so great about aimapi-core? Well...

• Its only 44k (with white space and comments). The original is 80k and does less.
• More transactions (some of which didn't exist in 2006):
  • addBuddy and removeBuddy
  • getStatus and setStatus
  • getBuddyFeed (AIM's lifestream - see buddyupdates.aim.com)
  • pushFeed - a means of pushing content into a user's buddyfeed/lifestream
  • reportSpim
  • and more!

• Alternate means of listening for events. The original codebase used long polling via script nodes. Unfortunately this meant rapid polling in Firefox because of a bug in that browser that prevents more than one script from downloading at once. This rapid polling was both memory intensive and had the status bar constantly letting you know that it was "Waiting for 12.345.79.80..." which kinda sucked.

  So how was this resolved?

  • If AIM.params.useSWFListener is true, the API uses swfobject to pull in swfsocket.swf which uses AS3's socket API to listen for host events (IMs, presence updates, etc). Many thanks to my pal Rick Gardner for writing this piece.
  • If swfsocket fails to initialize, the API falls back to scriptiframe.js, a clever work around that James Burke came up with that uses an iframe to long poll for events.

  And if all that fails, it goes back to using dynamic script nodes to listen for host events.

• And more! (...that I still need to write documentation for!)

So give it a look, and let me know what you think. Oh, and for those wondering - no, the SocialThing client is not a frame a' la the diggbar. Come on, give me a little credit.

I've been doing some work in AS3 of late and stumbled onto a bit of a gotcha last week that I thought I'd share since it caused me about 15 minutes of frustration.

The gotcha pertains to a significant difference in how Javascript and AS3 handle the match method of the String object when the global flag is passed. Consider the following Javascript snippet:

var r = /[a-z]/g
var s = "abc";
var x = s.match(r);

This will return an Array with values "a,b,c" in both Javascript and in its AS3 equivalent.

Now, consider this code, replacing the value of s with something that will not match:

In Javascript, this will return null, but AS3 will return a zero length Array. Which means that this...

if(s.match(r)) {
// do stuff...
}

..would always be true in AS3, but false in Javascript. I spent about 10 minutes thinking there was something wrong with my regular expression, and another five thinking there was something wrong with AS3's regexp engine before I realized what was happening.

So who has it right? According to the ECMA 262 spec, AS3 does (see page 101-102). Of course, Mozilla's documentation claims that it will return an Array as well with no mention of null on that page, while Microsoft's JScript documentation admits it will return null if no match is found.

Good times.

My son, born this evening weighing in at 9.33 pounds, measuring 20 inches.

(And that's why I wasn't in Austin this year!)

And I'm not gonna be there this year. I know, I know - I should have told you sooner. You're probably already in Austin or in flight, now wishing you had advance notice of this turn of events so you could have just stayed home. I'm sorry, I really am. This really was terribly inconsiderate of me.

Soldier on, brave geeks, and know that with enough Shiner Bock, anything can be fun even if I'm not there. Be strong. And take lots of pictures. And twitter a lot. Let me experience Austin through your internets.

(Any day now I'll have an announcement of why I'm not there this year...)

These three drawings I did leading up to Christmas - I've kept them private on Flickr and not published them here as they were gifts for family and I didn't want to spoil the suprise.

• Clara at 17 Months
• 8 x 10"
• Colored Pencil on Eggshell Mi-Tients Paper
• November 20, 2007

• Big Smile
• 8 x 10"
• Colored Pencil on Cream Mi-Tientes Paper
• December 11, 2007

• Clara at 18 Months
• 10 x 8"
• Colored Pencil on Eggshell Mi-Tientes Paper
• December 21, 2007

And with those, I'll no longer be posting drawings on slayeroffice. 2008 seems a good a time as any to get the site back on the web development talk track. If you're interested in following my portraiture work, you can find it on my new drawing blog. Or, just grab the feed.

My good pal Mr. Lawver has included a reference to my Page Info Favelet on page 222 of his new book.

Congratulations to Kevin, Kimberly, Christopher, Rob, Meryl and Mark on the book. I'm not sure when it comes out, but with that caliber of authorship (and obvious good taste) its a must-own.

• Maya
• Graphite on Cold Press Illustration Board
• 11 x 8.5"

A portrait of a friend's new baby.

• Graphite on Cold Press Illustration Board
• 8.5 x 11"
• Source Photo © Kevin C. Smith
• In-progress scans

My first go at graphite in about 12 years. It didn't take nearly as long as a colored pencil drawing, and it was awfully nice to be able to use an eraser. I may stick with it for a little while.

• Clara the Angry Cow
• Colored Pencil on Cold Press Illustration Board
• 11 x 8.5"
• Source photo © S.G. Chipman
• In Progress Scans

Clara in her Halloween costume impersonating her Daddy's scowl.

As well, Happy 5th Birthday, slayeroffice!

While Facebook marketing continues to grow at lightning speed, it’s still relatively untapped territory for many high-tech marketers. Just because Facebook got its start with the college crowd in 2004 doesn’t mean B2B marketers shouldn’t be there in 2010. With that in mind, here are 4 ideas for getting more from your B2B Facebook Marketing.

1. Humanize Your Fan Page

No matter how large or corporate your company is, people still buy from other people. As a marketer, you must strike that magical balance of being professional and personable so your prospects feel connected to your product(s) and your brand. Humanize your Fan Page by uploading pictures of employees and your office(s). Give prospects a view of what goes on behind the scenes. Introduce them to engineers, customers, the product team, the sales team, and the CEO. The more they get to know you, the more they’ll trust you. And the more likely they’ll be to choose you over a competitor.

2. Consider Facebook Your Competitive Advantage

As popular as social media marketing is in high-tech B2B marketing, it’s still in its infancy. Do a quick search and take a look at the Facebook Pages for the largest software and hardware companies. While most have a Facebook presence, few are harnessing its full potential. Use this to your advantage and make your Fan Page better than your competitors’.

3. Take a Group Approach

While many larger companies have full-time social media marketers on hand, in smaller or less progressive organizations, social media still falls under a marketing manager or PR manager’s responsibility—and their plates are already full. By allowing multiple team members to update the page, you’ll increase the frequency of updates and subsequent Fan activity on the page. Just make sure you have strict guidelines in place on what’s acceptable and what’s not. I’ve seen this group approach produce significantly better results than having just one or two Fan Page administrators. Nothing’s worse than landing on a Fan page that hasn’t been updated in weeks.

4. Create an Opt-In Form with Static FBML

With static FBML, you can create a custom tab that allows Fans to subscribe to your newsletter, request a white paper, or contact a sales representative. Most email solutions have instructions on how to integrate an opt-in form with static FBML.

What high-tech organizations do you think are doing a stand-up job on their social media marketing? Let’s talk about it in the comments below!

Want to learn more about social media marketing for the high-tech industry? Join us in person or online October 26, 2010 for SocialTech 2010—the only conference for B2B high-tech marketing professionals.

Handy tool that spits out the syntax and associated vendor-prefixed CSS3 for properties like border-radius, box-shadow, multi-column layout and more. Especially helpful are the supported browsers icons with pop-up version numbers for each property.

Just launched and just wonderful! The 10K Apart contest (“Inspire the web with just 10K”) presented by MIX Online and An Event Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear while anticipating the HTML5-powered web of tomorrow … and encouraging us to design that web today.

We want beauty. We want utility. We want excitement. And we want it all under 10K:

• SIZE — Total file size, including images, scripts & markup, can’t be over 10K.
• STANDARDS — We encourage HTML5, and apps must work equally well in IE9 Dev Preview, Firefox and a WebKit browser.
• LIBRARIES — You can use one or more of these libraries, and it won’t count against your 10K.

Prizes, we got prizes! One grand prize winner will receive registration to An Event Apart plus $3,000 cash and a copy of HTML5 For Web Designers. Three runners-up (Best Design, Best Technical, and People’s Choice) will win free registration to An Event Apart plus a $1000 Visa cash card and HTML5 For Web Designers. Nine honorable mentions will receive HTML5 For Web Designers.

The judging panel that will evaluate all this awesomeness is made up of Jeremy Keith, Nicole Sullivan, Eric Meyer, Whitney Hess, and yours truly.

Sorry, no back-end, this is a client-side contest only.

Check the 10K Apart site for more info. Happy designing and developing!

["Never Pick A Fight" print here.]

OK, now this is interesting…

Of the forty of so entries to the Cube Grenade competition, about one third of them are for businesses and starts ups, and about two thirds of them are for nonprofits and worthy causes.

I was expecting the opposite ratio, to be honest. [BTW There's still a couple of days left to submit an idea, so go for it etc.]

So what does this tell us?

1. Causes are more idea-driven, rather than “rational-utility” driven. “Here’s why this matters”, more than “Here’s why you should buy our product”. I think Cube Grendes are the same. They’re designed to spread ideas and start conversations, not to SELL. Designed to hit a nerve, not to just tick of a box on some random marketing checklist.

2. As nonprofits are rarely funded with anything like what they really need to get the job done, they have to be creative. And I’ve always thought that everyone has to be creative, not just those with no money. So there’s a fit there.

But there’s a fit EVERYWHERE. Business need to be more like causes. Causes need to be more like businesses. Which is what makes this whole thing so much damn fun…

Update! Episode 14 is now available for your listening and viewing pleasure at 5by5.tv.

Josh Williams, founder of Gowalla, is our guest at 1:00 PM ET today, July 29, in Episode 14 of The Big Web Show. Whether you’re a social media user/creator, an entrepreneur, an application developer, an iconist or illustrator, a freelancer with big dreams, an API wizard, a devotee of marketing 2.0, a web designer, a Gowalla fan, or what, you won’t want to miss this episode.

The Big Web Show is taped in front of a live internet audience, and you can be part of it. Join co-host Dan Benjamin and me at 1:00 PM ET today to participate in the live taping of Episode 14.

If you miss the live taping, you can watch the show on our website or via iTunes later tonight.

The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards (often within hours of taping) via iTunes (audio feed | video feed) and the web.

Photo: Keegan Jones.

The show’s over but the photos linger on. An Event Apart Minneapolis was two days of nonstop brilliance and inspiration. In an environment more than one attendee likened to a “TED of web design,” a dozen of the most exciting speakers and visionaries in our industry explained why this moment in web design is like no other.

If you were there, relive the memories; if you couldn’t attend, steal a glance at some of what you missed: An Event Apart Minneapolis: the photo pool at Flickr.

Next up: An Event Apart DC and San Diego. These shows will not be streamed, simulcast, or repackaged in DVD format. To experience them, you must attend. Tickets are first-come, first-served, and every show this year has sold out. Forewarned is forearmed; we’d love to turn you on.

Photo: Jared Mehle.

Hookbox (via). For most web projects, I believe implementing any real-time comet features on a separate stack from the rest of the application makes sense—keep using Rails, Django or PHP for the bulk of the application logic, and offload any WebSocket or Comet requests to a separate stack built on top of something like Node.js, Twisted, EventMachine or Jetty. Hookbox is the best example of that philosophy I’ve yet seen—it’s a Comet server that makes WebHook requests back to your regular application stack to check if a user has permission to publish or subscribe to a given channel. “The key insight is that all application development with hookbox happens either in JavaScript or in the native language of the web application itself”.

canto.js: An Improved HTML5 Canvas API (via). Improved is an understatement: canto adds jQuery-style method chaining, the ability to multiple coordinates to e.g. lineTo at once, relative coordinate methods (regular Canvas does everything in terms of absolute coordinates), the ability to use degrees instead of radians, a rounded corner shortcut, a more convenient .revert() method and a simple parser that can understand SVG path expressions! The only catch: it uses getters and setters so won’t work in IE.