A Blog Not Limited

to web design, standards & semantics

Adding Social Media Links to ExpressionEngine Templates

Aug 22, 2008

Published in

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:

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):

Social media links on A Blog Not Limited
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>

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:

Social media links for A Blog Not Limited RSS

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.


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.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!


Share the Love

Bud Parr's Gravatar

Bud Parr opines:


You might also like “add this” which eliminates having to do anything manually or even plugins and it’s unobtrusive because it pops up. http://addthis.com/

Emily's Gravatar

Emily responds:


@Bud Parr - Thanks for the suggestion. I had actually seen the Add This button before but found it didn’t suit my personal preferences.

For one, it isn’t entirely unobtrusive. If JS is disabled, the image still appears, yet it links back to the Add This site. I would imagine this would be confusing to the user.

Plus, I prefer to have to option to style the links with complete CSS flexibilty, rather than relying on the “aesthetic” of the default Add This image.

I tend to be a stickler about those sorts of things, though :-).

For my purposes, some simple inline links give me functionality regardless of JS.

Good suggestion, though. I see you are using it on your own site, so I’m sure it works perfectly for your own needs.

Bud Parr's Gravatar

Bud Parr opines:


Sure, it’s not for everyone, just wanted to make sure you knew about it. The main reason I recommend it is that it doesn’t presuppose which service your users subscribe to because it essentially offers all of them as well as an ‘email this’ and they can be easily configured and, most importantly clients can access their add this account. And, by the way, this wasn’t a criticism of your excellent post - thanks for taking the time. Bud

Emily's Gravatar

Emily responds:


@Bud Parr - Excellent points, especially about offering the “email this” option. Definitely a feature I’ve considered adding as I continue to develop this blog.

And didn’t take it as a criticism at all. I appreciate the additional information, and I would suspect that any readers would like to know about the Add This button. Thanks so much for sharing!

Jen's Gravatar

Jen opines:


I’m still not completely convinced I like going social bookmarking happy - really depends on the audience of you site and their habits. But, like you mentioned, I don’t tend to use them so maybe I don’t see the value.

Thanks for the detailed post - maybe I’ll try it.

Emily's Gravatar

Emily responds:


@Jen - Well, to each their own.

I do have to say, though, that getting my articles on these social bookmarking sites has doubled my blog traffic.

Also, Google Analytics shows 16 referrals from Digg, 13 from StumbleUpon and 5 from Design Float as of yesterday.

Additionally, several of my articles posted to Digg and Design Float have been flagged by Google Alerts, for even more exposure.

I plan to set up my analytics to track actual click activity on these newly-added “share” links to see how frequently they are used.

But if I can make it easier for folks to share my articles on these sites, I’m convinced it is well worth it. Especially if I can do it in a completely visually unobtrusive fashion.

Ian's Gravatar

Ian opines:


What kind of traffic are you getting to your entire site daily?

Emily's Gravatar

Emily responds:


@Ian - Heh, it is rather pathetic really ;-) But this blog is still new (not to mention still under development).

When I installed GA about a month ago I was getting about 4 visits/day, and I think that was you and Trevor ;-)

About two weeks ago traffic was averaging 12 visits/day.

Then, since this past Friday (when I added all the articles to the various social media sites I mention in this article), I’ve been getting between 30-50 visits/day.

My bounce rate isn’t great, but it isn’t terrible: 53.88%.

I don’t know GA well enough to tell you more, but that’s on my never-ending list ;-)

Leevi Graham's Gravatar

Leevi Graham opines:


It’s total self promotion but 100% relevant to your post (which was great).

I have just released an ExpressionEngine extension called LG Social Bookmarks 2.0.

It automates everything you have mentioned above including email and print links.

Great post… there should be more ExpressionEngine tutorials like this around.

Emily's Gravatar

Emily opines:


@Leevi - Thanks, but (ahem), if you actually read this article you’d see I already referenced your bookmarks extension ... twice ;-)

And, as I said in the article, I discovered it after the fact. It appears to be a fine extension, though far more than I, personally, am interested in (at this point).

ben smithson's Gravatar

ben smithson opines:


Good post.  I’m trying to make a Tweet This template play nice in Expression Engine.  Crossin’ my fingers!

Emily's Gravatar

Emily responds:


@<a >Ben</a> - Glad you found it useful. Adding a "tweet this" link to your EE template should be easy. In fact, I just added one myself last week.

It is just a matter of adding a link to Twitter with the status query in the URL and your post {title} and link ({url_title_path}): twitter.com/home?status={title}:&nbsp;{url_title_path}

mahalie's Gravatar

mahalie opines:


I’m currently debating using the Tweet This plugin for EE which uses the is.gd URL shortening service or using the short link system you indicate.

I’m concerned about SEO and Google’s irritation at content duplication. Any thoughts on that? Are you using redirects or some other technique to make sure you’re not being penalized?

joao's Gravatar

joao opines:


All good comments and thanks @Emily for the twitter bit.

And the problem i found with Add This button is that it doens’t validate and me being a perfectionist when regards to validation is no good.

Emily's Gravatar

Emily responds:


@Mahalie - Sorry for taking so long to respond. Anyways, my understanding of URL shortening is that it doesn’t duplicate your content. It simply provides and alternate (shorter) URL to access your content. It uses some sort of redirect to the full URL. So, there should be no SEO implications tied to duplicate content.

Drew's Gravatar

Drew opines:


Thank you so much for this Emily. Your methods helped me add the Facebook “like/recommend” button to my sites.

Love ur Fu&*$in site and listening to you on Twitter :)

Jos's Gravatar

Jos opines:


You can also use the free HJ Social Bookmarks - ExpressionEngine 2.x Plugin which is similar to ‘LG Social Bookmarks’ and really easy to use.

Berry's Gravatar

Berry opines:


@Jos Thanks for mentioning my plugin - HJ Social Bookmarks

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.


I Tweet, Therefore I Am

Follow @emilylewis on Twitter!