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 AP
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>
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.
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>
AddThis Toolbox
16x16 Toolbox
Here's a simple 16x16 pixel AddThis toolbox, with the first four sharing icons automatically personalized for the user. The last icon is for the AddThis sharing menu.
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Note: You can easily add in more or less personalized services at any time, simply by incrementing the number at the end: addthis_button_preferred_5, addthis_button_preferred_6,addthis_button_preferred_7
32x32 Toolbox
The only difference between this toolbox and the previous example is the size. This is served up with the larger 32x32 icons, which is designated with the appended CSS classaddthis_32x32_style:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Note: Adding or subtracting icons from your Toolbox is the same as with the 16x16's above.
Adding Facebook Like to your Toolbox
If you're already using the AddThis Toolbox on your site, you can easily add the popular Facebook LIke button by including this single line in your existing code:
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
The form factor for the Like button works best with the 16x16 Toolbox, since they're similar in size. The complete snippet of code for an AddThis Toolbox with 3 personalized services, the AddThis share menu, and Facebook might look like this:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
Adding Twitter to your Toolbox
If you're already using the AddThis Toolbox on your site, you can easily add the popular Twitter widget by including this single line in your existing code:
<a class="addthis_button_tweet"></a>
The same form factor applies as with Facebook Like – Tweet buttons tend to look best with the 16x16 Toolbox. The complete snippet of code for an AddThis Toolbox with 3 personalized services, the AddThis share menu, and Twitter might look like this:
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_tweet"></a>
</div>
Custom Images
Let's say that you want to use some new spiffy social icons that you downloaded with the AddThis Toolbox you have on your site... no problem!
Example:
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook"><img src="/images/facebook.png" width="64" height="64" border="0" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><img src="/images/twitter.png" width="64" height="64" border="0" alt="Share to Twitter" /></a>
<a class="addthis_button_more"><img src="/images/addthis_64.png" width="64" height="64" border="0" alt="More..." /></a>
</div>
</div>
In this example, you're users wouldn't get the benefit of Personalized Services, but you'd be able to specify which services you wanted to use and load in the appropriate custom icon.
Custom Configurations
For information about more advanced customization of your AddThis Toolbox, please reference the AddThis Client API specification.
Custom Services
Any public service is eligible to be placed in our directory for all to use. Since approval can take up to a month, and some services are not for public consumption (e.g., on a private intranet, or invitation-only), you may also add any service to your own menu at run-time.
Optional Arguments
services_custom Optional
Specify your own AddThis bookmarking service with a JSON object:
{
name: "My Service",
url: "http://share.example.com?url={{url}}&title={{title}}",
icon: "http://example.com/icon.jpg"
}
All three fields must be present for each custom service. Any custom service is available to all compact menus on a page. In an AddThis toolbox, the custom service's hostname is its unique identifier. In the example above, you could create a chiclet for "My Service" with the class "addthis_button_share.example.com".
Code Example
This example uses AddThis.com.
<script type="text/javascript">
var addthis_config = {
services_custom: {
name: "AddThis",
url: "http://www.addthis.com/bookmark.php?url={{url}}&title={{title}}",
icon: "http://www.clearspring.com/favicon.png"}
}
</script>
<a href="http://www.addthis.com/bookmark.php"
class="addthis_button"></a>
This example uses the AddThis toolbox.
<script type="text/javascript">
var addthis_config = {
services_custom: {
name: "AddThis",
url: "http://www.addthis.com/bookmark.php?url={{url}}&title={{title}}",
icon: "http://clearspring.com/favicon.png"}
}
</script>
<a class="addthis_button_www.addthis.com"></a>
URL & Title
Optional Attributes
addthis:url Optional
URL to use if not the current page. This is helpful when you have an AddThis button on multiple articles on the same page.
addthis:title Optional
This is an alternate title.
addthis:description Optional
This is an alternate description.
HTML Code Example
Button
This example uses Example.com:
<a href="http://www.addthis.com/bookmark.php"
class="addthis_button"
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description"></a>
Choose Favorites and look at the page title:
Toolbox
This example again uses Example.com, but sets the URL, Title, and Description for all service elements within the AddThis toolbox:
<div class="addthis_toolbox addthis_default_style "
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description">
<a href="http://www.addthis.com/bookmark.php?v=250&pubid={YOUR_PROFILE_ID}" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
Hover over Share, choose "Favorites" and look at the page title:
This example again uses Example.com, but sets the URL, Title, and Description for only the Facebook service element within the AddThis toolbox:
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&pubid={YOUR_PROFILE_ID}" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
Choose Facebook and observe the shared URL, then choose Tweet, and see that the defaults have instead been used:
Custom Buttons
Different Image
src="http://s7.addthis.com/static/btn/sm-plus.gif"
This is an alternate button we created. You can use this or your own image.
<a class="addthis_button" href="http://www.addthis.com/bookmark.php">
<img src="http://s7.addthis.com/static/btn/sm-plus.gif"
width="16" height="16" border="0" alt="Share" /></a>
Image and Text
style="text-decoration:none;" (Optional)
This turns off the underline when the mouse is over the button.
<a href="http://www.addthis.com/bookmark.php"
class="addthis_button"
style="text-decoration:none;">
<img src="http://s7.addthis.com/static/btn/sm-plus.gif"
width="16" height="16" border="0" alt="Share" /> Share</a>
Just Text
<a href="http://www.addthis.com/bookmark.php"
style="text-decoration:none;"
class="addthis_button">Bookmark or Share</a>
Email-Only Button
You can create an email-only popup form using the CSS class addthis_button_email. This will not affect other AddThis buttons on the page.
<a href="http://www.addthis.com/bookmark.php"
class="addthis_button_email">
<img src="http://s7.addthis.com/button1-email.gif"
width="54" height="16" border="0" alt="Email" /></a>
Комментариев нет:
Отправить комментарий