Add Social Bookmarks

From Zanecorpwiki

WIP

Current thinking: there is no public API for the tweet count or FB like count. So, you can customize the buttons, but not the count widgets. Since these are the key counters, you're stuck if you want a consistent look and feel. Even if their one-size fits all L&F fits your site, the two counter's don't quite jive with each other so you're kinda stuck. (The vertical counters work a little better, but I like the compact. It's good info, but takes up to much real estate. I mean... I don't like counter's overshadowing the content.)

The original plan was to go manual, but after going through that process and trying to integrate counters (see above), I've settled on "AddThis". Add this has their own counter which, I assume, counts everything that goes through add this. This means that impromptu likes/tweets don't get counted, and any numbers before you set up the AddThis widgets are get lost, but assuming that most of the likes come from the page itself, the AddThis counter should be pretty close to "total likes". It also has the advantage of being a single number. And more configurable.

So, the current ideal is to use the AddThis HTML/JS API to create a custom like bar, followed by the AddThis count. Not "the best of all worlds", but the best engineered solution for the moment.

AddThis API: http://www.addthis.com/help/client-api

Twitter FAQ (re. count API): http://dev.twitter.com/pages/tweet_button_faq#count-api

nice icon listing by AddThis: http://www.addthis.com/custom-service-icons

matte black icons for 33third: http://webtreats.mysitemyway.com/154-matte-black-social-media-icons/

grunge icons: http://webtreats.mysitemyway.com/black-paint-splatter-social-media-icons/

TODO: bring in logos. We often just get the icons without names...

TODO: Address special purpose additions, Technorati and SlashDot

I like to add social bookmarks "manually"... Actually, I'd like a tool that generated all the links for me based on canned styles and layouts. But, I don't want to use some intermediate service, so until I find good tool, then I'm stuck with manual.

There's a bit of tension in buttons between style and functionality. Many sites, like Facebook, have little widgets that, for instance, show users which friends also like something, provide counts of how many times the pages has been "liked", etc. The problem with these approaches is that they sometimes restrict the developer to using whatever look and feel the social media site provides. You could use a set of consistent buttons, but you don't get the added functionality.

I'm not even sure what all the limitations are because it varies on a site by site basis and I just haven't looked into everything.

Privacy and Security

The big privacy drawback to the non-static buttons (counters): the sites can track visitors.

Layout

Thankfully, most everyone produces buttons with similar layouts. All the major sites offer a compact horizontal and a larger vertical smart button option.

Which to Include

The following list of buttons was determined by looking at the actual popularity of the various sites--and adding Facebook which is certainly used for social bookmarking. The distributions may change over time.

There's one other thing I cut out because I didn't want to mess with it: "mail this page". It's something I should look into, and I think it would be worthwhile, but the proliferation of web-based email systems makes this feature problematic. The answer may to mail "on behalf of" the user, but I'd like it come from them.

Code

Facebook

Facebook provides a "like" widget creator. It's a really decent tool and my only complaint is that I often am more concerned about specifying height than width, but you can only specify width in the tool. (Though I believe you can manually modify the height in the resulting code manually. Whether this f's things up or not, I have no idea.)

Delicious

Delicious as actually the worse "out of the box". They're basic "tag this" is very long, and their most compact button that includes a counter is pretty huge.

http://www.delicious.com/help/savebuttons

http://www.delicious.com/help/tagometer

Found good starting point.

Flesh out this page after I run through it.