Create Social Bookmarks with the AddThis API

One service that I had used a while back was AddThis social bookmarks. I really liked its ease of use, support for a huge range of social networks and bookmarking sites, and most importantly it had great tools for analytics.

The social bar itself however left more to be desired. It was an eyesore, appearing after every post on my site, and made me cringe at the fact that it relied on JavaScript to function. Luckily, I found an alternative in the form of their API docs.

You can see this for yourself in the social bar below this post. Check out the links as you hover over the images, they’re constructed exactly as I will show you here.

Finding the Link

The trick here is as simple as tweaking a URL.

http://api.addthis.com/oexchange/0.8/offer?url=URL

This is the most basic option of the API. It sends us to a page in which we can choose where we want to share the link. It’s good if you have a simple “Share This” button, but not if we want different links to specific social networks. Plus, we won’t get that analytics data.

In the above example, just replace URL with your page’s location.

http://api.addthis.com/oexchange/0.8/offer?url=http://stevedecoded.com

Now we’ll add a title and user name. For this we add another two URL parameters. Just replace URL, title and user name like before.

http://api.addthis.com/oexchange/0.8/offer?url=http://stevedecoded.com&title=Stephen+McIntyre&username=StephenMcIntyre

And lastly, where we want to specify where we are going to take the user we need to add forward/SERVICE/ into our link.

http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http://stevedecoded.com&title=Stephen+McIntyre&username=StephenMcIntyre

The link above will take you straight to Facebook, formatting the data to easily post the page up onto your wall.

A Simple Example

So, for a full implementation of this API we can use a list of hyperlinks like in my social bar, and styled how you like them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?url=http%3A%2F%2Fstevedecoded.com&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Twitter</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http%3A%2F%2Fstevedecoded.com&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Facebook</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/digg/offer?url=http%3A%2F%2Fstevedecoded.com&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Digg</a>
  </li>
  <li>
    <a href="http://api.addthis.com/oexchange/0.8/forward/delicious/offer?url=http%3A%2F%2Fstevedecoded.com&amp;title=Stephen+McIntyre&amp;username=StephenMcIntyre">Delicious</a>
  </li>
</ul>

For a full list of service tags to use in the SERVICE section of the URL, check out the service codes page on the AddThis docs. You can copy the short codes from each row, there’s loads to choose from.

More information on the sharing endpoints can also be found on there, which will help if you’re looking to dig further into the API.

One Last Thing

So as you can see, the links can get pretty long. If you’re inputting these manually, even a copy-paste job can be tedious, especially if you plan to go about dotting them all over your website.

The ideal situation then would be to generate these automatically, which can be done through PHP with some urlencode magic.

Also, if you’re using WordPress, then fetching the link and title is easy with get_permalink() and $post->post_title respectively.

I’ll be releasing a tool that utilises the AddThis API very soon, and adding some tutorials on here as to how it’s done, including some clever PHP.

Stay posted. :)


10 thoughts on “Create Social Bookmarks with the AddThis API

  1. I have been waiting for this info. Here it is at last. I solved this with javascript, and last night just before reading this I figured out how to do the same, but usig PHP and the WordPress templates.

    The only problem I find is that I send the URL like this: BLOG TITLE « POST TITLE.

    BLOG TITLE is not generated dinamically. POST TITLE is generated dinamically using the_title tag from wordpress.

    And « is always malformed when is sent. Try it and tell me what do you think.

    Thanks!

    1. Blog title can be fetched through WordPress with bloginfo(‘name’).

      When looking for the post title, it’s best to either use $post->post_title or get_the_title($post->ID) as it returns without changing any of your special characters.

      Alternatively, you could use html_entity_decode and have something like html_entity_decode(the_title(), ENT_COMPAT, ‘UTF-8’)

      Hope this helps. Thanks for your comment.

      1. Tested this morning all the options you told me to test. No way. I think it is a problem of the addthis API.

        It has problems with the « character.

        Sometimes its decoded correctly, sometimes is decoded as ‘AND LAQUO ;’ and sometimes is decoded malformed, with extrange characters.

        Thanks anyway.

        1. Hi DogDay,

          I’m a developer at AddThis, we found an configuration issue on one one of our sharing servers last week that caused intermittent issues handling UTF-8 encoded characters. I’m really sorry for the inconvenience, we resolved it as soon as we discovered the problem. It should be fully working now, for example:

          http://api.addthis.com/oexchange/0.8/forward/twitter/offer?url=http://addthis.com&title=a%20%C2%AB%20b

          Please let me know if you have any further issues, you’re welcome to email me directly: charlie_clearspring.com (replace _ with @)

          Charlie

  2. Hi Stephen,
    Thank you for a wonderful post. I was looking for something with this functionality for days now. I want to use Addthis, but preferably with different buttons, without javascript, plus I would like to be able to submit a different page and different title.
    Unfortunately, I was not able to get my title carried to facebook. The title was always picked up by the page in the URL, not from the title in the URL.
    For example, this URL
    http://api.addthis.com/oexchange/0.8/forward/facebook/offer?url=http://stevedecoded.com&title=Stephen will still pick up your full name for the post, not just your last name.
    Please kindly let me know if it is possible at all to override the name.
    Thank you,
    Yuriy

  3. I have multiple items on a page which i want to allow users to share on facebook. How can i define a unique title and description for each of those items?

    Thanks!

    1. The AddThis API only sends the URL you give it to the Facebook sharer, so the title and description in this case is not needed. The only way to change the title and description would be to change them on the individual pages themselves.

      Hope this helps.

Comments are closed.