Search code examples
javascripthtmlsharingaddthis

Customizing AddThis Button Icon Graphic


I've got a bunch of AddThis sharing buttons that show up after someone subscribes to my e-mail list.

I'd like to add a sharing button for Google Plus, but it's not working.

For example, to put my own LinkedIn button, I use the following and it works like a charm:

<a class="addthis_button_linkedin"><img src="img/linkedin.png" width="64" height="64" alt="Share to LinkedIn"></a>

However, when I do the same for a custom Google+ button, two buttons appear. Here is my markup:

<a class="addthis_button_google_plusone"><img src="img/googleplus.png" width="64" height="64" alt="Share to Google+"></a>

Has anyone run into this issue before?

If it's not supported on the API, is there a workaround?

I can use CSS to move the other icons to cover the small Google+ icon, but it looks sloppy.


Solution

  • Here's how I rolled my own sharing buttons using PHP and HTML:

        <div class="sharing_buttons">
            <a class="google_plusone sharing" href="https://plus.google.com/share?url=http://YOUR_URL" target="_blank" title="Share on Google+"></a>
            <a class="facebook sharing" href="http://www.facebook.com/sharer.php?u=http://YOUR_URL" target="_blank"title="Share on Facebook"></a>
            <a class="twitter sharing" href="http://twitter.com/home?status=YOUR TWEET GOES HERE" target="_blank" title="Share on Twitter"></a>
            <a class="linkedin sharing" href="http://www.linkedin.com/shareArticle?mini=true&url=
            <?php echo urlencode('YOUR_URL'); ?>
            &title=<?php echo urlencode('YOUR TITLE HERE'); ?>
            &summary=<?php echo urlencode('WRITE A SUMMARY HERE (SPACES WILL BE ENCODED)'); ?>
            &source=<?php echo urlencode('@4click'); ?>" target="_blank" title="Share on LinkedIn"></a>
            <a class="button_email sharing" href="mailto:?subject=YOUR SUBJECT&body=BODY OF THE EMAIL" target="_blank" title="Share via e-mail"></a>
        </div>
    

    The icon graphics are added using CSS. For example:

    .google_plusone { background:url(../img/sharing_sprite.png) 0px 0px; }
    

    The limitation of this solution is that you don't have the tracking features that AddThis offers, but I track my social shares using HootSuite, so it's not a big deal for me.