How To Add Social Bookmarking Buttons Without a Plug-in (WordPress)

[ “Cheers” glasses, designed by Helen Gkizi of Webtoolkit4me ]

splash

I thought I will share this knowledge with you because it took me quite a while and lots of patience before I decided to add code instead of all those plug-ins for social bookmarks.  From the beginning I did not like any of the plug-ins… they too big, too flashy and have much too much stuff that you don’t really need. Then I found one that I even liked until it did start to give me lines of error code in each post… That is when I decided to uninstall all of them and write code in WP Theme instead.

All you have to do is get some nice icons, there are available free bookmarking icons for instance on WP Zoom or Smashing Magazine, place them in a folder (call the folder “images” for instance) and then transfer the whole folder into your WP Theme. Open “single.php” (or other file responsible for single posts)  in a note pad and and type in your code for separate bookmarks. Please note that crossed part of the code you have to replace with your own information, for instance name of the folder and icons you want to appear in this place and size of the icons.

Save copy of your “single.php” file somewhere safe before you start any changes and in case something will go wrong just return to the original file. You may also want to skip class info (class=”alignleft”) if your style sheet does not have it or you want to arrange icons differently.

Hope you will find this info useful :)

StumbleUpon

<a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title();?>” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/stumble.jpg” alt=”Stumble This Post” title=”Stumble This Post”height=20 width=20 /></a>

Twitter (Twit This Post)

<a href=”http://www.twitter.com/home?status=Currently+reading,+<?php the_permalink(); ?>+@yourTwitterID” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/twitit.jpg” alt=”Twit This Post” title=”Twit This Post”height=20 width=20 /></a>

Facebook

<a href=”http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&title=<?php the_title();?>” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/facebook.jpg” alt=”Share on Facebook” title=”Share on Facebook”height=20 width=20 /></a>

Technorati

<a href=”http://technorati.com/faves?sub=addfavbtn&amp;add=http://www.yourwesite.com” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/technorati.jpg” alt=”Add to Technorati” title=”Add to Technorati”height=20 width=20 /></a>

Del.icio.us

<a href=”http://del.icio.us/post?url=<?php the_permalink(); ?>&title=<?php the_title();?>” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/delicious.jpg” alt=”Save to Del.icio.us” title=”Save to Del.icio.us”height=20 width=20 /></a>

Digg

<a href=”http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title();?>” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/digg.jpg” alt=”Digg It” title=”Digg It”height=2020 /></a>/images/digg.jpg” alt=”Digg It” title=”Digg It”height=20 width=20 /></a>

Wikio

<a href=”http://www.wikio.co.uk/subscribe?url=http://address of your blog” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/wikio.jpg” alt=”Add to Wikio” title=”Add to Wikio”height=20 width=20 /></a>

Send to Email

<a href=”mailto:?subject=Take a look at this article on Name of Your Site!&body=<?php the_permalink();?>” ><img class=”alignleft” src=”<?php bloginfo(template_url); ?>/images/email.jpg” alt=”Email This Post” title=”Email This Post”height=20 width=20 /></a>

Leave a Reply

Your email address will not be published. Required fields are marked *