Social Bookmarking Per Post
I’ve chosen a selection of the favourites to illustrate how to add those cute little Social Bookmarking links/icons after each post. You need to add either of the following sets of codes in the post.html file before the closing ‘div’. And you will need to save the relevant icons to your own hard drive to upload to blogsome, or use your own icons ensuring you replace the name of the image accordingly.
You will also need to add some styling into your Site Style Sheet as shown after the options. Re-styling can be done to suit the colours of your blog etc..
Make sure you save a copy of your files before you make any changes.
Option 1 - Text Only Links
<div class="sbmark">
<a href="http://digg.com/submit?url={permalink_link}">digg this</a> |
<a href="http://del.icio.us/login/?url={permalink_link}&title={the_title}">Post to Del.icio.us</a> |
<a href="http://www.furl.net/storeIt.jsp?t={the_title}&u={permalink_link}">Furl It</a> |
<a href="http://www.stumbleupon.com/submit?url={permalink_link}&title={the_title}">Stumble it!</a> |
<a title="Save to Reddit" href="http://reddit.com/submit?url={permalink_link};title={the_title}" >Reddit</a> |
<a href="http://technorati.com/faves?add={permalink_link}">Add this post to Technorati Favorites</a> |
<a href=" http://myweb.yahoo.com/myresults/bookmarklet? t={the_title}&u={permalink_link}&ei=UTF">Save to Yahoo MyWeb</a> |
<a href="http://www.facebook.com/share.php?u={permalink_link}">Share on Facebook</a> |
</div>
Option 2 - Icons & Text Links
digg this
Post to Del.icio.us
Furl It
Stumble it!
Reddit
Add this post to Technorati Favorites
Save to Yahoo MyWeb <div class="sbmark">
<img src='/images/digg.png' alt='' /><a href="http://digg.com/submit?url={permalink_link}">digg this</a>
<img src='/images/delicious.png' alt='' /><a href="http://del.icio.us/login/?url={permalink_link}&title={the_title}">Post to Del.icio.us</a>
<img src='/images/furl.gif' alt='' /><a href="http://www.furl.net/storeIt.jsp?t={the_title}&u={permalink_link}">Furl It</a>
<img src='/images/stumbleupon_16x16.gif' alt='' /><a href="http://www.stumbleupon.com/submit?url={permalink_link}&title={the_title}">Stumble it!</a>
<img src='/images/reddit.png' alt='' /><a title="Save to Reddit" href="http://reddit.com/submit?url={permalink_link};title={the_title}" >Reddit</a>
<img src='/images/technorati.png' alt='' /><a href="http://technorati.com/faves?add={permalink_link}">Add this post to Technorati Favorites</a>
<img src='/images/yahoomyweb.png' alt='' /><a href=" http://myweb.yahoo.com/myresults/bookmarklet? t={the_title}&u={permalink_link}&ei=UTF">Save to Yahoo MyWeb</a>
<img src='/images/facebook_share_icon.gif' alt='' /><a href="http://www.facebook.com/share.php?u={permalink_link}">Share on Facebook</a>
</div>
Option 3 - Icons Only
<div class="sbmark">
<a href="http://digg.com/submit?url={permalink_link}"><img src='/images/digg.png' alt='digg it!' /></a>
<a href="http://del.icio.us/login/?url={permalink_link}&title={the_title}"><img src='/images/delicious.png' alt='Post to Del.icio.us' /></a>
<a href="http://www.furl.net/storeIt.jsp?t={the_title}&u={permalink_link}"><img src='/images/furl.gif' alt='furl it!' /></a>
<a href="http://www.stumbleupon.com/submit?url={permalink_link}&title={the_title}"><img src='/images/stumbleupon_16x16.gif' alt='stumble it!' /></a>
<a title="Save to Reddit" href="http://reddit.com/submit?url={permalink_link};title={the_title}" ><img src='/images/reddit.png' alt='reddit' /></a>
<a href="http://technorati.com/faves?add={permalink_link}"><img src='/images/technorati.png' alt='save to technorati' /></a>
<a href=" http://myweb.yahoo.com/myresults/bookmarklet? t={the_title}&u={permalink_link}&ei=UTF"><img src='/images/yahoomyweb.png' alt='Save to Yahoo MyWeb' /></a>
<a href="http://www.facebook.com/share.php?u={permalink_link}"><img src='/images/facebook_share_icon.gif' alt='Share on Facebook' /></a>
</div>
Stylesheet Code
.sbmark
{
text-align: left;
font: 0.9em Arial, Helvetica, sans-serif;
color: #222;
}
.sbmark a:link {
color: #1AB22B;
text-decoration: none;
}
.sbmark a:visited {
color: #777;
text-decoration: none;
}
.sbmark a:hover {
color: #48F858;
text-decoration: underline;
}
.sbmark img { vertical-align: baseline;
padding: 0 5px 0 0px;
}