Updates to Sharedaddy Tutorials (Now with More Jetpack!)

Aside

I just updated my two tutorial posts on adding custom sharing services to Sharedaddy, which is now bundled with Jetpack for WordPress:

These are by far the most popular posts here, so I thought I should give them some long overdue attention.

I’ve added the missing variables and have added Tumblr as a sharing service to the list. This weekend I hope to go through the rest of the requests and add them into the post, as well as clean up some of the markup, which doesn’t play as nice with my new theme so it looks kind of ugly right now.

Adding Specific Sharing Services to Sharedaddy or Jetpack

Screen shot 2010-08-31 at 8.38.21 AM
Standard

UPDATED 3/16/14: I’ve closed comments on this post; most services that aren’t in this list don’t support this kind of connection. I hope you find the instructions and examples here helpful regardless.

UPDATED 3/26/11: Sharedaddy is now distributed as part of Jetpack, so I’m taking the opportunity to add some additional services to this list. Please continue to contribute if you have any other services that you’d like to see on this post.

In my previous post, I described in detail the process necessary to add a sharing service to the WordPress.com Sharing tools (also known to self-hosted WordPress users as the Sharedaddy plugin). Even if your favorite social network or sharing site isn’t available, odds are likely that you can find a method to add that service as a custom sharing button.

For the tutorial, I used Delicious as an example service because it’s a service I’ve used in the past, had a good URL structure that’s easy to demonstrate, and had nice screens that helped my instructions to be easier to follow. (It also had a nice site-provided 16×16 icon that we could use to mark the sharing service.)

This is a collection of various common sharing services that aren’t included in the Sharing tools defaults. It provides the necessary information so you can plug them in to your Sharing options. Remember, the three things you need to define a sharing service are:

  • A name for the sharing service (used for the text label)
  • The URL needed to send a link to the sharing service, which can use up to five variables, which are:
    • %post_tags%
    • %post_title%
    • %post_full_url%
    • %post_url%
    • %post_excerpt%
  • And the URL of a 16×16 icon that can be used for the service.

(If you need a refresher on how to add custom sharing services, please see the previous article.)

I’ll provide the Sharing URL format—including the variable placement—and a 16×16 button icon you can use for the service. Whenever possible, I’ve tried to pull the icon from the sharing service itself to avoid any licensing issues. This means some of the icons are ugly. If you would rather, are there a few very nice sharing service icon collections available, but you’ll have to credit the author if you use them.

Since a good number of WordPress.com blogs have used GetSocialLive in the past, I think that’s as good a place to start as any. I’m only going to include those for version one of this post; if you would like another service or you have one that should be added to this list, please leave a comment and I’ll be happy to include it in a revision. I’d like this post be be a kind of “encyclopedia” of these services for people who are using ShareDaddy.

Filling Out the GetSocialLive Services

Of the services included in the GetSocialLive tool, Facebook, Digg, StumbleUpon, Reddit, and Twitter are already provided for use in Sharing Settings—so you won’t have to worry about those. As for the rest:

Delicious

http://delicious.com/save?url=%post_url%&title=%post_title%

Blinklist

http://blinklist.com/blink?u=%post_url%&t=%post_title%

Technorati

http://technorati.com/faves?add=%post_url%

Yahoo! Buzz

http://buzz.yahoo.com/buzz?targetUrl=%post_url%&headline=%post_title%

Newsvine

http://newsvine.com/_wine/save?u=%post_url%&h=%post_title%

Services I Use, So They Get Preferential Treatment and Are Higher on the List

Evernote

http://www.evernote.com/clip.action?url=%post_url%&title=%post_title%

Hacker News

http://news.ycombinator.com/submitlink?u=%post_url%&t=%post_title%

Instapaper

http://www.instapaper.com/hello2?url=%post_full_url%&title=%post_title%

Other Services

Do melhor

http://domelhor.net/submit.php?url=%post_url%&title=%post_title%

FARK.com

http://www.fark.com/cgi/farkit.pl?u=%post_url%&h=%post_title%

Google Buzz

http://www.google.com/buzz/post?message=%post_title%&url=%post_url%

Menéame

http://meneame.net/submit.php?url=%post_url%&title=%post_title%

MySpace

http://www.myspace.com/Modules/PostTo/Pages/?u=%post_url%

Orkut

http://promote.orkut.com/preview?nt=orkut.com&du=%post_url%&tt=%post_title%

Pinboard

http://pinboard.in/add?showtags=yes&url=%post_url%&title=%post_title%

Posterous

http://posterous.com/share?linkto=%post_url%

Tumblr

http://www.tumblr.com/share?v=3&u=%post_url%&t=%post_title%

But Wait; There’s More

If you have a sharing service you either want to add to Sharedaddy’s custom option, or have added and already know how it works, please feel free to leave a comment on this post and I can get it added to this list.

Adding a Custom Sharing Service to Sharedaddy or Jetpack

Screen shot 2010-08-26 at 11.56.44 PM
Standard

UPDATED 3/26/11: Since Sharedaddy is now bundled with Jetpack, I’m taking the opportunity to update this slightly and provide some more information. Leave a comment if you have a question!

UPDATED: Hello, self-hosted WordPress users! The plugin has been released for everyone, so I’ve updated the title of this entry to reflect that and these instructions now apply both to WordPress.com and to self-hosted blogs using the Sharedaddy plugin.

Earlier this week, the team here at Automattic released a new feature for WordPress.com that a lot of people have requested for a while now: the ability to add buttons for sharing services to the bottom of every post. (In fact, you’ll see a selection of them underneath this post. Feel free to share away.)

The service comes “pre-packaged” with a handful of buttons for the most commonly used sharing services and methods.

In the announcement post, it’s mentioned that you can add your own sharing services to the selection. If you go further and check out the support page, you’ll see that in order to add a custom sharing option, you’ll need to add certain information. Of course, every sharing service is different, so the same formula won’t work with all of them.

To add your own sharing services, you’ll need to do a little sleuthing and know how the tool works.

(Click on any screenshot in this article to see a larger version.)

Ingredients and Tools

If you go to Settings > Sharing and then click on the link in Available Services to add a new service, you’re prompted to enter three pieces of information:

  • The name of the sharing service
  • The URL needed to “push” a link to the sharing service
  • The URL of a 16×16 icon used to represent the service

All services you add using the custom settings will be “dumb” buttons; you can’t include any fancy JavaScript or buttons with counters. The buttons that are created will look like and follow the same general rules as the “dumb” buttons provided for the pre-loaded services.

Most of this is pretty straightforward. The key to getting it right is the Sharing URL. If you don’t have it right, then the service won’t receive the information it needs when someone clicks the button. You’re given five variables you can pass to the URL:

  • %post_tags%
  • %post_title%
  • %post_full_url%
  • %post_url%
  • %post_excerpt%

The first two will be used much more often than the third. Since the Sharing URL is the tricky part, let’s talk about how to discover it.

Discovering the Sharing URL

For our example, we’re going to use Delicious, since that’s one of the services people are likely to want to use and it’s a nice example of how to determine the right URL and variables to use.

The first thing you want to do is find either a site that already has a button in place for your sharing service, or a tool provided by your sharing service like a bookmarklet or a toolbar button. For instance, when you visit this page on Delicious, you’ll see several methods for getting links into the service. Since I’m using Safari, I’m going to drag the bookmarklet for sharing up into my toolbar.

Once you’ve got the bookmarklet in your toolbar, let’s say you want to save something to Delicious, like this post on Ma.tt with pictures from a recent shindig I happened to attend. (We’ll talk about Lisbon at another time.)

Visit something and then click on the bookmarklet provided. As I mentioned earlier, you can often get the same result by clicking on a button for the service on another site. What you see after you click the link or bookmarklet will look different for each service, but hopefully you’ll see something like this:

So we know what it looks like. Big deal, right? Check the URL, though. It’s this:

http://www.delicious.com/save?url=http%3A%2F%2Fma.tt%2F2010%2F08%2Fhappiness-team-in-lisbon%2F&title=Happiness%20Team%20in%20Lisbon%20—%20Matt%20Mullenweg&v=5&noui=1&jump=doclose

This is exactly what we needed to know in order to set up Delicious as a sharing service. Everything is right there.

Making It Happen

You can discard the “&jump=doclose” part of the URL without any trouble. It’s not necessary for what we’re doing.

So the base URL for sharing something on Delicious is:

http://delicious.com/save

It also takes a couple of arguments, as you can see. Everything after the question mark is a piece of data that’s being passed to the URL to give it the information it needs. There are two chunks here: “url” and “title.” It just so happens that we have the tools we need to fill all that in for our readers.

So since Delicious needs this:

http://delicious.com/save?url=something&title=something

All we need to do is enter this into our Sharing URL field like so:

http://delicious.com/save?url=%post_url%&title=%post_title%

Bingo. So go into Settings > Sharing, and fill in everything. The title is easy; that’s “Delicious.” You know now what to enter for the URL (you can just copy the one above). You’ll also need an image, and it just so happens that I have a perfectly good one from Delicious here.

Save your settings, drag your new service into the Active area, and then save your sharing options. When you go out to your posts, you’ll see:

Clicking on the Delicious link will open up the link addition form, just like the bookmarklet we used above.

Easy? Once you understand how to find the information you need, constructing new Sharing buttons is pretty simple. If you have any questions or comments, please feel free to leave them below.

You can also read my follow-up post, where I’m collecting the specifics needed to configure various sharing services with ShareDaddy.