A Blog Not Limited

Even though the "social" nature of the web isn't anything new (at least in web terms), I've only recently joined the masses. Yeah, I've been working in the web industry for over 10 years now, but I was a latecomer to social networks like Facebook, Twitter and (the horror) MySpace.

I was even late to the social bookmarking sites like Digg, Ma.gnolia and, my preference, Delicious (yeah, I have it right: they aren't using the periods in their name anymore).

And once I did become active with these social media, I still didn't quite "get" why so many blogs and sites had the buttons/links to save a post to these social tools.

In fact, when I worked on creating a blog for my employer, I remember saying to my boss, Ian, that I thought these buttons were superfluous. Even during the initial development of this blog I chose to forgo the links.

Blinded by My Own Habits

I realize now that the reason I didn't see a use for these buttons/links is that I never used them myself.

Don't get me wrong, I'm a very active Delicious user, regularly saving between 10-20 links per day and sharing them with my network. But I've always used the Firefox Delicious Bookmarks add-on for saving my bookmarks. And I guess I assumed that all active users of the various social media would do the same, since there seems to be these sorts of tools for most of them.

This level of personal ignorance is fairly uncharacteristic of me and goes against what I ultimately believe about the web: it is for the user.

What Changed My Mind

I recently read Fabian van Luyn's Showcase: Social Media Buttons, which visually reviews several implementations of these buttons.

Upon seeing how visually unobtrusive some of the examples were, I started thinking that it might be something I should consider and commented to that effect.

But it was Fabian's response back that made me realize how stupid I was being:

“… when I see a button, I'm happy to click when it is a good article. It's about providing the user a simple way to give kudos to an article they like.”

Seems so obvious now.

So, Let's Make It Easy for the User

Which Social Media?

There are dozens of social media for sharing links. My first task was selecting the ones I wanted to include. Obviously, I decided to include Delicious because I use it regularly and already had an account set up. I also had a Digg account, so throw that one into the mix. Then I just picked a few others that were common on other web design and development blogs:

• Ma.gnolia
• StumbleUpon
• Design Float
• Reddit

I then created accounts with all of these services — so that I could properly test the functionality — and identified each service's link for sharing/submitting:

• Delicious: http://delicious.com/save
• Digg: http://digg.com/submit
• Ma.gnolia: http://ma.gnolia.com/bookmarks/add
• StumbleUpon: http://www.stumbleupon.com/submit
• Design Float: http://www.designfloat.com/submit.php
• Reddit: http://reddit.com/submit

Next, I decided that I wanted to include these social media links on my full article content template and on my full article RSS template.

Content Template

It is amazingly simple to add these links to an ExpressionEngine template (or anything, for that matter). The basic syntax is the aforementioned URL appended with a query string containing the variables url and title.

For each, the url variable provides the URL of the post/article/site to be saved, while title provides the title (rocket science, no?).

For my purposes and based on how I have EE configured, the EE tags I chose to use for the variable values are:

• url={url_title_path=articles}
• title={title} ~ {site_name}

Note that the "articles" reference in {url_title_path=articles} is specific to my EE configuration. Also note that for the title variable, I added {site_name} because I personally like to see that information included when I save bookmarks.

Based on this syntax, I added the following markup to my template, immediately after the article content and contained by the {exp:weblog:entries} tag:

1. <h3>Share the Love</h3>
2. <ul>
3.       <li><a href="http://delicious.com/save?url={url_title_path=articles}&amp;title={title} ~ {site_name}">Delicious</a></li>
4.       <li><a href="http://digg.com/submit?phase=2&amp;url={url_title_path=articles}&amp;title={title} ~ {site_name}">Digg</a></li>
5.       <li><a href="http://ma.gnolia.com/bookmarks/add?url={url_title_path=articles}&amp;title={title} ~ {site_name}">Ma.gnolia</a></li>
6.       <li><a href="http://www.stumbleupon.com/submit?url={url_title_path=articles}&amp;title={title} ~ {site_name}">StumbleUpon</a></li>
7.       <li><a href="http://www.designfloat.com/submit.php?url={url_title_path=articles}&amp;title={title} ~ {site_name}">Design Float</a></li>
8.       <li><a href="http://reddit.com/submit?url={url_title_path=articles}&amp;title={title} ~ {site_name}">Reddit</a></li>
9. </ul>

Note that I escaped the ampersands in the query strings, so that my XHTML would validate.

Also note that the Digg link includes a query string variable-value pair phase=2, which I identified is necessary for passing the url and title variables through properly.

And It Works

I confirmed each of these links worked as expected. Though there are a few caveats (aren't there always?):

• For both Digg and StumbleUpon, if you aren't already logged in to those services, you will be prompted to log in and it "drops" the submit request.
• For StumbleUpon, the title value doesn't appear on the submit interface, however the value is retained and displays once the request is completed.
• For Reddit, if you aren't already logged in, you will be prompted to login and will then be redirected to save the link. However, the redirect drops the title value.

What It Looks Like

This markup, after inheriting existing styles from my CSS, results in this display (plain and simple):

RSS Template

Nowadays, I get most of my blog posts and news from Google Reader (my preferred feed aggregator), and I rarely actually click-through to the web site, especially if the feed provides full article content. I suspect this is true for most folks.

So I figured it would make sense to add the social media links to my RSS feed. In fact, I've seen it done by others. And, again, it is super simple.

However, you may want to reference my earlier post, Customizing ExpressionEngine RSS 2.0 Template, before just dropping this markup into your RSS. I made a number of simple customizations to the EE RSS 2.0 template that support the addition of this new markup.

Within the <item> <description> element, immediately following the markup for my category and tags (and still within the {exp:weblog:entries} tag), I added the same links that I added to the content template (along with a bit of markup for visual formatting):

1. <hr />
2. <p>&#9829;Share the love:
      <a href="http://delicious.com/save?url={url_title_path=articles}&title={title} ~ {site_name}">Delicious</a>,
      <a href="http://digg.com/submit?phase=2&url={url_title_path=articles}&title={title} ~ {site_name}">Digg</a>,
      <a href="http://ma.gnolia.com/bookmarks/add?url={url_title_path=articles}&title={title} ~ {site_name}">Ma.gnolia</a>,
      <a href="http://www.stumbleupon.com/submit?url={url_title_path=articles}&title={title} ~ {site_name}">StumbleUpon</a>,
      <a href="http://www.designfloat.com/submit.php?url={url_title_path=articles}&title={title} ~ {site_name}">Design Float</a>,
      <a href="http://reddit.com/submit?url={url_title_path=articles}&title={title} ~ {site_name}">Reddit</a>
</p>

Note that I did not escape the ampersands in the URLs as I did in the content template. This is because the markup is contained by CDATA which does the escaping for me.

Again, these links worked as expected in Google Reader, Safari and Bloglines.

What It Looks Like

This markup displays as follows in Google Reader:

How About Making It Easier for Yourself?

Of course, as it is just my luck, I discovered after I had already gone through the above efforts that there is a free EE module that allows you to insert social bookmarking links to any weblog post: LG Social Bookmarks.

Doh!

So typically me to make it harder for myself. But, since I already hand-coded everything and had it working as I wanted, I decided to just leave things as they were.

Additionally, the LG Social Bookmarks module has much more than I really need (though I would've completely used it had I discovered it before spending the time doing it myself).

I'm Really Doing It for Me

Though I'm a proponent of usability, I'm not entirely altruistic in this endeavor. Ultimately, I want to increase my exposure in my field of web design. And one of the primary ways to do this is to blog and promote that blogging.

I'm hoping that by offering links that encourage social sharing, I'm going to get more readers and build some credibility. Only time will tell how that turns out.