Third Party Buttons

• Facebook Like Button
• Facebook Send Button
• Twitter Tweet Button
• Twitter Follow Button
• Google +1 Button
• Google+ Badge
• Hyves Respect Button
• LinkedIn Button
• StumbleUpon Badge
• Pinterest Pin it Button
• Foursquare Button
• Amazon Wishlist Button
• API Reference

AddThis supports all the major standalone sharing buttons and counters from our sharing providers.

Facebook Like Button

If you'd like to use the Facebook Like button, then you can simply Grab the Code and add the code to your page with only the FB Like button option:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
</div>

In order for us to count the clicks, you have to add Facebook's XML namespace to your page's HTML node:

<html xmlns:fb="http://ogp.me/ns/fb#">

We cannot count clicks from Like buttons added via iframes. You must either render the Like using <a class="addthis_button_facebook_like"> or <fb:like> using Facebook's JavaScript SDK.

Facebook doesn't work like the other AddThis buttons. Instead of accepting parameters that we pass it, Facebook requests the URL you're sharing and gets the data it displays from the meta and link tags in the header. To control how your page is shared on Facebook you should use OpenGraph tags which are described in Facebook's documentation here.

For more information regarding options, please check out the Client API.

Supported Facebook Like Configurations

Recommend Button

<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend"></a>

Vertical Counter

<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>

Standard with Friends List

<a class="addthis_button_facebook_like" fb:like:layout="standard"></a>

Facebook Send Button

To add the Facebook Send button to your AddThis sharing tool, use the following code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_facebook_send"></a> 
</div>

In order for us to count the clicks, you have to add Facebook's XML namespace to your page's HTML node:

<html xmlns:fb="http://www.facebook.com/2008/fbml">

We cannot count clicks from Send buttons added via iframes. You must either render the Send button using <a class="addthis_button_facebook_send"> or <fb:like> using Facebook's JavaScript SDK.

For more information regarding options, please check out the Client API.

Twitter Tweet Button

To add the Tweet Button to your AddThis Toolbox, you can simply Grab the Code and add this line of code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_tweet"></a> 
</div>

For more information regarding options, please check out the Client API.

Note: The Tweet button does not support SSL (https) connections

Supported Tweet Configurations

Vertical Counter

<a class="addthis_button_tweet" tw:count="vertical"></a>

Standard with Customized Via

<a class="addthis_button_tweet" tw:via="addthis"></a>

Make sure to insert your Twitter username here: tw:via="YOUR TWITTER USERNAME"

Standard with Customized Tweet Text

<a class="addthis_button_tweet" tw:text="I LOVE AddThis!"></a>

Standard with Customized Related

<a class="addthis_button_tweet" tw:related="addthis"></a>

Twitter Follow Button

To add the Twitter Follow Button to your AddThis Toolbox, you can simply Grab the Code and add this line of code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_twitter_follow_native"></a> 
</div>

For more information regarding options, please check out the Client API.

Google +1 Button

To add the Google +1 Button to your AddThis Toolbox, you can simply Grab the Code and add this line of code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_google_plusone"></a> 
</div>

For more information regarding options, please check out the Client API.

Note: Support for sites with a generator tag coming soon. More info can be found in our forums.

Supported Google +1 Configurations

Larger Standard

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

Vertical Counter

<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>

Standard with No Count

<a class="addthis_button_google_plusone" g:plusone:count="false"></a>

Google +1 Annotation Configurations

Google will be showing the personal annotations in two ways. First when you hover over the +1 button before you click, you’ll see the faces of your friends that have +1’d this site. No additional work is required for this functionality. Second, if you update your snippet with a small change, you may also show the personal annotation directly in the page. Note that the default is "bubble."

Bubble

<a class="addthis_button_google_plusone" g:plusone:annotation="bubble"></a>

Inline

<a class="addthis_button_google_plusone" g:plusone:annotation="inline"></a>

None

<a class="addthis_button_google_plusone" g:plusone:annotation="none"></a>

Google+ Badge

To add the Google+ Badge to your AddThis Toolbox, you can simply Grab the Code and add this line of code (where you substitute the href for that of your own brand page):

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_google_plusone_badge" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>
</div>

A few notes: The g:plusone:size="badge" includes a +1 button that allows you to +1 the brand page, not the current page you're on. g:plusone:size="badge" and g:plusone:size="smallbadge" allow you to follow the brand directly from the current page. The other 3 remaining sizes simply render a button that links to the given brand page. In all cases the href of the brand page is required.

For more information regarding options, please check out the Client API.

Supported Google+ Badge Configurations

Badge

<a class="addthis_button_google_plusone_badge" g:plusone:size="badge" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Small Badge

<a class="addthis_button_google_plusone_badge" g:plusone:size="smallbadge" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Large

<a class="addthis_button_google_plusone_badge" g:plusone:size="large" g:plusone:name="AddThis" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Medium

<a class="addthis_button_google_plusone_badge" g:plusone:size="medium" g:plusone:name="AddThis" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Small

<a class="addthis_button_google_plusone_badge" g:plusone:size="small" g:plusone:name="AddThis" g:plusone:href="https://plus.google.com/102383601500147943541/"></a>

Hyves Respect Button

To add the Hyves Respect button to your AddThis sharing tool, use the following code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_hyves_respect"></a> 
</div>

For more information regarding options, please check out the Client API.

LinkedIn Button

To add the LinkedIn button to your AddThis sharing tool, use the following code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_linkedin_counter"></a> 
</div>

Preview:

To show the button vertically, do this:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_linkedin_counter" li:counter="top"></a> 
</div>

Preview:

To show the button without a counter, do this:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_linkedin_counter" li:counter="none"></a> 
</div>

Preview:

For more information regarding options, please check out the Client API.

StumbleUpon Badge

To add the StumbleUpon Badge to your AddThis sharing tool, use the following code:

<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_stumbleupon_badge"></a> 
</div>

For more information regarding options, please check out the Client API.

Pinterest Pin It Button

The Pinterest Pin It button simply requires that you supply the URL of the image you wish to share. Here are the required and optional attributes.

Required:

Image Url: pi:pinit:media="http://images.apple.com/home/images/ipad_hero.jpg"

Optional

Page Url (Defaults to the page URL): pi:pinit:url="http://www.apple.com"
Layout (vertical or horizontal): pi:pinit:layout="vertical"
Description pi:pinit:description="My first pin!"

		<div class="addthis_toolbox addthis_default_style">
     <a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.apple.com" pi:pinit:media="http://images.apple.com/home/images/hero.jpg" pi:pinit:layout="horizontal">        </a> 
</div>

For Pinterest to show in our compact and expanded menus, you're required to use Open Graph tags in the HEAD of your HTML.  This follows the same procedure, where only the image url is required.

Required:

Image Url: <meta property="og:image" content="http://images.apple.com/home/images/ipad_hero.jpg" />

Optional

Page Url: <meta property="og:url" content="http://www.apple.com" />
Description: <meta property="og:title" content="Apple iPad" />

	<HEAD>
     <meta property="og:image" content="http://images.apple.com/home/images/ipad_hero.jpg" />
     <meta property="og:url" content="http://www.apple.com" />
     <meta property="og:title" content="Apple iPad" />
</HEAD>

Supported Pinterest Pin it Configurations

Horizontal Counter

<a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.apple.com" pi:pinit:media="http://images.apple.com/home/images/hero.jpg" pi:pinit:layout="horizontal"></a>

Vertical Counter

<a class="addthis_button_pinterest_pinit" pi:pinit:url="http://www.apple.com" pi:pinit:media="http://images.apple.com/home/images/hero.jpg" pi:pinit:layout="vertical"></a>

Foursquare Button

IMPORTANT:For this to function correctly, you must supply the appropriate hCard or OpenGraph meta data on your site, as seen here. For your button to autopopulate the popup, you need to be sure that your meta data closely matches the data that Foursquare has for your venue page. It's easiest to just grab the vcard data directly from the venue page. This resulted in the popup autopopulating. Here is the meta data setup used on this page:

<div class="vcard" id="venueDetails" style="display:none">
             <h1 class="fn org">AddThis HQ</h1>
             <div id="venueContact">
               <p>
                     <span class="adr">
                           <span class="street-address">1595 Spring Hill Dr. Suite 300</span>,
                           <span class="locality">Vienna</span>,
                           <span class="region">VA</span>
                           <span class="postal-code">22182</span>
                     </span>
                </p>
             </div>
             <div id="venueCategories">
               <p class="categories">Tech Startup</p>
             </div> </div>

To add the Foursquare button to your AddThis sharing tool, use the following code:

<a class="addthis_button_foursquare"></a>

For more information regarding options, please check out the Client API.

Supported Foursquare Button Configurations

Standard

<a class="addthis_button_foursquare" ></a>

Wide

<a class="addthis_button_foursquare" 4sq:data-variant="wide"></a>

Amazon Wishlist Button

We support Amazon Wishlist's new sharing endpoint. You will want to supply the following parameters in the addthis_share passthrough:t=<Item Title>, p=<Item Price>, u=<Item URL>, and i=<Item Image URL>. Note that item url and title could alternately be added inline, with addthis:url="My Url" and addthis:title="My Title". Here is an example implementation:

<SCRIPT> 
addthis_share = {
     passthrough: {
         amazonwishlist:{
             p:"199.99",
             i:"http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg._V159605028_.jpg",             u:"http://www.amazon.com/Kindle-Color-Multi-touch-Display-Wi-Fi/dp/B0051VVOB2/ref=sr_1_1?ie=UTF8&qid=1328722839&sr=8-1",
             t:"Amazon Kindle Fire"
            }
     }
}
</SCRIPT>

To add the Amazon Wishlist button to your AddThis sharing tool, use the following html code, in addition to your addthis_share javascript:

<a class="addthis_button_amazonwishlist"></a>

addthis_16x16_style

addthis_32x32_style

Third Party Button Browser Compatibility

We're working hard to make every button work in every browser, but there are some that may not work properly.

	Chrome	Safari		Firefox			Opera		Internet Explorer
	All	4	5	3.6	4	5	10	11	7	8	9
Google Plus One									*
Facebook Like
Facebook Send
Tweet Button									**	**	**
Twitter Follow
Hyves Respect
StumbleUpon Badge
Pinterest Pin it Button									***
Foursquare Button
Amazon Wishlist Button

* Google needs to implement a fix for this. As soon as they do we will make it available

** This works but does not use Twitter's new Tweet API

*** This works but does not display the count

API Reference

Check out the full Client API specification to learn more.

AddThis