Do it by hand

To anyone who’s ever asked me why I “bother” to hand code everything instead of work with a WYSIWYG, I’m finally validated by the NY Times design director:

It’s our preference to use a text editor, like HomeSite, TextPad or TextMate, to “hand code” everything, rather than to use a wysiwyg (what you see is what you get) HTML and CSS authoring program, like Dreamweaver. We just find it yields better and faster results.

But really the browser-to-browser consistency that you see (and I have to admit, it’s far from perfect) is the result of a vigilant collaboration between many different groups — the visual designers and technologists in the design team that I lead, their counterparts in our technology staff, and the many, many detail-oriented people who come together to make the site a reality every hour of every day.

Via Boingboing, via Slashdot (which I finally stopped reading).

While I’m sharing link content relevant to hand coding methodology this morning (since this blog has taken a turn for the philosophical recently), make sure you check out the <em>Confessions</em> of a CSS Developer. Some of my favorites (and own confessions) include:

  • Everything before IE6 is dead to me
  • I passionately use the * {margin:0; padding:0} rule. Sometimes I feel rebellious and add border:0
  • I will seriously cry when all browsers fully support CSS 3

In light of the first half of this post, I’m willing to overlook confession #12 for the sake of the humor/accuracy in rest of them.

More than One Firefox (Beta) to rule them all - a Dave Martorana concoction

Updated 4/18/08

For those of us who work on the ‘front end development’ side of things, there’s a careful balance we hang in regarding new browser releases. The short version is that as new browsers approach their release candidate status, we need to be checking and double checking our work in them to make sure that their change logs don’t break our work.

At the same time, there’s a known issue with the fact that, more often than not, running the latest beta or release candidate alongside with the production version (and, if you’re a really good developer, one previous version back from the most current production release to take care of things). Internet Explorer is notorious for this and I recall the headaches I went through beta testing it. I essentially resolved to (and continue to resolve to) use multiple virtual machines, one for each version of IE.

Well if you’re on a Mac and into testing Firefox 3 Beta without wiping your profile for Firefox 2.x, check out Dave Martorana’s MultiFirefox.

Multifox

He’s created a little launcher app that, when copied to your Apps folder along with the accompanied Firefox3.app file (appropriately renamed so it wont overwrite the stable version), will let you create and/or select an additional profile, as well as the version of Firefox that you wish to use. It’s clean, it’s simple, and it works.

You can download the dmg (2.0(003) updated 4/18/08) (again, this is mac only), or the zip of the source (2.0 updated 4/18/08) if you want to dig around the guts or, ahem, port to windows? It’s written in Python, because that’s what Dave’s a rockstar in. It’s been rewritten in Cocoa Native, because THATS what kind of rockstar Dave is. That’s not all, though, actually…aside from being an active contributing member of the IndyHall community, Dave also wrote some bitchin’ javascript a couple of weeks ago that got me out of a bind. We’re still testing that but plan to release it as a jquery plugin. Dude knows his stuff and takes a challenge on head first.

Updated DMG and source, v2.0(003) (4/18/08)

4/18/08 Changelog:
Updated to include Firefox 3 Beta 5
Full rewrite to Cocoa native (severely reduced filesize)
Auto-update for future versions
Auto-detect of all versions of Firefox available
Supposed support for OSX 10.4 (untested)

3/14/08 Changelog:
Updated to Firefox 3 Beta 4

2/25/08 Changelog:
Fixed minor profile bug
Rework of Firefox launch code
Added about screen
Decreased filesize

DMG Download (17.98mb, includes FF3 Beta 5)
Zip of source (661kb, does not include FF3, uncompiled launcher code only)

Dave maintains this project at his site, CodeContortionist

Tags: , , , , , , , ,

Viddler Video Post - now with MORE video!

I’m testing out the private beta of Viddler’s new video comments feature for Wordpress. Viddler has always had the edge by enabling in-video comments. Now, by leveraging their new API, they’ve allowed me and a handful of other awesome people to comment on blog posts using standard wordpress comments…and embedding video seamlessly and easily.

More in the video:

Want to try it out for yourself? Scroll down to the comments below and click “record a video comment” and prepare to be amazed!

Tags: , , , , , ,

beginning 2008 with a dream

I don’t consider January 1st the official start to the year because for myself, like many many others, it’s more like “national hangover day” and not really how I want to represent the beginning of the year. So effectively, for me, January 2nd is the beginning of the new year.

That said, my upside-down sleep cycles from the last several weeks of whirlwind have been making for some rather interesting dreams (no, not the naughty kind). I don’t usually remember them, but last night’s was vivid, odd, and stood out to me as trying to deliver a message to me.

I don’t remember ALL of the details, but the general sentiment was that I was back in my high school. Much like most of my high school experience, I was late and hadn’t done my homework. Where things got weird were, I found myself surrounded not by my high school teachers, but instead by various faces from today’s social media/new media/tech/geek scene that I’ve become so fond of. Instead of my stat teacher, I saw Allen Stern from centernetworks.com. Instead of the Bodeys (a mr. and mrs. pair of english teachers, for those of you who didn’t go to high school with me), Mr. Messina and Ms. Hunt. Hall monitor David Blumenstein had a watchful eye on me as I ran to my locker when I was late for class. Junto-master and IndyHall co-founder Geoff DiMasi was there as the social studies teacher. I’m sure there were more injections from my current reality to my actual past that I don’t remember as vividly, but you get the picture by now.

I’m not usually one for analyzing dreams, but I thought it was interesting that at the turn of the year, the turn of a year where I have so much more that I want to do and so much more that I want to grow, I have a dream like this one. I’m going to think of it as a cue that I need to remember to never stop learning, or think I have to stop learning. I’m going to think of it as a cue that the people around me are the best teachers there are, and part of the reason I look up to them so much is that I hope to be as good of a teacher as them.

2008 is, for me, a year of growth. That was my response on New Years Eve to a tweet that Chris sent out with a “themeword” meme. 07 was a year of experimentation and leaps of faith. I had just quit my job, started attending conferences, building my clientbase, adopting all kinds of new best practice techniques that made me more efficient. Nevermind the leap of faith that IndyHall would not only be successful, but becomes so integral into a community here in Philadelphia.

1 year later, it’s time to take all of the good habits and lessons that I acquired along the path of experimenting in the last 12 months and put them to use in a growth phase. Putting together a more formal team of talent is at the top of my list of “to-dos”, and we’ve already started formulating how that will work. Splitting my time between being the talent, and evangelizing best practices to new ears is also a priority. It’s about personal growth, its about industry growth (our industry, effectively our home), its about knowledge growth.

Instead of just attending conferences, I’m hoping to speak more. Instead of just building web sites, I hope to build web apps. Instead of just inspiring and managing myself, I hope to have a team to manage and keep inspired. I have some personal goals for IndyHall, but I’m going to save them for myself for now because I’m more interested in seeing how the community that we have here continues to hit a stride and take advantage of the resources we’ve created. That giving up of some control, for me, is part of my personal growth as well. I’m learning to practice what I preach!

I’m really excited about this year. Really, really excited.

Tags: , , ,

Shopify Payment Gateway List

Since this doesn’t exist anywhere except in the admin, I think, I thought it’d be handy to have a list of the payment gateways supported by Shopify.

P.S. This is NOT my grand re-entrance into blogging at dangerouslyawesome.com. my drafts folder has been growing, and the majority of my regular posting has been going on over at the IndyHall website. That will be changing, you have my word.

As of 10/11/2007:

External Payment Services

ChronoPay

GestPay

Nochex

PayPal Website Payments Standard

Credit Card Gateways

Authorize.net

Braintree

CardStream

CyberSource

DataCash

E-xact

Efsnet

eWAY

Linkpoint

Moneris

NETbilling

NetRegistry

PayJunction

PaymentExpress

PayPal Payflow Pro

PayPal Website Payments Pro (UK)

PayPal Website Payments Pro (US)

PaySecure

Plug’n Pay

Protx

Psigate

PSL Payment Solutions

Quickpay

Realex

SecurePay

TransFirst

Trust Commerce

USA ePay

Verifi

ViaKLIX

Checkout Replacements

Google Checkout

Tags: , , ,

shopify releases marketplace, redesign, new pricing scheme…

and for some it’s a win, others a loss. Shopify is a RoR based hosted eCommerce solution that, over the last 9 months, I’ve fallen in love with and done over a dozen shops with.

First, lets focus on the win.

The 2nd screenshot from the right is the first Shopify store I ever did, Surfer Supplies online surf shop.

Shopify’s “brochure” site is now at a .info domain. The content is a cleaned up, reorganized version of the previous marketing site, and I quite like the look/feel. I also rather like their screenshots page, which currently has 2 shops I worked on (NoonaCo and Willotoons), though I’m a little sad it’s not paginated. What happens when the current featured screens get pushed out? I’d like to see them archived.

The new Shopify DOT COM site is featuring a screenshot of a global product search…interesting move, I wonder how this will pit competing Shopify store owners against each other. A cool move from a visibility perspective, a questionable one from a community perspective.

In fact, while I’m on the topic of community…thats one of my favorite things about Shopify. The development community has always been awesome, and incredibly supportive of each other. It was a great place to send newbie Shopify developer. Today, Shopify released a new pricing scheme. Previously, their service was free until you made a sale. At that point there was a 3% commission. While this was a tough sell to large volume stores, it was perfect for the MAJORITY of what Shopify is used for…small, boutique shops. Minimal cost until a sale was made. Beautiful. And for me, the sale was easy-as-pie. I had so many people geared up to use Shopify for their next shop.

Then, today brought change. And the people, oh, they’re pissed. The new pricing model is definitively geared towards volume sellers. Great…for them. But what about the little guys? Shopify’s Cody says:

I don’t think that paying $24 / month puts Shopify out of range of low capital startup projects. Installing, securing, backing up, and hosting your own server with Zen cart will surely be a lot more costly, either in dollars or man hours, than having a Shopify subscription.

That will help the sell…but nonetheless, I’m confident I’ll be losing customers to this. Luckily, current customers are grandfathered in. But if you haven’t put your credit card in yet, you’re lost. :-( Never mind the fact that I had the old selling points memorized…this grid is MUCH more complicated, and makes it much harder to make a decision and a sale.

At this point, I’m going to be keeping a close eye on this. I’ve come to love Shopify as a product, and as a selling point. I was able to enable my customers in a way no other product could, and consistently impress. Shopify’s staff has been incredibly responsive and supportive since day 1, so I’m hoping that they take the community’s interest and coming to a middle ground.

This is a great example of creating a passionate community and then, when they could have been involved with the discussion of the direction of the product, they weren’t and now the community is in dissent. It’s only a matter of time before someone starts posting HD DVD encryption codes all over the forum. *sigh*.

In the mean time…while the community and Shopify’s staff come to terms, I regret to say that I’m forced to look for an exit plan…and at this point in time, I’m really, really stuck to find one that fits as good as Shopify does. Well….did.

Scott, Tobi, Daniel, Cody, Paul, James, and the rest of Jaded Pixel: I’m a devoted fan of Shopify, and hope to stay one. Please, please do best by your community, your users, and your customers.

Wild and crazy final thought: what if Shopify had this plan as a hosted option, and then…open sourced the platform. That is, for people who want ease of hosting, deployment, maintainability, etc…you pay monthly for that service. For those capable of deploying patches, arranging hosting, security, backup, and all of the other costs that go along with e-commerce, provide a self-hosted and open source option. This would be an awesome way to go back to the community roots that you’ve served and have served you, and calm the community down by making every-body-happy.

Tags: , , , ,

proactive networks promote proactive usership

LinkedIn has announced an API to be released within 9 months. It’s already been expressed that 9 months is too far off, and frankly, a nearly 1 year response to a strategic move by a so-called competitor (that’s facebook, apparently) is straight up, unacceptable.

Hang on a second. what do facebook and linked in have in common? They both run in the “social networks” crowd, though I’ve never considered one userbase to mirror another. Lets take a look.

Facebook has been, through all of it’s incarnations, fairly “real time” due to the nature of it’s users and the way that they used the environment. Their profile reflected their favorite movies/music/books NOW. Their wall reflected commentary from friends from the previous week’s events. Their photos were tagged from the previous nights’ social event (with or without the obligitory red solo cups). Even the pre-twitter “status” line that asked what you were up to, though it never caught on as heavily as twitter, reflected “now” events. And the connections between one person’s “now” events and another person’s “now” events.

LinkedIn, though “social” in nature, had a niche in business rather than social record-keeping. Like a mix between a social network and a self-evolving AddressBook, the real value in LinkedIn was to keep the contacts that you already had in it, and let them update their own contact info, new and old work places, promotions, etc. But due to the less regular updating (at least I HOPE someone isn’t putting new stuff into their LinkedIn profile every 3 days. Thats a lousy employment turnover), I don’t find myself going back to LinkedIn looking for new information once an hour like many FacebookAddicts do. I don’t even find myself on LinkedIn once a day. Or even week. I don’t think I EVER go back looking for people. The only times I go to LinkedIn and log in are when it notifies me that someone has updated their info. When a new related contact is available. It’s a very reactive relationship, versus the addictive/proactive nature of Facebook.

So where does this API fit in? Is linked in going to create a marketplace for apps based on a userbase that, with the exception of recruiters, uses the network more reactively than proactively? That seems like a waste of 9 months, to me.

On the other hand, if it’s the resume data they are looking to make more portable, I’m all for it. But wait, it already is. Thanks to the implementation of the hResume microformat, each of over 11 million resumes is marked up for data portability (or at least a working draft of the model). What would be way sweeter than an API that takes 9 months to crank on? Smarter imports/exports using microformats. I’m looking at the Dopplr friend importer that uses hCards, and even the Satisfaction account creation tool. Both of these flows use existing data, and presumably could keep one set of data up to date based on another.

Based on the proof-of-concepts in both of these hCard tools, it becomes clear that these flows actually can work. This, in my opinion, should be much less complicated to do than an after-the-fact API and can be baked pretty quickly with the already existing technology. I think that LinkedIn would benefit greatly from making a DIFFERENT strategic move than Facebook as response, especially if their goal is to promote more pro-active usership to grow from the current re-active tools. After all, the apple doesn’t fall far from the tree.

Tags: , , , , ,

hosted subversion for the entire team: meet Project Alpha from Wildbit

As a developer, even when I’m developing solo, subversion saves me both time and headaches. When working with additional developers…well Dan Cederholm puts it best:

You can work on your own, commit changes, send a message with that change, I’m totally hooked on this way of working on web apps. Yeah, it’s so much fun working on something of your own. You feel more invested and you don’t feel like you’re on the clock so you put more detail, more attention to detail, and you’re just more excited about it. It’s fun. With a lot of the client work I do, because I’m focused on the UI a lot of times I’m handing off what I did to someone else, they’re implementing it, it usually gets messed up, that’s sort of par for the course and it’s rare when it doesn’t. Working on something yourself with somebody else when you’re both in tune with what this product is, it’s so much fun and it’s far superior.

A number of tech people I work with regularly comment on how designers could really benefit from subversion. Bit-wise version control seems so much smarter, from both a size/storage perspective, as well as a team integration perspective, than this_is_the_newest_version_1.0b_final_reallyitsfinaliswear.psd.

Subversion for Design

Of course, in respect to designers, the whole prospect of working from a command line is understandably intimidating. And even with a myriad of GUIs for subversion, when it occasionally gets unruly (which it does…there’s no denying that), you need some command line mojo to get things cleaned back up.

A photoshop plugin would be sweet, something like “save as version” that takes care of all of the legwork. Consider that an official “pretty pretty please someone build that for CS3″

The real story

But that’s not what I’m writing about today. I’m writing about what I always get psyched about, a really cool LOCAL project coming from one of my new friends here in the Philly tech/creative community. I spoke to Chris Nagele of Wildbit the other day at the Cream Cheese Session and he was pimping a new rails app that his team has built, currently going by the mysterious name “Project Alpha”. In short, Project Alpha is hosted subversion. That’s not new, not even close. It also has a built in browser, and tracking, but that itself also isn’t new (though Chris’s implementation is about as sharp as I’ve seen). What’s REALLY smart is direct integration with Fogbugz, Lighthouse, and Basecamp. Essentially, all subversion activity is filtered to the right people on the team, regardless of if they are working directly with the code. This isn’t a code hosting, this is code hosting geared towards team integration and highly productive workflows. I’ve snagged some screenshots from Chris’s post on the Wildbit site, check them out.

The Dashboard

Repository Overview

Changesets

File Browser


There’s clear cues that were taken from some of our favorite team and project management tools, which I love because the way webapps are being built now, once you use one you can be comfortable in many other ones. Features, rather than interfaces, are the defining differences.

Why this works

My business workflow uses a bunch of apps. Why would I pay for multiple hosted apps rather than have one “do-it-all” suite? I think that the current trend of “do one thing really, really well” apps is smart, so long as their data is portable (like Project Alpha takes advantage of), I’m happy to have a dozen “best of breed” apps that talk to each other than one large lumbering suite that sucks at everything. I’m looking at you, Microsoft Office.

Wishes

Not-so-silent wish? I’d love to see a partnership between these tools and the model that’s run at BountySource. BS has it’s own SVN browser, which is not only part of their system bus is an open source rails plugin as well. I really like some of it’s features and Dave and Warren @ BountySource work really hard to promote open source as a viable business model. I could see both of these ventures really benefiting from each others’ work.

Also I’ll push for the integration of OpenID (so I can log into multiple accounts I’m invited into with the same URL based identity, of course), and microformats (i see opportunity for hatom and hcard immediately, I’m sure we can find a couple more things that can be marked up). But I’m sure these are considerations for down the road, because Chris is a smart guy :-)

Testers needed!

Oh, one last thing. Chris is looking to get some testers to work with Project Alpha. Also from his blog post:

We are releasing a private beta soon. When it is ready, it will be launched as a hosted subscription-based service with free and paid accounts. We are thinking about a free single project installable version as well, but have not made up our minds yet.

If you are interested in the Private Beta, please email me and provide some details on how you might use the system (size of team, number of repos, etc).

Tags: , , , , , , , , ,

Facebook F8 - Find your niche, make it worthwhile

There has been a LOT of buzz about Facebook’s F8 application platform since it’s release on thursday night. And don’t get me wrong, I think this is a REALLY cool opportunity to leverage the tools AND the community that Facebook has in place to spread usership and awareness of web apps. Facebook has opened up some ridiculously cool tools to a very large audience. But maybe..it’s too large?

I’m scanning my “friends timeline” and noticing a clear division.

My geek friends are adding Facebook apps left and right.

Geekyfriends

My school friends (current undergrads and recent grads) have ALMOST no app usage, with the exception of the most popular app on facebook, iLike.

Schoolfriends

What does this mean? Well, at this stage in the game it means that geeks are bleeding edge and the rest of my friends aren’t as tech savvy. Fine. But long term, will the adoption rise? Depends on the app. I see things like last.fm getting a lot of traction. Music listening habits are always popular conversation on college campuses, and that data will become increasingly valuable to record companies and the artists, so I wouldn’t be surprised if the next step was INCENTIVES from the labels and artists to share your listening habits. Just my own speculation.

But beyond that, I’m having a hard time seeing F8 apps take facebook by storm. Even though facebook has opened beyond the “University Only” model, they have a stigma. In time, that stigma will likely go away, and if F8 is Facebook’s team being forward thinking enough to prepare for it, that’s interesting and awesome in itself. But I think that the Facebook audience at large (the large concentric circle of a large percentage of students in the US) compared to the rest of us who are really excited about F8 (a.k.a. “social networking geeks of the world”) still has huge opportunity for market penetration, like the Last.FM example above.

App developers: try thinking like a student. What do students need and use? I can easily answer the question because I was an on-campus undergrad very recently. Here’s a short list:

  • Take-out Food
  • Textbooks
  • Music
  • Nightlife
  • Discount ANYTHING

This is hardly the end of the list, but a couple of quick, easy to illustrate examples. I’ll hit them one at a time, and how I think integration with Facebook would boost usership of Facebook AND the service being provided.

Take Out Food

When I lived on campus I had little interest in walking to the dining hall to get lousy food that was going to eat a hole in my stomach. Cheap pizza places (2 large pies for <$10) and hot wings (40+ wings for $12) were all over campus, and they all delivered. And the best part? When CampusFood.com came out, I could browse a menu, and then with saved credit card information, click “order”. Cheap food delivered to my door with minimal human contact, and no cash transaction, every college student’s dream.
Campusfood (or someone else) needs to integrate this into Facebook. They already claim to support transactions, so that part should be easy.

Campusfood

Scenario: I come home from a party, a few beers in, browse facebook to add my new party friends, poke a couple of the girls that I think are cute, and order a pizza, all in one workflow. And best of all? In the morning I can browse the public timeline to see what all of my OTHER friends have ordered…maybe there’s a new spot on campus that I haven’t tried yet, and Johnny’s sandwich order sounds really tasty…boom. You have personal recommendations without people even needing to talk to each other.


Textbooks

This one’s easy. Facilitating a textbook exchange on Facebook is easier than ever. Someone should do this RIGHT for a change. I’d love to see a Netflix for textbooks, though I understand the challenges of varying versions/editions of textbooks. Still, seems possible. The ability to announce when I’m done with a book via the public timeline and have someone come along and snatch it up seems pretty plausable.

Music

The success of the Last.FM plugin is encouraging, and I already mentioned my thoughts on incentive-based scrobbling. If nothing else, the publicity of “I’m listening to…” being announced on the “News Feed” is free publicity. I’m not looking to get paid for my data in cash, but something from the label to say “thanks for providing us with some of the most valuable market research info we’ve had in years” would be nice. Maybe an album or two of mainstream music that doesn’t blow? Discounts on itunes, etc seems to make the most sense, but again…I’m open to suggestions.

Music

Nightlife

One of the most successful features of Facebook, in my observation, has been the party planning tools. Set a time, place, and invite a pile of people. RSVPs. Privacy from the guest of honor, if you need. Conversation about what to bring. Etc. College kids love to party, but once they grow up past the legal age to drink, many of them move form house parties (where they sit around and drink apple juice, i promise) to the local bar scene. These bars need to be taking advantage of Facebooks new open-ness. Promotions and event invitations with incentives like drink specials, guest list only open bars, theme parties…etc.

Philly2Night

I’ve been using Philly2Nite.com regularly (and recently had the pleasure of lunch with one of the co-creators Chris Nagele, who has an awesome eye for the kinds of strategy I’m describing), and think that other city-based niche nightlife sites could benefit from Facebook’s new open platform. Philly2nite has it’s own social network and has come up with some cool ways of leveraging it, but tying the two together seems like a match made in heaven. PLUS, that network extends past graduation because we all know that people don’t stop having social lives when they graduate (at least, I hope they don’t stop). Announcements of friends attending a particular event is easy incentive to get someone to come out to a party that they might not have otherwise, and the Facebook mechanisms are perfect for that.

Discounts/Bargain Shopping

Slickdeals, Restaurant Coupons, FatWallet(and other cash-back deal sites) all NEED to recognize the opportunity to hit a target audience of kids who want to have the hippest, coolest, trendiest WHATEVER but are on a tight budget. Cash back and discounts are quick wins in the eyes of a college student. Take advantage of that, and work it right into my facebook account.

Slickdeals

I could go on and on with this list, and if I had more time myself I’d build every single one of these apps, or pursue the means to make them exist. But I’d love to see the mechanisms provided by F8 really recognized better by the greater part of the social economy that comprises Facebook. Let’s see where this goes, and if anyone sees any of my app ideas (or anything similar) please let me know in the comments!

Technorati Tags: , , , , , , , ,

Donation Buttons (and other easy tweaks) using Google Checkout’s HTML API

A common request that I get with a lot of the non-profit or foundation work that I do is to have a donation button. Previously, PayPal was the way to go, since they had a donation button maker. The downside was, that paypal takes a cut on your donations unless you jump through some hoops to become a registered “foundation”.

Recently, Google Checkout has rolled out and has some rather enticing features…besides integrating their single sign-on checkout procedures, invoicing, and a bunch of other handy things…for the entire year of 2007 they are offering card-processing with no fees. Thats right…no fees. All of 2007. Nice.

435134698 22203F03B3

Before I go on to listing my hacks, I do have one small request…I’m building up a referral base and if you have any intention of signing up for a new google sellers account, please consider using my referral link if the info below has helped you (or anything else ive ever posted has). it’s much appreciated, and I get a kickback on your sales (.5%). Full disclosure. Sign up here to use my code.

On to the help.

So…Google Checkout, like most of Google’s other services, has a pretty extensive API and code example library. Sometimes, though, you’re not looking for full integration. You just need a simple donation button where the user can specify any amount.

435138236 E921E879E6

Or maybe a “buy now” button with a quantity…for tickets, for example.

435138881 A129Fc8Ae8

At first glance…the Google Checkout buttons won’t let you. They only supply 2 options…buy now with a fixed price, or buy now with a drop down of pre-set prices.

435140999 3063050Cce

So how did I build the buttons above? Using the HTML API. But before I could get started…even the demo code was screwing up with my Merchant Key…because I had missed one tiny setting.

This one’s important.


435136466 D8861747B2

Under Settings->Integration, there is a checkbox that stops anything but digitally signed XML cart posts. While this IS an important security feature…since you arent posting any secure information via the HTML API, you’re safe enough to allow unsigned posts.

From there…just follow the example listed here on the API help guide. Using the first code block, replacing the dummy merch key with your own merch key should be enough to get it working. Assuming you can post the “chunky peanut butter” demo to your account, you’re ready to move on.

The next step is to make some modifications.

Here’s my ticket-purchase with quantity box code:

<form class="gcheckout" method="POST" action="https://checkout.google.com/cws/v2/Merchant/[[merchID]]/checkoutForm” accept-charset=”utf-8″>
<input type=”hidden” name=”item_name_1″ value=”Martini Tasting Cocktail Benefit”/>
<input type=”hidden” name=”item_description_1″ value=”Join Us for an evening of food & fun Martini tasting & silent auction at the Flanders Hotel.”/>
<label>Quantity:</label><input type=”text” name=”item_quantity_1″ value=”1″ id=”qty”/>
<input type=”hidden” name=”item_price_1″ value=”3.99″/>
<input type=”hidden” name=”_charset_”/>
<input type=”image” id=”submit” name=”Google Checkout” alt=”Fast checkout through Google”
src=”path/to/submit button” />
</form>

And here’s my donation button code:

<form class="gcheckout" method="POST" action="https://checkout.google.com/cws/v2/Merchant/[[merchID]]/checkoutForm” accept-charset=”utf-8″>
<input type=”hidden” name=”item_name_1″ value=”Quintin Foundation Donation”/>
<input type=”hidden” name=”item_description_1″ value=”Thanks for your donation. Every little bit helps!”/>
<input type=”hidden” name=”item_quantity_1″ value=”1″ id=”qty”/>
<label>Donation Amount: $</label><input type=”text” name=”item_price_1″ value=”" id=”amt”/>
<input type=”hidden” name=”_charset_”/>
<input type=”image” id=”submit” name=”Google Checkout” alt=”Fast checkout through Google”
src=”path/to/image/btn_donatenow.gif” />
</form>

At this point you should notice some differences between the demo code and mine. First, the form action is now posting to the actual cart form rather than the sandbox (i bypassed the whole sandbox thing since this isn’t a full e-commerce integration). Replace [[merchID]] with your own ID (and drop the angle brackets). I added the class gcheckout to the form tag for formatting purposes. Also, set the path of the input id=”submit” to your submit button graphic.

All of that leadup, and the trick itself is actually very simple!

The core pieces to making this whole thing work are the inputs, which, in the demo code, are all set to hidden. It’s very simple to change the type from hidden to text, and make them user-editable. By placing a label in front of them, and a little bit of styling, you get some pretty swanky buttons with user-input flexibility.

All of the customizable input fields are detailed here. This should allow you to specify shipping details, tax details, and many other parameters…depending on the needs. And remember…so long as you keep the “name” property, you can switch to a dropdown or a multi-select box…allowing you to create some fairly robust button codes!

Oh..and for debugging? Go back to that integration place (where you unchecked the shopping cart post security box) and check the log. It’s pretty useful when google checkout chucks a fairly nondescript error for the user, but lets you track down problems.

TAKE THAT PAYPAL!

I’ll come back to this post in about a week when we’ve launched the site that I figured this out for, so you can see the code in action.
Check things out at http://www.quintinfoundation.com. Note, that we were asked by Google to take down our donation button until there was some tax-related information squared up. More on that issue to come.

Tags: , , ,


Clicky Web Analytics