AddThis.com From E-Mail

ppl-other-053

Last week, I had a client ask me how to implement sharing from an email. On the face of it, sharing isn’t that hard for any specific service.  Facebook has their way.  Twitter has its way.  But we’ve been using the AddThis.com service.  Wouldn’t it be nice if you could provide a way to implement sharing from within an email for any service AddThis.com provided?  And what if you could also add the “Share” button so that even if you didn’t put the service in the email that they wanted to use, they still were able to share using the share button?

Well, it took a while, but I finally figured it all out.

Since we can’t rely on javascript to get executed in the email client, we need to provide hyperlinks to a web page.  The web page will then automatically click the appropriate link to share.

On this page, you’ll put code similar to what AddThis.com provides for your site.  We will be using jQuery to fire the sharing code, so you’ll need to load that too.

In the head section of the html in your ASPX file, you can put in:

<script type="text/javascript"
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
    var addthis_share = {
        url: 'http://www.example.com',
        title: 'My Example Title'
    }
</script>
<script type="text/javascript"
    src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dda7e5e04377e87&async=1"></script>

One thing to notice is the async=1 in the URL of the addthis_widget.js URL.  This causes the script to get loaded asynchronously.  This helps us avoid timing issues.

You’ll include whatever AddThis button you want to fire:

 

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_serviceName"></a>
</div>

 

where “serviceName” is the service you want to fire.

Finally, you’ll add jQuery code to fire the button.

$(function () {
    addthis.init();
    // click the button for things like twitter
    window.location = $(".addthis_button_serviceName")
        .click();
    // mouse over share button
    addthis_open($(".addthis_button_compact")[0], '');
 // redirect URL for things like Facebook sharing     window.location = $(".addthis_button_serviceName")        .attr("href"); });

The first line initiates the AddThis javascript code.  Then each of the following lines is executed.  Since only one of them will ever do anything, we can just execute them in order.

This code is a rough idea of how to get this all working.  It isn’t production code so you will probably need to tweak it for your own purposes.

I would suggest making the URL, Title, PublisherID, and button you want to fire all parameters so that you can use AddThis.com From E-Mail for multiple  sites.

Related Post

One Response to “AddThis.com From E-Mail”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear