class=”aligncenter” i spent this morning building and adding some social linking to our site. with all the digging and twittering and facebooking going on, if you have content worth sharing and you aren’t providing ways for people to share it, it’s fairly likely that people won’t. now, i have digg, facebook, and delicious bookmarklets in my google chrome bookmark bar, but i realize that i’m a geek and probably most people don’t do this. and anyway, it’s always nicer when those things are built directly into the page.
so i thought that i would share with you how to add social linking to your website or blog. please note that some of the code here will be wordpress-specific — which is great for wordpress users, but won’t be so helpful for those of you who don’t use wordpress. i will point out the areas where the code is wordpress only — there are plenty of resources out there for alternatives for your platform of choice.
the icons
first thing’s first — let’s get some icons. obviously the ones we are using have been customized. i actually sort of cheated a bit and modified the grunged-up icons i used for the social sidebar i have on jazzsequence.com, because i thought the style would fit. and also, i’m doing the same thing over there, so i figured i’d just use the same icons to make my life a bit easier. so you can’t use mine, but there’s some really nice stuff out there — i used a pack i found on iconspedia, but there’s always some good stuff on smashing magaine among other sources. do some creative googling and you can find some awesome packs with the sites you want to share.
the template files
next, is tweaking the template files. if you’ve never even looked at your theme’s php files, this can be daunting at first. and if you don’t have at least some brief experience in html, this may not be for you (but it might, you never know until you give it a try and break something horribly! keep backups of everything!). in that case, i’d recommend the sociable plugin, which actually allows you to take the icons you just downloaded and put them somewhere on your server and then just enter the path to the folder that you uploaded them to. you get less customizability in how and where your social linking bookmarks go on the page, but you make up for that in choice and convenience (there’s something like 99 different sharing methods to choose from that sociable offers).
if you’re still with me, decide what pages you want your links to show up on. for the arcane palette site, i chose to just put them on the single post page, but you can put them on all your pages, blog, and single posts, as well as any custom templates you may be using. there are two ways of editing the code. in either case, it’s best to save a backup copy of all the files you’re going to be changing in case something breaks or you want to put it back. the first method is to do it directly from the wordpress backend. this is a little bit more sketchy for newbies just because you are making changes live on the site. however, if you saved a copy of the file before making any changes to it, then you should be fine.
so to get to the internal text editor, (assuming you have wordpress 2.7 or higher) you go to Appearance and then Editor (for older versions it’s in Design and then Editor, or possibly Theme Editor — it’s been a while since I’ve dug around in the older back end). on the right side, you will see a long list of files. these are all the various page templates on your site. the ones you want to concern yourself with are index.php (Main Index Template), page.php (Page Template), and single.php (Single Post). if you’re using a Revolution/StudioPress theme, or one that is built similar, you may have a home.php which is your Home Page Template.
some of this, if you aren’t familiar with how your theme is structured, is going to be a bit of trial and error, but pretty much I look for one of two things in the template: either the Edit This Post link (which will look something like this:
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
or the metatag portion of the post, generally classed as postmeta or something similar, which would be something like this:
<p>
<small><?php the_category(', ') ?> | <?php the_tags() ?></small>
</p>
you may also see something like this if your theme is either the default (kubrick) theme, or based somewhat on it:
This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime);
echo ' ago'; */ ?>
on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?>
feed.
for our site, i put it under the post meta (categories/tags) but above the related posts. interesting side note: if you’re using this method of displaying related posts without a plugin, i was having issues with the tweet this link posting the url of the last related post in the tweet, rather than the post you are looking at if you put this sharing block underneath the related posts. seemed to be a bug with the related posts not closing off, but i’m not a programmer, i’m just a hacker, so i just threw this block above those links and solved the problem.
the code
here’s the block of code i used:
<span class="linktous">
<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" /> Digg This Post</a> | <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" /> Save
to del.icio.us</a> | <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" /> Share
on Facebook</a> | <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"
/> Tweet This</a> | <a href="<?php bloginfo('rss_url'); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" />
Subscribe by RSS</a>
</span>
that’s a big mess of code in several different languages, so i’ll break it down so you can see what each thing is doing. also, this assumes that you’ve uploaded your images to the /images folder in your theme and that you are using the same links i am, namely: digg, delicious, facebook, twitter, and for kicks, rss. i’ll post the code for stumbleupon as well at the end.
span
<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" /> Digg This Post</a>
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, 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
| <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" /> Save
to del.icio.us</a>
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:
| <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" /> Share
on Facebook</a>
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.
| <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"
/> Tweet This</a>
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/1352i 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=455not 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
| <a href="<?php bloginfo('rss_url'); ?>" target="_blank"> <img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" /> 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
| <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" /> 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!
Leave a Reply