Hand-rolled Social Bookmark Links

by Ryan Irelan

If you’re building a website it’s probably a good idea to make it as easy as possible for your site visitors and readers to share your content with their online community and friends.

A typical way—and one that is built in to ExpressionEngine is the ability email a link to a friend. This comes with licensed versions of EE (not EE Core) as the Tell A Friend Form. But with all of the social networking and bookmarking websites out there, surely we want to make it easy for readers to share our content on Delicious, Twitter and the like, right?

The Easy Way

There are two ways you can handle this. You could use Leevi Graham’s excellent extension LG Social Bookmarks, which automatically places any of the more than one hundred available social bookmark buttons with each weblog entry.

For this site I wanted to include only two links: Delicious and Twitter. But we’ll also add in Ma.gnolia for fun.

The Hand-rolled Way

The first thing I had to do is discover what URL is used to post links to each service. This can be easily discovered by using a bookmarklet that lets you post to the service and then look at the URL and the parameters. For Delicious, the URL looks like this:

http://delicious.com/save?url=[url here]&title=[title here]
&v=5&noui=1&jump=doclose

As you can see we have two parameters—url and title—that we need to populate with the the weblog entry URL and the title. Since this link will be inside the weblog entries tag pair, we can use the {title} and {title_permalink} variables. Add in a little markup and we have this:

<a href="http://delicious.com/save?url=
{title_permalink=blog/entry}&title={title}&
v=5&noui=1&jump=doclose">
Post to Delicious</a>

With a small icon and some CSS we can style the link, so it looks something like this:

Clicking on the link will pass the entry URL and title to Delicious and from there the user can save it as a bookmark.

For Twitter it’s the same procedure, but with a different URL. The URL used to post to via the Twitter web interface is this:

http://twitter.com/home?status=[title here]:+[url here]

And just like with the Delicious link, we’ll populate the URL parameter using the {title} and {title_permalink} variables, so we can pass along the title and link to the entry. We’ll also format it nicely so the title is followed by a colon and then the weblog entry permalink.

<a href="http://twitter.com/home?status={title}:
+{title_permalink=blog/entry}">Post to Twitter</a>

Use the links at the bottom of this article to test out posting to Twitter and to Delicious. For Ma.gnolia, it’s a similar procedure, so I’ll just display the completed URL with EE variables in place.

<a href="http://ma.gnolia.com/bookmarklet/popup/add?
url={title_permalink=blog/entry}&title={title}">
Post to Ma.gnolia</a>

And that’s all there is to making your content easily shareable to social bookmarking and networking sites like Twitter, Ma.gnolia and Delicious.