Having spent time earlier this year on optimizing the Graphicly site (and my own) for Facebook’s Open Graph protocol, I hoped that Google+ would take advantage of this existing code infrastructure. Sure enough, Open Graph markup comes over relatively smoothly, but there were a couple surprises that I figured warranted a more detailed write-up.

First, you should note that there are currently 2 means of 3rd-party site content showing up in Google+:

1. a Google+ Stream post with a shared link, or
2. a Google+ +1 post.

So, how do these two posts work, and how do you get your content optimized as such? (Of course, I should note, there is the expected detailed API docs from Google for implementing the +1 button, but no information currently within on how to structure your information for best results in Google+.)

Anatomy of a Google+ Stream Post

The standard view in Google+ is that of the Stream. (It’s somewhat akin to Facebook’s news feed or Twitter’s Timeline.) While it’s contents are not as complex in structure as Facebook’s, you can attach a link to any comment, which then loads a preview beneath the post. Said post is constructed as follows:

A. Favicon is the 16×16-pixel graphical icon hosted at yoursite.com/favicon.ico (or whatever is specified in your site’s <link rel="shortcut icon" ... /> element).

B. Object Title is generally the name of your page, and is originated from the <meta property="og:title" ... /> element first, and the <title ... /> element if no such meta element exists.

C. Image is the display of the content designated in the <meta property="og:image" ... /> element. Important note: only images that are 101px or greater in width and 120px or greater in height will appear; if your image is smaller in dimension, the image will not be considered for the post and the Description text will fill the entire width of the post.

D. Description is the content specified in your site’s <meta property="og:description" ... /> element first, and the <meta name="description" ... /> element if no such meta element exists. The description is capped at 201 characters, after which an ellipsis is added to suggest additional content not shown.

Anatomy of a Google+ +1 Post
A +1 post is unfortunately somewhat buried in Google+; users who click on a user’s profile can then click on their “+1′s” tab (when available, to the right of the main profile photo and beneath the user’s name) to see what content they’ve “big upped.” The post is largely similar in content to the Stream post, but somewhat different in terms of display.

A. Image is the display of the content designated in the <meta property="og:image" ... /> element. Important note: only images that are 101px or greater in width and 120px or greater in height will appear; if your image is smaller in dimension, the image will not be considered for the post and the Description text will fill the entire width of the post.

B. Object Title is generally the name of your page, and is originated from the <meta property="og:title" ... /> element first, and the <title ... /> element if no such meta element exists.

C. Site URL is the second- (and, when relevant, third-_ level domain of your site. It’s inclusion in the display is somewhat odd given its visual prominence via color and its lack of precision (not the full URL to the +1′d object), but it appears to be a throwback to Google’s search results display.

D. Description is the content specified in your site’s <meta property="og:description" ... /> element first, and the <meta name="description" ... /> element if no such meta element exists. Somewhere between 130 and 140 characters of the description are shown here; the exact number appears to be imprecise, as the display doesn’t chop words in the middle leaving a couple incomprehensible characters. However, there is no trailing ellipsis, resulting in sometimes awkwardly abrupt snippets.

As a final note, it’s great to see Google leveraging sites’ existing investment in Facebook Open Graph markup. As Google+ matures, it will be interesting to see what other Open Graph tags are also supported, whether Google works actively to extend the Open Graph protocol, and what other developer/publisher tools become available to ease integrations.

Update: Google just posted an article on how to specify which page elements should comprise the headline, image, and description in the +1 post.

Email’s great, but those receipts compete for attention with email from your mom, friends, colleagues, etc. which makes them hard to find when you’re trying to look up past purchases, track packages or find the store you bought some shoes from a year ago.

Enter Shopdeck. Shopdeck is a personalized, filtered shopping experience.

Thanks to OAuth, Shopdeck lets you grant access to your Yahoo! and Google mail accounts. Once authorized, the app mines your email for receipts and order invoices, parses those matches for the useful information, and aggregates it inside Shopdeck.

The app’s home screen becomes a dashboard of your favorite stores… not a random set of stores you don’t care about. These are the stores from which you’ve already made purchases.

Similarly from those same parsed emails, you can get quick access to recent (and long-past) purchases, track the associated packages, and quickly go to site for a particular invoice detail.

Plus, you now have a launcher, search box, and history for the stores you already trust.

And, when I say “now,” I really mean “soon.” Shopdeck was demo’d at iPadDevCamp (thanks to the awesome skills of one Zach Graves), but still has some work to do before submitting to Apple.

In the meantime, see more at Shopdeckapp.com and @shopdeckapp.

(Update: Name updated to Shopdeck to avoid trademark issues.)

I intentionally list developers first, as I strongly believe developer-friendly products encourage significant innovation on top of Web products… which, in turn, greatly benefit everyone else (who get features and support for niches that no product could conceivably support on its own).

I am happy to announce, after significant time and effort from a great crew of present (and past) talent at Yahoo!, we now support Apps built by 3rd-party developers (i.e. people who don’t work for Yahoo!) on the Yahoo! Homepage. What this means is you can now add just about any type of content and functionality to the Web’s most popular starting experience.

More than a dozen of these Apps can be found right now by clicking the “+ Add” link next to “My Favorites” on Yahoo.com. From managing your money with recently-acquired-by-Intuit Mint.com, to checking out the weekly ads for Target stores, to puzzle-solving games with Flood-It!: there is an App to suit your interests.

Disagree? Get started building one today… there’s no fees (although you can make money inside your App as you like), no complex SDK (write your code the way you prefer on your server), and no obtuse App Store approval process (instantly share your App with millions and/or promote it using Yahoo!’s in-product App galleries).

To do this, the Yahoo! Developer Network lets you:

• learn more about YAP (our App development platform),
• get up and building an App, and
• create/manage your Apps.

Let me know your experience with these Open Apps on Yahoo.com… I’m excited to see my team’s work see such a large online audience, but I’m also equally exciting about adding even more support and features for developers soon.

Update: TechCrunch has just covered the release of the Mint.com App (and others) on Yahoo.com.

Laaker is joining YDN to build and lead the new user experience group for the team. The Sunnyvale-based company, now 10+ years old, began as the web’s Yellow Pages, and now has grown to be the #1 start page, #1 email service, and a host of informative, entertaining, and addictive services. Its Developer Network provides tools, code, and assistance for people outside the company to utilize Yahoo! services (such as Search, Maps, CSS and JavaScript, and even the insanely popular Answers).

To announce this move, Laaker was interviewed by good friend and colleague Matt McAlister. A portion of this interview has been made available for public consumption:

1. What is your biggest user experience pet peeve on the Internet?
   Data duplication. As a user, I am forced to pay a data surrender toll with every new site I visit: my name, email, password, zip code, photo, and sometimes much more. While I’m probably a little too comfortable sharing such information, it becomes frustrating when I move, change job titles, switch photos, etc., as I then have to revisit and update every site I’ve entered such info. Further, if I then decide I don’t want people to know where I live, or what I look like, I’ve got a similar distributed information management issue.

   Managing these profiles also carries risks for all the individual companies/startups that maintain and store such info; if their accounts are sabotaged, and sensitive information is revealed, they’re liable. Looking forward, if there’s a way for everyone to access a common platform for user profile, preferences, and basic information (with the appropriate security controls and management interface), we can make our users’ online lives easier to maintain and control. Providing that sense (and reality) of control, as well as the benefits of recognition (such as automatically knowing what ZIP code to use for weather, movie theater locations, and maps, or providing quick access to your address book), will be a great leap forward for our online experiences.

   We want to make users do as little work as possible to get what they want from our products (and yours). Instead, we should shoulder the burden behind the scenes, listen to what our users tell us (both in what they say, as well as what they do), and provide experiences that excite and engage them everyday.

2. What web site do you wish you had designed?
   ClaimID. They took a leadership position around connecting users’ various identities across multiple sites using the MicroID microformat. The beauty of their approach was twofold: 1. allow users to make claims to their various profiles without requiring verification, and 2. leverage an easy-to-implement, open format that is simple for the developers to integrate. They’ve kept their interaction simple and minimal, their scenarios in context with the action just taken, and play nicely both with the competition (such as other OpenID providers) and the collegial (e.g. support for Gravatars and multiple microformats).
3. Show us one of the more clever user experiences you’ve seen on the Internets recently?
   I would encourage folks to check out the Upcoming/Flickr integration. For an example, check out the YUI 1st-Year Anniversary Party. The photos shown near the comments area are sucked in by users adding a tag to their Flickr photos. Further, once such a tag is entered on the Flickr side, it is hidden from users (as its in computer-readable but human-ugly format) and instead is reflected with an Upcoming.org icon and a link to the associated event.

   Simple, community-powered cross-site integration is a beautiful thing. By emerging from the community, Upcoming and Flickr were able to add useful functionality for their users (i.e. photos shown on events’ pages, and event listings linked from photos) that allows best-of-breed tools to focus on what they do best, rather than trying to build competing offerings inside of each that don’t quite do what users want. By doing so, users can pivot off of photos/events (via hidden tags) and better represent the activities in which they are participating.

4. What’s the best invention in man’s recorded history?
   The newspaper. As a medium that cuts its cost-to-entry so as to provide the masses with vital information, critical thinking, and calls-to-action every day, the newspaper wins it hands down for me. I would rate books highly, as well as free hosting/publishing platforms (like Blogger and WordPress.com) for similar reasons. I also think very fondly of my Nintendo DS Lite; it’s too early to tell on that one, though.
5. Who was your favorite band in 8th grade?
   Public Enemy, if I remember correctly.
6. If you were a Muppet, who would you be?
   Statler. He always heckled with a smile.
7. What does your wife find most annoying about you?
   Good question. My guess? Including her in the press releases I write. (I usually have to edit her back out; she’s not as liberal with sharing her info online.)
8. If you had to listen to the collective works of one musical artist over and over again until you died, who would you listen to?
   Time and again, Paul Simon seems to win out for me, so I would have to choose him. My Last.fm profile, however, tells a different story, with U2 blowing everything else out of the water. Secretly, though, Justin Timberlake would probably be the least melancholy way to go out.
9. Does altruism exist?
   One of the most enjoyable benefits of being a Yahoo is our Yahoo! Employee Foundation… its a self-sufficient, not-for-profit organization that is funded entirely by Yahoo! employees. It’s not a company mandate, and it wasn’t spawned by the company. Rather, it was spawned by those fortunate to work here who wanted to use the platform of this company as a means for good. So, does a corporate-affiliated organization prove altruism exists? No. But the people who’ve I met behind that organization, as well as my family and close friends, have repeatedly proven it time and again.
10. What interested you most about working at Yahoo!? How about YDN?
    If you don’t work inside Yahoo!, you may be surprised that we have more than 350 designers working worldwide (with 200+ here in California alone) to craft our users’ experiences. I came to Yahoo! to join an amazing group of designers, researchers, and analysts (not to mention fantastic product managers, engineers, and marketers) with a common goal: approach problem-solving from a user-centered perspective and iterate quickly while learning from actual users.

    I’ve long been a fan of our Developer Network as it provides a means of extending Yahoo! as a platform. For having “Web” in the title, the World Wide Web is a pretty disconnected experience. Yahoo! exists in a much larger ecosystem, but there’s currently very few examples of a connected experience (i.e. what a user does on Amazon affects what they see/do on Yahoo! and what they see/do on a personal blog). And, if Yahoo! begins to serve not only as a user-facing destination but also the glue between numerous online destinations/services, we’ll have a fair bit of work ahead of us to ensure a solid, trusted, and enriching experience that our users associate with the Yahoo! brand. (Side note: I’m looking to hire talented designers and prototypers to help define Yahoo!’s off-network experiences ; if you’re interested, please drop me a line with examples of your work.)