'Customizing addthis buttons

I am using addthis buttons on my site, and I am wanting to do some custom styling...just changing the colour scheme to match that of my site. Can it be done? I have some replacement images ready to go all the correct size. I just cant find where to put them!

<!-- AddThis Button BEGIN -->
    <div id="photo-social" class="addthis_toolbox addthis_default_style "
        <a class="addthisfacebook addthis_button_facebook_like" fb:like:layout="button_count" fb:like:width="50"></a>
        <a class="addthistweet addthis_button_tweet"></a>
        <a class="addthispinterest addthis_button_pinterest_pinit"></a>
        <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50bd330b4fbbfeb2"></script>
    <!-- AddThis Button END -->

Has anyone done this successfully before?

addthis


Solution 1:[1]

You can use a custom image for the AddThis toolbox (the plus button). You would do something like this:

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

Full documentation is here:

http://support.addthis.com/customer/portal/articles/381236-custom-buttons#.UNDA5YnjmM9

Unfortunately, you can't replace the third-party buttons like Facebook Like, Tweet, etc. since those are actually provided by Facebook, Twitter, etc. Only the buttons provided by AddThis (basically the row of buttons that are all the same dimensions). I hope this makes sense.

Solution 2:[2]

<a class="addthis_button_facebook">
    <img src="whatever.png" width="32" height="32" border="0" alt="facebook_share">
</a>

Addthis still opens a share for the facebook.

Solution 3:[3]

You can try experimenting with id-s and classes (addthis_button, photo-social, addthis_toolbox addthis_default_style etc). Add the backgorund-image css property in each of classes. Maybe one of them will work. Good luck :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sol
Solution 2 Stender
Solution 3 Aleksandar

Related Questions