Line25

How To Add Custom Bookmark Links to WordPress

Read the full post

There are plenty of plugins available for WordPress that quickly and easily add a range of social links to the bottom of your blog posts. These are great if you don’t mind sticking with the original markup and styling that comes with the plugin, but if you’re building your own theme you might want to play close attention to the details and creat your own custom set of bookmarking links. Let’s take a look at how we can write our own XHTML markup into our theme file, add the functionality to posts the URL and title of the article and style up the links exactly how we’d like.

For this example we’ll create this nice, clean bookmarking links layout complete with visual cue in the form of an icon and reinforcing text link. All laid out in horizontal format to run right across the bottom of a blog post.

Wordpress Bookmark Icons

The HTML Markup

Start by opening the single.php file from your theme, navigate down to an area after the post content where you would like your custom set of links to appear.
The collection of links would be most suited to being displayed in a HTML unordered list, jot out the markup like so:

<ul class="bookmark">
<li><a class="reddit" href="#">Reddit</a></li>
<li><a class="stumbleupon" href="#">StumbleUpon</a></li>
<li><a class="delicious" href="#">Delicious</a></li>
<li><a class="technorati" href="#">Technorati</a></li>
<li><a class="digg" href="#">Digg</a></li>
</ul>

We’ve added a class of bookmark and a specific class to each anchor to allow easy CSS styling later down the line.

The next stage is to head over to each social bookmarking site in order to find the URL used to submit new links, here’s the URLs used for Reddit, StumbleUpon, Delicious, Technorati and Digg.

http://reddit.com/submit?url=*URL*&amp;title=*TITLE*
http://www.stumbleupon.com/submit?url=*URL*&amp;title=*TITLE*
http://del.icio.us/post?url=*URL*&amp;title=*TITLE*
http://technorati.com/faves?add=*URL*
http://www.digg.com/submit?url=*URL*&title=*TITLE*

These links can then be added to the markup:

<ul class="bookmark">
<li><a class="reddit" href="http://reddit.com/submit?url=*URL*&amp;title=*TITLE*">Reddit</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=*URL*&amp;title=*TITLE*">StumbleUpon</a></li>
<li><a class="delicious" href="http://del.icio.us/post?url=*URL*&amp;title=*TITLE*">Delicious</a></li>
<li><a class="technorati" href="http://technorati.com/faves?add=*URL*">Technorati</a></li>
<li><a class="digg" href="http://www.digg.com/submit?url=*URL*&amp;title=*TITLE*">Digg</a></li>
</ul>

In order to allow these links to work within WordPress, we can use specific snippets of PHP to dynamically insert the post URL and title.

<ul class="bookmark">
<li><a class="reddit" href="http://reddit.com/submit?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php the_title(); ?&gt;">Reddit</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php the_title(); ?&gt;">StumbleUpon</a></li>
<li><a class="delicious" href="http://del.icio.us/post?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php the_title(); ?&gt;">Delicious</a></li>
<li><a class="technorati" href="http://technorati.com/faves?add=&lt;?php echo get_permalink() ?&gt;">Technorati</a></li>
<li><a class="digg" href="http://www.digg.com/submit?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php the_title(); ?&gt;">Digg</a></li>
</ul>

This all looks well and good, but there’s one problem; our site no longer validates! This is because of the special characters used in the url, as well as spaces being left in the URL from the title tag. Luckily there’s some quick and simple work arounds.
Firstly, swap out any ampersands with the following entity:

&amp;

Then we need to swap any spaces for entities such as %20 etc. Here we can use a tip from the Perishable Press Blog and use the PHP urlencode() function along with the WordPress title template tag:

&gt;

The Final Markup

With all changes swiftly put into effect, here’s our final piece of code complete with valid markup and friendly URLS:

<ul class="bookmark">
<li><a class="reddit" href="http://reddit.com/submit?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php _e(urlencode(the_title('', '', false))); ?&gt;&gt;">Reddit</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php _e(urlencode(the_title('', '', false))); ?&gt;&gt;">StumbleUpon</a></li>
<li><a class="delicious" href="http://del.icio.us/post?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php _e(urlencode(the_title('', '', false))); ?&gt;&gt;">Delicious</a></li>
<li><a class="technorati" href="http://technorati.com/faves?add=&lt;?php echo get_permalink() ?&gt;">Technorati</a></li>
<li><a class="digg" href="http://www.digg.com/submit?url=&lt;?php echo get_permalink() ?&gt;&amp;title=&lt;?php _e(urlencode(the_title('', '', false))); ?&gt;&gt;">Digg</a></li>
</ul>

The Styling

Firstly, download the awesome icons from IconsPedia for use in our bookmarks list. Arrange them into a new document to form a CSS sprite, reducing our five requests down into one single file. Save the file as a PNG.

Sprite

Now, let’s write out the CSS to style up the links:

* { margin: 0; padding: 0; } /* Quick and dirty reset */

ul.bookmark li {
list-style: none; /* Remove the default bullet points*/
}

ul.bookmark li a {
display: block; /* Increase the clickable area of the link */
height: 24px; /* Convert the link to the size of the icon (minus the padding) */
float: left; /* Float each anchor to display side by side */
margin: 0 15px 0 0; /* Add some right margin to space the links*/
padding: 8px 0 0 40px; /* Add some left padding to accomodate the icons */
color: #333; /* Spice up the link colour */
text-decoration: none; /* Remove the default underline on the link */
background-image: url(icons.png); /* Add the background sprite image */
background-repeat: no-repeat; /* Don't repeat the image */
}

We can then go in and add the specific coordinates for the background position of each link according to the CSS sprite graphic:

ul.bookmark li a.reddit { background-position: 0 0; }
ul.bookmark li a.stumbleupon { background-position: 0 -32px; }
ul.bookmark li a.delicious { background-position: 0 -64px; }
ul.bookmark li a.technorati { background-position: 0 -96px; }
ul.bookmark li a.digg { background-position: 0 -128px; }

With all this in place, here’s the final CSS code:

* { margin: 0; padding: 0; } /* Quick and dirty reset */

ul.bookmark li {
	list-style: none; /* Remove the default bullet points*/
}

ul.bookmark li a {
	display: block; /* Increase the clickable area of the link */
	height: 24px; /* Convert the link to the size of the icon (minus the padding) */
	float: left; /* Float each anchor to display side by side */
	margin: 0 15px 0 0; /* Add some right margin to space the links*/
	padding: 8px 0 0 40px; /* Add some left padding to accomodate the icons */
	color: #333; /* Spice up the link colour */
	text-decoration: none; /* Remove the default underline on the link */
	background-image: url(icons.png); /* Add the background sprite image */
	background-repeat: no-repeat; /* Don't repeat the image */
}

ul.bookmark li a.reddit { background-position: 0 0; }
ul.bookmark li a.stumbleupon { background-position: 0 -32px; }
ul.bookmark li a.delicious { background-position: 0 -64px; }
ul.bookmark li a.technorati { background-position: 0 -96px; }
ul.bookmark li a.digg { background-position: 0 -128px; }

ul.bookmark li a:hover {
	color: #666; /* Change to lighter grey on hover */
}
Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://hontap.info Tuan Anh

    Very careful post! Anyone can follow this instruction. Thank you.

  • http://laranzjoe.blogspot.com lawrence77

    ha ha ha!
    simply the best!!!

  • http://www.urbanrenewal.co.za Justin

    Very nice. It’s a pleasure to read such well-written tutorials.

  • http://fragments77.com/blog Silentgirl

    Great tutorial ! Thanks for sharing.

  • http://www.rezpls.com Murray

    Excellent!

    Really like how clean the code is, tons of comments.

    Also, the blog looks amazing!

  • http://www.abrishca.com.au Craig

    I find it much better to have complete control over the coding and styling rather than relying on a plugin for such a simple task. Thanks for the tips.

  • http://www.search4toffee.co.uk Ryan

    Very well written Chris. Cheers mate.

  • http://www.timbrazier.co.uk Tim Brazier

    Thanks Chris. Really great help! Made a few tweaks to the design and got it working here: http://www.timbrazier.co.uk/2009/03/18/my-twitter-mosaic/

  • http://www.movie21.co.cc/ muvie

    thanks for your information

  • http://www.jamieriddell.com Jamie Riddell

    This is really cool. May I ask a slightly related question? How do you create the wider ‘footer’ area of each post? You have three boxes which includes your profile, social bookmarking and similar posts.

    On WP CSS, which file do I need to edit?

    Many Thanks

  • http://www.interhostsolutions.be Webhosting

    We use a plugin called Sociable i must say i’m pretty impressed how easy it was to add social bookmarks to our blog

  • http://mustafakamal.biz kamal

    thank you very much for the post

    this is exactly what I need

  • http://twitter.com/mjnewham Martin Newham

    Awesome!

    Thanks Chris, just what I was looking for..

  • http://netsearchworld.com/ netsearchworld.com

    And who does not wish to pay for a hosting, is urgent here – the best free web hosting!

  • http://uzshar.net/ uzshar.net

    My new partner – a free web hosting, be registered everything, I recommend!

  • http://www.atolyetanitim.com reklam ankara

    thanks for your information

  • http://www.techizzles.com Piyush

    This is really a nice tutorial.. Actually i have a question wid me…

    How do i get the URL used by social bookmarking sites to add new links.

    hope to get the reply as soon as possible.

  • http://anadocs.com reags

    Is there a ping url to submit page to wordpress?

  • http://link SouthWind17

    The definition of a stable model was generalized to programs with choice rules. ,

  • http://link Coder96

    More interestingly, the narration frames the rewind as a question, explicitly asking how she got there and providing an answer through the narrative logic. ,