Add Sharebar to your Site

To install Sharebar, copy and paste the following Javascript and DHTML code into your page – it can go anywhere in your page template. An AddThis username is only needed if you want tracking/analytics. You can use your current AddThis username, create a new account, or ignore the username setting.

<script src="http://sharebar.addthiscdn.com/v1/sharebar.js" type="text/javascript"></script>

<div class="addthis_sharebar_config" style="display:none;">
 * username: your AddThis username 
</div>

That's all there is to it. If you want to specify additional options, see the Documentation for more details.

Add Sharebar to your Browser

Sharebar Bookmarklet

If you want to try Sharebar on your site without adding any code use the Sharebar Bookmarklet: Sharebar.
Drag that to your bookmark bar and you can use Sharebar on any site.

Google Chrome Extension

We've released an AddThis Google Chrome Extension which uses Sharebar. As you will see it does not look like Sharebar (it's not even a bar), but it uses the same code with a different layout option. Google Chrome only supports extensions in the Windows beta, Mac support should be coming any day.

Why try the Sharebar?

Browser Compatibility

• Firefox 3, 3.5, 3.6
• Google Chrome 3, 4
• Safari 4
• Internet Explorer 7, 8

Please note that at this time Sharebar will be automatically suppressed in IE6 and Opera. Mobile support has not yet be added.

Table of Contents

• Configuration Overview
• Basic Options
• Layouts
• Services
• Search
• Debug

Configuration Overview

To config Sharebar create a div with class="addthis_sharebar_config" and style="display:none;". Include each option on a new line and start with a * like you are typing a bulleted list:

<div class="addthis_sharebar_config" style="display:none;">
 * username: your addthis username 
 * label: value
 * option name: anything can go here and no need to "escape" 'quotes'
</div>

The next sections covers the options you can configure.

Basic Options

You typically only need to set your username, everything else is optional. If you are using Sharebar on a page with the AddThis menu then you don't even need to set the username - it will be set automatically.

Label	Default Value	Custom Value
username	empty (no analytics)	Required if you want to get analytics for your Sharebar. Your username is the same id you use to sign in to AddThis.
title	The current title	Any title you want, helpful if you need to share a more compact page title than the one you use on the web page.
url	The current url	Any url you want, ideal if you have a specific url you want your users to share.

Basic Example

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * title: Check out AddThis's new lab project: Sharebar.
 * url: http://www.addthis.com/labs/sharebar
</div>

Basic Example

Layouts

Make sure each option is on its own line in your addthis_sharebar_config div.

Label	Default Value	Custom Value
layout	bar	bar - a bar displayed at the bottom of the page inline - an inline version of the menu (very beta)
insert into id insert into class	addthis_sharebar_config	Only used by inline layout, this is the div that the Sharebar will append all DOM nodes to.
bar background color	#333333	Change the color of the Sharebar bar using normal css hex code #00ff00
bar background opacity	0.5	Opacity of the bar. This is visible in Firefox, Chrome, and Safari.

Layout Examples

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * bar background color: #1D4C78
 * bar background opacity: 0.7
</div>

Custom Bar Color

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * layout: inline
</div>

Inline Layout

Services

Make sure each option is on its own line in your addthis_sharebar_config div.

Label	Default Value	Custom Value
default services	email, favorites, facebook, print, delicious, digg, google, myspace, live, stumbleupon, twitter, reddit, aim, technorati, blogger	Provide the list of service ids that you always want to show up. Note that bar layout only shows the first few services to display.
exclude services	Empty (no services are excluded)	List Service Ids you don't want your users to have access to in your Sharebar.
max services	11	Number of services to show in the bar or inline menu. This does not include services in the More menu.
disable personalization	false (personalization is on by default)	Normally Sharebar list first services you have used in the past with any of our menus. This option disables that feature.

Service Example

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * default services: facebook, twitter, email, favorites, print
 * exclude services: more
 * disable personalization
</div>

Menu with just a few services

Search

Make sure each option is on its own line in your addthis_sharebar_config div.

Label	Default Value	Custom Value
search domain	The hostname of the page Sharebar is on	If you want to specify the domain, such as if you web page is breakingnews.example.com, and you want to search all of example.com, provide the value example.com.
disable search	Not set - search is enabled	If you don't want any search feature then this will disable it.
search url	Our own search	If your site already has a search engine then you can provide the url here, such as http://www.example.com/search?q=. The search string will always be appended to the end of the url.
search label	Search this Site	If you provide your own url then you might want to specify the label.

Search Examples

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * search domain: wikipedia.org
</div>

Custom Search Domain

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * disable search
</div>

Disable Search

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * search url: http://www.google.com/search?q=
 * search label: Search Google
</div>

Custom Search Url and Label

Debug

Make sure each option is on its own line in your addthis_sharebar_config div.

Label	Default Value	Custom Value
debug	false	Prints some debug information to the Javascript console. This is currently only enabled in Firefox and Chrome.

Debug Example

<div class="addthis_sharebar_config" style="display:none;">
 * username: sharebar
 * debug
</div>

Debug Example

Release History

The following are major releases of this Labs feature.

January 5, 2010

• New options: disable search, search url, search label.
• Faster menu load.
• When you use services in the More menu they will appear in the bar the next time the bar is loaded.
• Faster Chrome Extension load, better search.

December 23, 2009

• Added layout for a new Chrome Extension.
• First release of the AddThis Google Chrome Extension. It uses the same Sharebar code with a different layout option.
• Removed the favicon from the site search box to help clean the design and one less image to load.

December 18, 2009

• Fixed an IE7 bug that made it difficult to load this page.
• Improved Flash overlapping code
• Improved bookmarklet to fix an issue on YouTube.com
• Nicer bar hide and show labels - now a × and +

December 17, 2009

• First release!
• Initial framework
• Modules: Search & Sharing
• Layouts: Bar and Inline