addThis smart api layer add a link

Question

I would like to add a new button with a link to a custom url on the addThis slideBar generated by using addThis Smart Layer Api (you can have a look at the documentation here)

I would like to add a custom service that is just a link to a precise page. Is it possible?

Here is the sample of the code I use to generate the side bar.

addthis.layers({
    'theme': 'transparent',
    'share': {
         'position': 'left',
         'services': 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
    }
});

Answer 1

The addthis creates a division with id #at4-share and creates the links within it, try to prepend ( or append ) using jquery an "a" element similar to the elements created by the addthis plugin in this div, and create a custom class similar to aticon-print in your css and set your custom icon.

I haven't tried it though but i think it shall work.

    $("#at4-share").prepend('<a class="at4-share-btn at-svc-print" 
href="https://stackoverflow.com/questions/31108214/how-to-increase-audio-play-speed-using-javascript">
<span class=" at4-icon aticon-print" title="KAD">KAD</span></a>');

Answer 2

Is it Possible?

Although it's not particularly helpful to hear, I don't think that this can be accomplished with the AddThis SmartLayers API at this time. You may have found differently though, in which case I'm curious to hear about how you figured out to do it.

After perusing the docs and playing with it for a solid amount of time I can't figure out a way to insert a new option into the services on any of the layers (Share, Follow, What's Next, or Recommendation layers). The only way that I think adding a service to any of their SmartLayers would work is to submit it to AddThis to get it officially approved.

On the bottom of this page you can submit new services to AddThis to be implemented into their API completely. The massive downside to this in terms of your problem is that the submitted service needs to be OExchange compatible. For some projects this may not be feasible, but it might not be too much of a roadblock if you're free to implement compatibility in whatever web application you want to add to their services.

Small discussion about the API.

AddThis' platform is based around being able to show the most relevant marketing to its users, and so making custom buttons/services is discouraged by AddThis. They try to encourage developers to use their built in personalization by saying things such as:

We encourage you, however, to take advantage of automatic menu and toolbox personalization. You'll see an increase in overall sharing of about 20%, particularly from your site's international visitors, who use many of our other hundreds of sharing services!

I think that this is why AddThis is not the most easily customizable service on the planet. However it is very good at what it boasts, showing relevant marketing to users.

The Workaround

These may be aspects of the API that you're familiar with and know how to use but I figure it can't hurt to help by providing them since the answer to the originally proposed question was "Probably not".

You can make what AddThis refers to as a toolbox of buttons and then put your service anywhere in the mix. This is done using HTML instead of JavaScript and it looks like this for the "default" toolbox:

<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>
</div>

This produces clickable sharing service links for the top 4 most preferred services as decided by AddThis.

Now let's make one of these buttons our own. We will just use stackoverflow.com as an example.

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button_stackoverflow" href="http://www.stackoverflow.com">
  <img src ="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" width="16" height="16" border="0">
  </img>
  </a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>

This code produces a clickable stack overflow button alongside the top buttons as suggested by AddThis!

Although this isn't what you're looking for exactly, I hope that it helps!