add social links to your site

<span class="linktous">

first, i put everything in a span which i named “linktous”.  this is to make it identifiable later, but also because i add a few css tweaks later, which i’ll get to.  the span isn’t absolutely important, but you’ll find you need it (or something similar) if you want to move stuff around at all.

digg

<a href="javascript:var notes='';if(window.getSelection)notes=window.getSelection();else
if(document.getSelection)notes=document.getSelection();else if(document.selection)notes=
document.selection.createRange().text;if(notes.length>350)notes=notes.substring(0,349);
location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent(location.href)+
'&title='+encodeURIComponent(document.title)+'&bodytext='+encodeURIComponent(notes)"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" alt="Digg
This" />&nbsp;Digg This Post</a>&nbsp;

here’s the digg code.  this particular javascript link allows you to select a portion of the text which will be auto-filled in your digg submission when it sends you there.  not that you need to tell your users that or anything, but you can if you want and it’s pretty neat.  otherwise you can find another digg link that doesn’t do that if you really want, but if nothing is selected, then obviously nothing will be copied, and i’m willing to be that most people will have already selected text anyway because they will be copying and pasting text from the page into digg.  when they get there, they’ll get a little happy surprise.

there isn’t anything major to this link, since the javascript code inside the href does all the heavy lifting.  if you take a look at the end in the img tag, you’ll see that rather than typing in a long path to the image, i used wordpress shortcode.  there’s lots of stuff you can do with <?php bloginfo() ?> which you can read about in the wordpress codex.  a lot of themes will use bloginfo(‘url’) for everything, but that just gives you the main url to the site.  bloginfo(‘template_url’) or bloginfo(‘stylesheet_directory’) send you to the folder of the theme you’re using.  i uploaded all my icons to my theme’s /images folder, so this makes it easy for me, but if you made a folder called “images” just in the root directory, you could do <?php bloginfo(‘url’); ?>/images/youricon.png and be able to easily use the same code if you changed themes.  also, if you haven’t seen or used it before, &nbsp; is the ascii code for a space.  since the code is a big messy beast, i want to make sure there’s the right spacing between my images and the link text.  i could do this with css, but i wanted to keep the css to a minimum so i could easily reuse the code.

del.icio.us and facebook

|&nbsp;<a href="javascript:(function(){location.
href='http://delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title=
'+encodeURIComponent(document.title)+'&v=5&jump=yes'})()" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/delicious.png" alt="Save to del.icio.us" />&nbsp;Save
to del.icio.us</a>&nbsp;

another javascript link that sends you to a delicious submit page.  the links, you’ll notice, are separated by a pipe or |.  it’s a key on your keyboard that you probably don’t even know is there if you’re not a programmer or a hacker.  other than that, and the stuff from above which i’m continuing to use, there’s nothing to see here, or here, when we get to facebook:

|&nbsp;<a href="javascript:var d=document,f='http://www.facebook.
com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1239647138&u='+e(l.href)+
'&t='+e(d.title);1;try{if (!/^(.*.)?facebook.[^.]*$/.test(l.host))throw(0);
share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer',
'toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test
(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/facebook.png" alt="Share on Facebook" />&nbsp;Share
on Facebook</a>&nbsp;

the facebook share opens a new window, so the javascript link is a bit bigger, but otherwise it’s the same stuff we’ve been doing above.

twitter

|&nbsp;<a href="http://twitter.com/home?status=Check this out: <?php
the_title(); ?> <?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>" target="_blank"><img
src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Send this page to Twitter"
/>&nbsp;Tweet This</a>&nbsp;

twitter was a bit trickier because of the character limit.  if you’re using pretty permalinks, and you have a url that’s something like http://mydomain.com/wordpress-tricks/how-to-add-an-awesome-social-link-block-to-your-blog/, that’s going to take up most of your character limit with the url alone.  so i started looking for url shortening in a tweet this type code and, while i didn’t find it, this guy had an idea that reminded me that wordpress has a form of url shortening built in.  sort of.  as he explains in his method of creating a tweet this link from your wordpress blog with shortened urls, when you first setup wordpress, all your blog post urls look like this:

http://yourblog.com/?p=123


the part after the ?p= is the ID number of the blog post.  his method describes how to add a url rewriting rule to your .htaccess file so you could do really short urls like this:
http://iboughtamac.com/s/1352
i didn’t want to bother with editing the .htaccess file, especially since the original url is both still entirely functional even with pretty permalinks turned on, and just as short, really.  so here’s the link that i am sending to twitter:
<?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>
first, i get the base url of the site.  it helps (for shortening purposes) if you’ve set the url of your blog in the general settings in your wordpress admin to be http://yourdomain.com rather than http://www.yourdomain.com, but it’s no big — it’s just 3 characters.  so then i added the /?p= to make the url mimic the old-style, ugly permalink.  i follow this by adding the wordpress shortcode to get the ID of the post.  so the url of this post would be:
http://arcanepalette.com/?p=455
not too shabby, eh?  it’s got nothing on http://is.gd/14wmq in terms of brevity, but it’s still pretty good.  twitter is pretty easy because you can send posts to twitter via just about anything.  you can type out your post in your address bar if you were really so inclined.
finishing touches
|&nbsp;<a href="<?php bloginfo('rss_url'); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" />&nbsp;
Subscribe by RSS</a>
</span>
i chose to add an rss subscription link to each single post as well, as a way to remind people that they can always subscribe by rss.  getting rss subscribers is a good thing because it brings your site’s visitors back, even if they aren’t actually hitting the site.  once again, i’m using wordpress shortcode to handle the rss url (bloginfo(‘rss_url’)).  if you’re using feedburner and have the feedsmith plugin installed, this will work for you, however, if you don’t have the feedsmith plugin, substitute the <?php bloginfo(‘rss_url’); ?> with your feedburner url.  also, i closed off the span i started at the beginning.
i mentioned earlier that i added some css tweaking.  i wanted my icons to be a bit bigger to make them more visible.  usually when you see buttons like this, they are the standard favicon size of 16×16, but that’s really small.  i made mine 20×20 which isn’t that much bigger but it does make it a bit easier to see what they are and notice that there’s some texture to them.  because of this, i needed to add some css to make the icons vertically centered with the text.  so i added this to my style.css:
.linktous img{margin-bottom: -3px;}
this pulls the icons a few pixels down and levels it out a bit.  i also added a .linktous {text-transform: lowercase;} to make all the text, well, lowercase.  this is purely for aesthetic reasons.
stumbleupon
if you wanted to include a stumbleupon button as well, here’s the url, pulled directly from their button generator thingie:
http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>
so to put it in the same style as everything else, you’d do something like this
|&nbsp;<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/stumbleupon.png" alt="Stumble This" />
&nbsp;Stumble This</a>
conclusion
why go through all the effort if, as previously mentioned, sociable does something really similar?
one reason is aesthetics and control.  this way i can style the links the way i want and put them where i want and not have resign myself to doing it however the plugin-du-jour happens to do things.
another reason is experience and because i like to get my hands dirty.  if you’ve gotten this far, i imagine you like to get your hands dirty as well, or at least are interested in learning more about how to build and/or customize wordpress themes.
the last reason is stability.  i learned (the hard way!) from using tons of firefox extensions that doing so doesn’t exactly result in the most stable (or fast) environment.  taking care of the code myself and embedding it into the theme rather than tacking on yet another plugin is one less complication, one less thing to upgrade, and one less thing that can break.
so that about wraps up this lesson.  i hope you found this useful and feel free to use the fabulous links below to share this post if you did!