Note: This article was stolen from my web design blog. I felt the people reading Theme Thesis would get more use out of it. I hope you enjoy. Also, the icons shown above are from Komodo Media.
One WordPress plugin that almost everybody uses these days is one that lets you share your post on social bookmarking and social media websites. And with the way social media has exploded lately, they’d be silly not too.
While plugins are great, they can also be bloaty, slow loading, require updates and just be a bit of a hassle in general. Luckily it’s very easy to add social links to your WordPress theme without a plugin, just using php and template tags.
So without further ado, here’s the code to add some popular social bookmarking links to your website without the use of a plugin:
Find wherever you’d like to place the code, usually in single.php and page.php right after the content and add in whichever of these you feel:
<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">del.icio.us</a>
<a href="http://designfloat.com/submit.php?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">design float</a>
<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">digg</a>
<a href="http://facebook.com/share.php?u=<?php the_permalink() ?>&amp;t=<?php echo urlencode(the_title('','', false)) ?>">facebook</a>
<a href="http://mixx.com/submit?page_url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">mixx</a>
<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">reddit</a>
<a href="http://stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">stumbleupon</a>
<a href="http://technorati.com/faves?add=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','', false)) ?>">technorati</a>
(Pssst, Thesis users: Don’t place the code where I told you to above, I have special instructions for you folk down below. That code is the same though.)
That’s it. You can do this with any site by looking at their link structure and replacing the url with the permalink and the title with the title echo as you see above.
Spicing the Links Up
An easy way to spice these bookmarking links up is to add icons to them. Just replace the name of the site with
<img src="http://theiconurl" alt="The Title">
(while replacing the variables) and you’ll be on your way. I also suggest adding
<div class="sociallinks">
before the code and
</div>
afterwards, so you can go to your css and style the links as you see fit. Now your theme includes some social bookmarking links and you didn’t need a plugin. Isn’t WordPress great?
Bonus: For Thesis Users
If you use the Thesis theme, which most people reading this website do, then you can do all of this without ever touching your theme files. Just open up custom-functions.php and create a new function to hold these links, replacing the hook with where you’d like the links.
function social_media_links() { ?>
// PLACE THE ABOVE CODE HERE
<?php };
add_action('thesis_hook_after_content', 'social_media_links');
Have any questions or comments? Know of a better way to do this? Want to show off your cool use of social media links? Leave us all a comment!
Stay Updated

You'll notice this site talks about the Thesis theme for Wordpress. Don't know what the heck that is? Find out.



{ 18 comments… read them below or add one }
So you have move the code too if you change your theme?
Yeah, unless you put it in a function. Any time you edit a theme’s files you’ll have to change it again if you change themes.
Nice tutorial, not everyone wants to rely on plugins etc which can slow sites down for social media linking.
Bookmarked, Tweeted, shared on my Facebook page, the usual stuff. cheers!
Little typo:
” alt=”The Title”>”
one “>” too much, after url.
Thanks for the useful information
Thanks for noticing and letting me know. It’s been fixed.
i know zilch about the weedy stuff but I did put the code in the custom_functions.php
But, I had no idea what to do with the spicing up the links info…help?
Once I do this am I all set or is there more?
You’re all set. You don’t need to spice up anything, that’s just if you want to apply additional CSS or images or anything fancy.
Clever, but I’m also interested in adding social media links to multiple author’s pages, so that the links will show on the author.php page.
Do you have any advise for doing it this way, instead of in the single.php page?
To link to the author page? You would do it the same. If you want to be able to have the links to each post on the author page, you’d have to put it within the loop somewhere.
Hi Matt,
Your post is really helpful and I’ve almost achieved what I want. i.e. Social Media icons at the top right of my home page. I have the icon up there, but it’s on the left – how do I get to be aligned right?
Many thanks in advance!
Stewart
You’d place it in the DIV like noted in the optional step above. You’d then float the DIV to the right, by using .sociallinks {float: right;}.
If that doesn’t work, due to other elements on your page being in the way for example, then you can try other positioning techniques. More details can be found here: http://www.w3schools.com/css/css_positioning.asp
Thanks for sharing Matt! Great stuff…
Do you have any live examples of this being implemented?
Sorry, I’m needing a little more hand holding. Can you be more explicit with what you mean by what to replace where?
THX
scott
hi
thank you very much for this one.
i do have two questions:
1. do you know what are the codes i should use in order to make a “send as email”, “add to favorites”, “send through hotmail\gmail\yahoo” and “print” ?
2. the icons are too close to the right side bar, how can i adjust it ? what is the css code i should use ?
thank you very mych again
oren
What URL structure would you use to share the post by email?
Nice Tut – thanks. Been looking for this for a while.
Social plugins add way too much bloat!
Thanks for this!
One bit of constructive criticism: I suggest you type your code out in a way that doesn’t require people to go back and delete all the numbers. It’s time-consuming, and whenever I (and probably others) find Thesis tutorials with code like that, I keep surfing till I find one that doesn’t write their code that way. Or I just feel kinda annoyed as I go through deleting the numbers. Lazy, I know, but it’s a fast-paced world…
I need more information too. I have no idea where in my CSS Editor to place this, where to point it to my social sites and basically in general everything you just said.. please help!!!!!! I am not a coder or developer.. just someone who is trying to do this herself. Thanks! XX
{ 3 trackbacks }