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.

25 Comments

  1. Tuan Anh says:

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

  2. lawrence77 says:

    ha ha ha!
    simply the best!!!

  3. Justin says:

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

  4. Silentgirl says:

    Great tutorial ! Thanks for sharing.

  5. Murray says:

    Excellent!

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

    Also, the blog looks amazing!

  6. Craig says:

    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.

  7. Ryan says:

    Very well written Chris. Cheers mate.

  8. Tim Brazier says:

    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/

  9. muvie says:

    thanks for your information

  10. 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

  11. Webhosting says:

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

  12. kamal says:

    thank you very much for the post

    this is exactly what I need

  13. Awesome!

    Thanks Chris, just what I was looking for..

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

  15. uzshar.net says:

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

  16. thanks for your information

  17. Piyush says:

    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.

  18. reags says:

    Is there a ping url to submit page to wordpress?

  19. SouthWind17 says:

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

  20. Coder96 says:

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

Sorry, comments are now closed