How to customize AddThis Photo Sharing Tool

Question

I am using AddThis' Photo Sharing Tool and I like it but I would like to customize it a bit and not sure how to do that.

AddThis says to put this code into your site:

<script type="text/javascript">
var addthis_config = {    
    services_overlay:'facebook,twitter,email,more'
}
</script>
<script type="text/javascript" 
  src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

You can add services by adding their name. Then you add class="addthis_shareable" to the image itself and you are set to go. However I would like to customize AddThis a bit more and not sure how to do this.

I would like to:

Reduce the size of the icons from 32x32 to 16x16.
Change how quickly the items show when the image is hovered over.
If possible show the icons for half a second before fading out to indicate they are there to the user.

Any help with the above would be greatly appreciated.

Here is a JSFiddle of the Code

Thanks!

Scorpion-Prince Scorpion-Prince · Accepted Answer · 2012-05-23T01:30:06

To have more control over the buttons, you need to create them and configure using attributes which would drive the look and feel. You would add the buttons like so

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button_facebook" addthis:ui_hover_delay="200" addthis:ui_delay="500"></></a>
  <a class="addthis_button_twitter" addthis:ui_hover_delay="200" addthis:ui_delay="500"></a>
  <a class="addthis_button_email" addthis:ui_hover_delay="200" addthis:ui_delay="500"></a>
</div>

The print menu might be appearing because of adding the "more" in the service configuration. If removing that doesn't work, try setting the "services_exclude" in the config object to "print"

How to customize AddThis Photo Sharing Tool

1 Answers