Note: this post is from 2009, and may be a bit old now, though it's still usable.

Recently I wanted to add some bookmark links to my pages—such as those you see at the bottom most blog posts—so I tried a few services like those provided by AddThis and ShareThis.

Being a bit of a purist, I didn’t like the awful JavaScript code that was thereby added to my pages (and, in the case of AddThis, even some ghastly Flash code too). So I started to look around for some cleaner alternatives. Perhaps you know of some good solutions, but I didn’t find any. Each bookmarking service has its own links that you can add to a page, but again, they all seemed to involve JavaScript, which I didn’t want. In the end, I came up with my own solution. It’s far from high-tech, but I’ll offer it here in case anyone is interested.

My solution was to use simple anchor links with parameters added to the href attribute (which is basically what you get anyway once those JavaScripts have done their work).

A basic solution

The most basic way to do this (though it’s not very efficient, and perhaps uncool in this web 2.0 age) is something like this (line wraps are added for readability):

<a href="http://www.facebook.com/share.php?
    u=http://www.pageaffairs.com/web/html/bookmarking-without-js/
        &amp;title=Bookmarking Without JS">Facebook Me!</a>

The example above provides a link to Facebook, with parameters (highlighted) that feed the page URL and title to Facebook. The weakness of this method is that it requires you to type the page URL and title manually on each page. Ideally, you’d want the URL and title—and perhaps other data, such as a page description (shown below)—to be added dynamically; and indeed they can be.

Web 2.0 solutions

Most commonly, bookmark links are added to blog posts, which are also commonly generated by blogging software or a CMS. In such cases, the page URL and title can be added dynamically via template tags. Here is how you would do it with WordPress:

<a href="http://www.facebook.com/share.php?
    u=<?php the_permalink(); ?>
        &amp;title=<?php the_title(); ?>">
            Facebook Me!</a>

And here’s how you might do it with ExpressionEngine:

{exp:channel:entries weblog="posts"}
    <a href="http://www.facebook.com/share.php?u=
        {title_permalink=web/articles}
            &amp;title={title}">Facebook Me!</a>
{/exp:channel:entries}

Automation on static pages

To some extent, it is possible to automate links even on static web pages. For example, you could feed your link(s) onto each page via a PHP include, and add variables to your link parameters:

<a href="http://www.facebook.com/share.php?u=
    <?php echo $pageurl; ?>
	&amp;title=<?php echo $pagetitle; ?>">
            Facebook Me!</a>

At the top of your page, you would then put something like this:

<?php
    $pagetitle = "Bookmarking Without JS";
    $pageurl = "http://pageaffairs.com/notebook/bookmarking-without-js";
?>

For this to work, of course, your page would ideally have a .php extension (though you can use PHP on a page with an .html extension also, as explained here).

A more sophisticated way to get the current page URL is to use something like this (source):

<?php
function curPageURL() {
    $pageURL = 'http';
    if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
    $pageURL .= "://";
    if ($_SERVER["SERVER_PORT"] != "80") {
    $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
    } else {
    $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}

$pageURL = curPageURL();
?>

You can then place the URL into your button code with

<?php
echo $pageURL;
?>

More examples

Here are URL examples of some other bookmarking services (just replace [URL] and [title] with whatever code you decide to use):

Twitter:
http://twitter.com/home?status=[title]+[URL]

Google+:
https://plus.google.com/share?url=[URL]

Digg:
http://www.digg.com/submit?phase=2&url=[URL]
    &title=[title]

StumbleUpon:
http://www.stumbleupon.com/submit?url=[URL]&title=[title]

Delicious:
http://del.icio.us/post?url=[URL]&title=[title]

Ping.fm:
http://ping.fm/ref/?link=[url]&title=[title]

Reddit:
http://www.reddit.com/submit?url=[URL]&title=[title]

Technorati:
http://technorati.com/faves?add=[URL]&title=[title]

Mixx:
http://www.mixx.com/submit?page_url=[URL]&title=[title]

Google:
http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]
    &title=[title]

Design Bump:
http://www.designbump.com/node/add/drigg/?url=[URL]
    &title=[title]

Design Moo:
http://www.designmoo.com/node/add/drigg/?url=[URL]
    &title=[title]

Design Buzz:
http://buzz.yahoo.com/buzz?targetUrl=[URL]&headline=[title]

DZone:
http://dzone.com/links/add.html?url=[URL]&title=[title]

Evernote:
http://www.evernote.com/clip.action?url=[URL]&title=[title]

Friendfeed:
http://www.friendfeed.com/share?url=[URL]&title=[title]

Email:
mailto:?subject=[title]&body=[URL]

Adding a page description

Some bookmarking services, such as Facebook and Google+, automatically pull in the meta description tag as park of the link, which is very nice. For example, the tag of the page you are reading is:

<meta content="A simple guide to adding social bookmark links
    to a web page without using JavaScript." name="description">

Other services that do this automatically include Digg and Mixx. But you can also add a parameter to your bookmark URL so that other services will pull in the page description. The URL parameters for this differ depending on the service, as will be shown in a moment; and, as with the other parameters, you have some choice in how to feed the data in—such as typing it manually, using a CMS template tag, or creating another PHP variable:

WordPress:
<?php the_excerpt(); ?>

ExpressionEngine:
{summary}

PHP:
<?php echo $desc; ?>

Of the services I tested, these accepted the page description: Delicious, Google, Design Bump, DesignMoo, Design Buzz & DZone. Here are their links again with the description added in (as before, replace [desc] with whatever code you use):

Delicious:
http://del.icio.us/post?url=[URL]&title=[title]
    &notes=[desc]

Google:
http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]
    &title=[title]&annotation=[desc]

Design Bump:
http://www.designbump.com/node/add/drigg/?url=[URL]
    &title=[title]&body=[desc]

Design Moo:
http://www.designmoo.com/node/add/drigg/?url=[URL]
    &title=[title]&body=[desc]

Design Buzz:
http://buzz.yahoo.com/buzz?targetUrl=[URL]&headline=[title]
    &summary=[desc]

DZone:
http://dzone.com/links/add.html?url=[URL]&title=[title]
    &description=[desc]

You can also be a little more creative with Email:
mailto:?subject=[title]&amp;body=<?php echo "I found a good
    read at " . [URL] . ". " . "Here's a brief description: "
        . [desc]; ?>

A few points to note

I found that Digg does funny things with the titles, inserting %20 between each word. The only way around this is to insert a + between each word—perhaps by having a separate variable such as $pagetitle1 just for it. You could either create this variable manually, by typing the pluses between the words (but who wants to do that, right?), or by using a little bit of extra PHP like this:

$pagetitle1 = str_replace(" ","+",$pagetitle);

and then using this in the Digg link:

 &amp;title=<?php echo $pagetitle1; ?>

Another problem: the WordPress <?php the_excerpt(); ?> adds the excerpt’s surrounding tags. Perhaps someone knows how to remove them? It’s not a huge problem, but it would be nice to tidy that up.

Anyway, I found this an interesting little experiment, which resulted in some simple bookmarking links that do not add unwanted JavaScript to my page.

Lastly, I’ll just add in a few more services that were sort of ‘also rans’ in my search. (I didn’t include Newsvine in my own list, as it’s really only meant for news pages. The others I didn’t test.)

Newsvine:
http://www.newsvine.com/_tools/seed&save?u=[url]&h=[title]

Sphinn:
http://sphinn.com/submit.php?url=[url]&title=[title]

Slashdot:
http://slashdot.org/bookmark.pl?title=[title]&url=[url]

You can copy and paste these bookmark links without returns on this plain text page.