How To Add Custom Bookmark Links to WordPress
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.
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*&title=*TITLE*
http://www.stumbleupon.com/submit?url=*URL*&title=*TITLE*
http://del.icio.us/post?url=*URL*&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*&title=*TITLE*">Reddit</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=*URL*&title=*TITLE*">StumbleUpon</a></li>
<li><a class="delicious" href="http://del.icio.us/post?url=*URL*&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*&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=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">Reddit</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">StumbleUpon</a></li>
<li><a class="delicious" href="http://del.icio.us/post?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">Delicious</a></li>
<li><a class="technorati" href="http://technorati.com/faves?add=<?php echo get_permalink() ?>">Technorati</a></li>
<li><a class="digg" href="http://www.digg.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">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:
&
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:
>
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=<?php echo get_permalink() ?>&title=<?php _e(urlencode(the_title('', '', false))); ?>>">Reddit</a></li>
<li><a class="stumbleupon" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php _e(urlencode(the_title('', '', false))); ?>>">StumbleUpon</a></li>
<li><a class="delicious" href="http://del.icio.us/post?url=<?php echo get_permalink() ?>&title=<?php _e(urlencode(the_title('', '', false))); ?>>">Delicious</a></li>
<li><a class="technorati" href="http://technorati.com/faves?add=<?php echo get_permalink() ?>">Technorati</a></li>
<li><a class="digg" href="http://www.digg.com/submit?url=<?php echo get_permalink() ?>&title=<?php _e(urlencode(the_title('', '', false))); ?>>">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.
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 */
}
Very careful post! Anyone can follow this instruction. Thank you.
ha ha ha!
simply the best!!!
Very nice. It’s a pleasure to read such well-written tutorials.
Great tutorial ! Thanks for sharing.
Excellent!
Really like how clean the code is, tons of comments.
Also, the blog looks amazing!
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.
Very well written Chris. Cheers mate.
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/
thanks for your information
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
We use a plugin called Sociable i must say i’m pretty impressed how easy it was to add social bookmarks to our blog
thank you very much for the post
this is exactly what I need
Awesome!
Thanks Chris, just what I was looking for..
And who does not wish to pay for a hosting, is urgent here – the best free web hosting!
My new partner – a free web hosting, be registered everything, I recommend!
thanks for your information
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.
Is there a ping url to submit page to wordpress?
The definition of a stable model was generalized to programs with choice rules. ,
More interestingly, the narration frames the rewind as a question, explicitly asking how she got there and providing an answer through the narrative logic. ,