A Guide to Yahoo! Action Buttons

Yahoo! now offers several free interactive tools for publishers, bloggers, and podcasters -- for anyone who creates content for the web. It's a breeze to add simple action buttons to a web page to make it easy for users to share, save, or blog about your web site.

These buttons are simple to set up. With basic HTML skills, you can add interaction to your site in minutes (not hours). Here are the key steps:

1. Add the action button javascript to your page templates by copying and pasting the appropriate code below.
2. Customize the buttons for the look and feel of your site. (Optional. Requires some familiarity with javascript, or a sense of adventure.)
3. Test and launch.
4. Let us know how it goes or check back here for new tools

Step 1: Add the action button javascript to your web page templates

First, add a pointer to the control javascript called "yactions.js" in the header of your page templates. This should sit within your header tags, though it can be anywhere on the page, if necessary. For example, the top of your page might look like this:

Second, insert the button code wherever you want the buttons to appear. The default without any customization looks like this:

This gives you a row of buttons that look like this:

Step 2: Customize your buttons for the look and feel of your site

The buttons have a range of options so you can tweak color and size (for example) to match the design of your site. Here's how:

First, name your buttons by assigning an ID. If you want all your buttons to look the same, use one ID for all the buttons. If you name each action button with a different ID you can customize the look and feel of each action button. Here's where you add the ID name:

Second, decide what you want to customize. Change the variables listed in the javascript below to define your new choices for color and appearance. Then, add the following code either in your header or with your buttons:

This example will give you buttons that look like this. (You can experiment to find a look you like.):

The complete list of configuration options is here.

NOTES:

» Text links are very easy. Just replace the class type "button" with "link". Your button code will look like this:

instead of this:

» The ID name you chose for the the button goes in the first line -- "yAction.config.ID-NAME-HERE". You must have a unique ID for every group of buttons. For example, your blog home page needs to have a different ID with each URL where you are displaying the buttons. Do not use any special characters in the ID name.

This is how the code for multiple links on the same page might look:

» Also the URL for the thing you want the action to affect must go where it says "URL-GOES-HERE". And the title of the page link is included in the 'buttonSubject'.

» Lastly, be sure the last configuration option has no comma after it.

Step 3: Test and Launch

That's it, you're done! Congratulations. You're invited to join the Yahoo! Social Media Tools group -- it's a place to share questions, comments, or new feature requests, with us and with other people who are using these buttons and other social media tools.

Step 4: Tell us what's working for you

We're looking for ways to grow and improve our collection of social media tools. Please let us know how these action buttons are working on your site, and tell us what you want next.

Also, if you write or post about Yahoo!'s action buttons or social media tools, we'd be thrilled if you'd add the tag "social media" to blog posts, screenshots, or other stuff you're tagging. This will help us pay attention to the conversation about these buttons wherever it's taking place across the Web. (Thanks!)

Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Copyright Policy - Terms of Service - Help