Hardcode Social Bookmarking Links

14 Comments

Social Bookmarking is now well and truly integrated into Blogging/Web 2.0 culture. We rely on it now more than we need it. How many of us use Digg, del.icio.us or any of the other hundreds of Social Bookmarking sites? The benefits for bloggers are enormous, generating extra traffic through free advertising, and for the everyday user, a quick access to interesting and useful content. In a fairly recent post, WPCandy discussed what Social Networking and Bookmarking was, as well as mentioned some of the popular Social Bookmarking plugins for WordPress.

In this tutorial I’ll show you how to hardcode your own social bookmarking text and images links directly into your WordPress Loop. You’re already probably using a Social Bookmarks plugin, because many are freely available. There are benefits, of course, but the problem I find with plugins is that I like to be in control of how these links are displayed (through proper CSS), what there purpose is (information I submit) and where I place them within the Loop.

The tutorial is less complicated than you would think, if you already know what the Loop is, you are already half way there. We will tackle my top five Bookmarking sites: Digg, del.icio.us, Blinkbits, Blogmarks and Technorati.

The most obvious place to put these links are within each post, in this instance, at the bottom of each post. If you open the index.php file from your themes folder in your favourite editor, and locate were you would like to place your Bookmark links. Every theme is different, but if you can find:

<?php the_content(); ?>

Then copy and paste the the following code below it:

<h6>Digg This</h6>

<a href="http://digg.com/submit?phase=2&url=<?php the_permalink();?>&title=<?php the_title();?>">Digg this</a>

And you now have a text link to bookmark a post to Digg.

The first part of the URL directs you to Digg, the second part submits the url of the post, the third part submits the title of the post and finally, the last part is text to be displayed. From this code, you now know that is the only information that is leaving your site, nothing else, no second party involvement, so the control remains with you.

Here are some other Bookmark text links:

<h6>del.icio.us</h6>

<a href="http://del.icio.us/post?v=4&noui&jump=close&url=<?php the_permalink();?>&title=<?php the_title();?>">de.licio.us</a>

<h6>Blogmarks</h6>

<a href="http://blogmarks.net/my/new.php? title=<?php the_title();?>&url=<?php the_permalink();?>">Blogmarks</a>

<h6>BlinkBits</h6>

<a href="http://blinkbits.com/bookmarklets/save.php?v=1&source_url=<?php the_permalink();?>&title=<?php the_title();?>&Pop=no">Blinkbits</a>

<h6>Technorati</h6>

<a href="http://technorati.com/faves?add=<?php the_permalink();?>">Technorati</a>

Wrapping your Bookmark links within a list and a DIV

<div id="bookmarks">

<ul>

<li><a href="http://digg.com/submit?phase=2&url= <?php the_permalink();?>&title=<?php the_title();?>"<Digg this>/a></li>

<li><a href="http://del.icio.us/post?v=4&noui&jump=close&url=<?php the_permalink();?>&title=<?php the_title();?>">de.licio.us</a></li>

<li><a href="http://blogmarks.net/my/new.php? title=<?php the_title();?>&url=<?php the_permalink();?>">Blogmarks</a></li>

<li><a href="http://blinkbits.com/bookmarklets/save.php?v=1&source_url=<?php the_permalink();?>&title=<?php the_title();?>&Pop=no">BlinkBits</a></li>

<li><a href="http://technorati.com/faves?add=<?php the_permalink();?>">Technorati</a><li>

</ul>

</div>

You can now style your list and DIV as you wish.

Hardcode Bookmark image links:

<h6>Digg</h6>

<a href="http://digg.com/submit?phase=2&url=<?php the_permalink();?>&title=<?php the_title();?>"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" class="bookmarks" alt="" /></a>

And you now have an image link to bookmark a post to Digg.

The first part is the url and info you will send to digg, the second part is the source of the image, stored within your themes ‘images’ folder, and the third part is the image class for CSS styling.

Here are the some other bookmark image links:

<h6>del.icio.us</h6>

<a href="http://del.icio.us/post?v=4&noui&jump=close&url=<?php the_permalink();?>&title=<?php the_title();?>" title="del.icio.us"><img class="logo" src="<?php bloginfo('stylesheet_directory'); ?>/images/delicious.png" alt="del.icio.us" /></a>

<h6>Blogmarks</h6>

<a href="http://blogmarks.net/my/new.php? title=<?php the_title();?>&url=<?php the_permalink();?>" title="Blogmarks"><img class="logo" src="<?php bloginfo('template_url'); ?>/images/blogmarks.png" alt="Blogmarks" /></a>

<h6>BlinkBits</h6>

<a href="http://blinkbits.com/bookmarklets/save.php?v=1&source_url=<?php the_permalink();?>&title= <?php the_title();?>&Pop=no">" title="BlinkBits"><img class="logo" src="<?php bloginfo ('template_url'); ?>/images/blinkbits.png" alt="BlinkBits"/></a>

<h6>Technorati</h6>

<a href="http://technorati.com/faves?add=<?php the_permalink();?>" title="Technorati"><img class="logo" src="<?php bloginfo('template_url'); ?>/images/technorati.png" alt="Technorati"/></a>

You can wrap these in a list and style them as you wish, just like the text links.

Make sure to save all the icons within your theme’s images folder. Download Social Bookmark Icons.

Remember, Social Bookmarks can be added to the single, page archive, or even search pages by following the same process. You can also create your own Social Bookmark plugin, but that tutorial is for another day.

This post was written by Speckyboy.

14 thoughts on “Hardcode Social Bookmarking Links

  1. Excellent tutorial. I think that it is very important, when using social media graphics, to host the graphics locally. waiting for the icons to download from each social site can really slow down your page load.

  2. So not to be a smart ass, but why do you use the ShareThis plugin here? But I agree the control that you gain by harcoding makes it worth it.

  3. @Ali: No problem.

    @TzuVelli: I agree. I never even thought about the icons loading, good point.

    @Yoni: Well, for now we’re using the ShareThis plugin because it’s fast and easy. Eventually, I’ll probably implement hardcoded bookmark links into the design.

  4. Yeah but not integrate the Digg API to allow digg users actually add a digg without having to have a huge digg thumbnail on their page. A simple text link with a display of text digg’s would be a favorite of mine. Although it has not been developed yet. (to my knowledge)

    Based on marketing knowledge, users are less likely to submit your information to social networks than they are to agree with your submission. Meaning, most people tend to follow, instead of create. This is fact.

  5. I agree with Milo in using that piece of code as an include file or something and have it appear after the post etc. Its what I do with my bookmark plugin I use on my personal blog.

  6. On my blog there’s only Del.icio.us available. Here in Brazil these social bookmarking sites are not so powerful as they are in U.S., but I keep Del.icio.us because many of my visitors use it.

Comments are closed.