Skip Main Site Navigation

AddThis

or Join Now

Third-Party Buttons

• Facebook Like Button
• Facebook Send Button
• Twitter Tweet Button
• Twitter Follow Button
• Google +1 Button
• Google+ Badge
• Hyves Respect 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://www.facebook.com/2008/fbml">

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.



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

To add the Pinterest Pin it button to your AddThis sharing tool, use the following code:

IMPORTANT: For this to work properly, you must include the address of the media you want to pin as an attribute in this format (with the appropriately updated address) 
pi:pinit:media="http://images.apple.com/home/images/hero.jpg"
If the image is not present on the page the Pin it button is located on, you must also supply the page url as an attribute in this format (with the appropriately updated address) 
pi:pinit:url="http://www.apple.com"
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_pinterest" 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 more information regarding options, please check out the Client API.



Supported Pinterest Pin it Configurations


Horizontal Counter


  <a class="addthis_button_pinterest" 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" 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">Clearspring Technologies HQ</h1>
            <div id="venueContact">
              <p>
                    <span class="adr">
                         <span class="street-address">8000 Westpark Dr. Suite 625</span>, 
                         <span class="locality">McLean</span>, 
                         <span class="region">VA</span> 
                         <span class="postal-code">22102</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_pinterest" 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 Compatiblity

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 Does not work *
Facebook Like
Facebook Send
Tweet Button Works differently** Works differently** Works differently**
Twitter Follow
Hyves Respect
StumbleUpon Badge
Pinterest Pin it Button No Count***
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.