10/02/08
13:16 by John 
2480 words, 400 views, Categories: Web Development , Tags: addthis, bookmark, bookmarking, network, social, toolbar Bookmarking Toolbar v1.0
A short while ago I wrote my own Javascript social bookmarking toolbar (like you see on the BBC news pages - current random example). It is pretty much a total rip off of the AddThis bookmarking system, with one pretty important exception. You host the scripts and images on your own site. On the plus side it means you can do whatever you want with the script, but on the downside it means that updates are not automatic. Once you install it that is it, unless you come back here and download an updated version. Maybe one day I'll offer it as a hosted solution. But for now you guys get scripts and nothing else!
I like how it works, so I thought I would make it available to the masses.
You've got two options:
- Download a default example version here and then play about with the scripts, or;
- Customise your script below and copy and paste the code onto your pages as instructed.
Up to you!
The system is pretty simple. You paste one line of code on your article page that you want bookmarked (much like this page), you create a new page to hold the extended list of bookmarks, and you paste a second line of code on that page. 3 simple steps and you're done. We'll work through the steps below and customise the script for you as we go through. Nice and easy!
Step 1: bookmark-toolbar.js
This is the script that gets pasted on the article you want to bookmark. Wherever you paste the script is where the toolbar will appear, and you can have as many copies on one page as you like.
Configure your position options below. The code below will update automatically so then just copy and paste the code block underneath into a new .js file and name it bookmark-toolbar.js. Link to that .js file in your page like follows:
<script type="text/javascript" src="./bookmark-toolbar.js"></script>
Position of the toolbar on the page:
LeftCentre
Right
// Opens links with the class of newwindow in a new window/tab. A replacement for deprecated target=_blank.
function validNewWindow(){ // v1.0 | www.TJKDesign.com
var e = document.getElementById('bookmarkButtonContainer');
if (e){
var a=e.getElementsByTagName('a');
for (var i=0;i<a.length;i++){
if (a[i].className.indexOf('targetBlanked') > -1){
a[i].className+=a[i].className?' outlink':'outlink';
a[i].title+=' - This link opens in a new window/tab';
a[i].onclick=function(){newWin=window.open(this.href);if(window.focus){newWin.focus()} return false;}
}
}
}
}
// more reliable onload method than onload. List new functions below.
function multipleOnLoad(func) {
var onload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (onload) {
onload();
}
func();
}
}
}
multipleOnLoad(validNewWindow);
// Get the current files extension so that we know which file type to link to
var filename = window.location.href;
var dot = filename.lastIndexOf(".");
var extension = filename.substr(dot,filename.length);
// Defines the url and title variables
var url = window.location.href;
var title2 = document.title;
var title = document.title;
title = title.replace(/ /g, "+");
// Add sites to an array of objects
var i
var myObjectArray = [
{name: 'del.icio.us', fullUrl: "https://secure.del.icio.us/login?url=" + url + "&title=" + title},
{name: "Slashdot", fullUrl: "http://slashdot.org/bookmark.pl?url=" + url + "&title=" + title},
{name: "Facebook", fullUrl: "http://www.facebook.com/sharer.php?u=" + url},
{name: "Digg", fullUrl: "http://digg.com/submit?phase=2&url=" + url + "∓title=" + title},
{name: "Google Bookmarks", fullUrl: "http://www.google.com/bookmarks/mark?op=edit&bkmk=" + url + "&title=" + title},
{name: "Reddit", fullUrl: "http://reddit.com/submit?url=" + url + "&title=" + title},
{name: "Live Bookmarks", fullUrl: "https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=" + url + "&title=" + title + "&top=1"},
{name: "Yahoo MyWeb", fullUrl: "http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + url + "&t=" + title},
];
// Order sites alphabetically by name, ignoring case
function alphabetise(a,b){
return (a.name.toLowerCase() < b.name.toLowerCase()) ? -1 : 1;
}
myObjectArray.sort(alphabetise);
String.prototype.stripPunctuation = function() {
return this.replace( /[\.,;!#\$\/:\?'\(\)\[\]_\-\\ ]/g, "").toLowerCase();
}
// This contains the content written to the page, with styling included.
document.write("<div style=\"border:1px solid #CCCCCC; width:360px; color:#333333; margin:auto; font-family:verdana; font-size:8pt; margin:20px auto 5px auto; float: none;\" id=\"bookmarkButtonContainer\">");
document.write("<span style=\"display:block; line-height: 15px; padding: 2px 0 3px 4px; margin: 0 8px 0 0; float: left\">share/bookmark us:</span>");
// Iterate though the array and write sites to the page. Limit to 8 - I have experienced issues where more than the 8 iterations were written to the page for some reason. Possible conflicts with other scripts?
for (i=0;i<8;i++) {
str = myObjectArray[i].name;
document.write("<a href=\"" + myObjectArray[i].fullUrl + "\" class=\"targetBlanked\" title=\"Bookmark with " + myObjectArray[i].name + "\" style=\"text-decoration:none;\">");
document.write("<img src=\"./images/" + str.stripPunctuation() + ".gif\" alt=\"Bookmark with " + myObjectArray[i].name +"\" title=\"Bookmark with " + myObjectArray[i].name +"\" style=\"border:0px; margin:2px 6px 0 0; float:left;\" /></a>");
}
document.write("<a href=\"./bookmark" + extension + "?url=" + url + "&title=" + title2 + "\" style=\"float:left; line-height: 15px; padding: 2px 0 3px 4px; \">more...</a>");
document.write("<div style=\"clear:both;\"></div>");
document.write("</div><div style=\"clear:both;\"></div>");
Step 2: bookmark.xxx
This is the page that will hold the extended list of bookmarking options that you visit when you click "more...". The page has to be called bookmark or else the script will not work, and the file extension has to match that of the article page. I am using all php pages here so my bookmark page is called php. If your article is an asp page you will need to make bookmark.asp.
Step 3: bookmarks.js
This is the script that gets pasted into your new bookmark.xxx page. As with the toolbar script above wherever you paste the script is where the toolbar will appear, and you can have as many copies on one page as you like. Although I don't know why you would want more than one.
Once again configure your position options below. The code below will update automatically so then just copy and paste the code block underneath into a new .js file and name it bookmarks.js. Link to that .js file in your bookmark.xxx page like follows:
<script type="text/javascript" src="./bookmarks.js"></script>
Position of the box on the page:
LeftCentre
Right
//Set your site name
var siteName = "My Site";
// Opens links with the class of newwindow in a new window/tab. A replacement for deprecated target=_blank.
function validNewWindow(){ // v1.0 | www.TJKDesign.com
var e = document.getElementById('bookmarkContainer');
if (e){
var a=e.getElementsByTagName('a');
for (var i=0;i<a.length;i++){
if (a[i].className.indexOf('targetBlank') > -1){
a[i].className+=a[i].className?' outlink':'outlink';
a[i].title+=' - This link opens in a new window/tab';
a[i].onclick=function(){newWin=window.open(this.href);if(window.focus){newWin.focus()} return false;}
}
}
}
}
//Set the background styles for mousing over the bookmark site
hover = function() {
var liHover = document.getElementById("bookmarkContainer").getElementsByTagName("li");
for (var i=0; i<liHover.length; i++) {
liHover[i].onmouseover=function() {
this.style.backgroundColor="#FAFAFA";
}
liHover[i].onmouseout=function() {
this.style.backgroundColor="#FFFFFF";
}
}
}
// more reliable onload method than onload. List new functions below.
function multipleOnLoad(func) {
var onload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (onload) {
onload();
}
func();
}
}
}
multipleOnLoad(validNewWindow);
multipleOnLoad(hover);
// Parse the current page's querystring
function getArgs() {
var args = new Object();
var query = location.search.substring(1);
var pairs = query.split("&");
for(var g = 0; g < pairs.length; g++) {
var pos = pairs[g].indexOf('=');
if (pos == -1) continue;
var argname = pairs[g].substring(0,pos);
var value = pairs[g].substring(pos+1);
args[argname] = unescape(value);
}
return args;
}
var args = getArgs();
// Defines the url and title variables
if (typeof siteName != 'undefined') {
siteName += " - ";
} else {
siteName = "";
}
if (typeof args.url != 'undefined') {
args.url = args.url;
} else {
args.url = window.location.href;
}
if (typeof args.title != 'undefined') {
args.title = args.title;
} else {
args.title = document.title;
}
var url = args.url;
var title2 = siteName + args.title;
var title = siteName + args.title;
title = title.replace(/ /g, "+");
// Add sites to an array of objects
var i
var myObjectArray = [
{name: 'del.icio.us', fullUrl: "https://secure.del.icio.us/login?url=" + url + "&title=" + title},
{name: "Slashdot", fullUrl: "http://slashdot.org/bookmark.pl?url=" + url + "&title=" + title},
{name: "Facebook", fullUrl: "http://www.facebook.com/sharer.php?u=" + url},
{name: "Blinklist", fullUrl: "http://blinklist.com/index.php?Action=Blink/addblink.php&Url=" + url + "&Title=" + title},
{name: "Blogmarks", fullUrl: "http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + url + "&title=" + title},
{name: "Digg", fullUrl: "http://digg.com/submit?phase=2&url=" + url + "∓title=" + title},
{name: "Furl", fullUrl: "http://furl.net/storeIt.jsp?u=" + url + "&t=" + title},
{name: "Google Bookmarks", fullUrl: "http://www.google.com/bookmarks/mark?op=edit&bkmk=" + url + "&title=" + title},
{name: "Ma.gnolia", fullUrl: "http://ma.gnolia.com/bookmarklet/add?url=" + url + "&title=" + title},
{name: "Propeller", fullUrl: "http://www.netscape.com/submit/?U=" + url + "&T=" + title},
{name: "Newsvine", fullUrl: "http://www.newsvine.com/_wine/save?u=" + url + "&h=" + title},
{name: "Reddit", fullUrl: "http://reddit.com/submit?url=" + url + "&title=" + title},
{name: "StumbleUpon", fullUrl: "http://www.stumbleupon.com/submit?url=" + url + "&title=" + title},
{name: "Tailrank", fullUrl: "http://tailrank.com/share/?link_href=" + url + "&title=" + title},
{name: "Technorati", fullUrl: "http://www.technorati.com/faves?add=" + url},
{name: "Live Bookmarks", fullUrl: "https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=" + url + "&title=" + title + "&top=1"},
{name: "Yahoo MyWeb", fullUrl: "http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + url + "&t=" + title},
{name: "Ask", fullUrl: "http://myjeeves.ask.com/mysearch/BookmarkIt?v=1.2&t=webpages&url=" + url + "&title=" + title},
{name: "Fark", fullUrl: "http://cgi.fark.com/cgi/fark/submit.pl?new_url=" + url + "&new_comment=" + title},
{name: "Simpy", fullUrl: "http://www.simpy.com/simpy/LinkAdd.do?href=" + url + "&title=" + title},
{name: "Backflip", fullUrl: "http://www.backflip.com/add_page_pop.ihtml?url=" + url + "&title=" + title},
{name: "Wink", fullUrl: "http://wink.com/_/tag?url=" + url + "&doctitle=" + title},
{name: "Spurl", fullUrl: "http://www.spurl.net/spurl.php?url=" + url + "&title=" + title},
{name: "LinkaGoGo", fullUrl: "http://www.linkagogo.com/go/AddNoPopup?url=" + url + "&title=" + title},
{name: "Mister Wong", fullUrl: "http://www.mister-wong.de/index.php?action=addurl&bm_url=" + url + "&bm_description=" + title},
{name: "Netvouz", fullUrl: "http://netvouz.com/action/submitBookmark?url=" + url + "&title=" + title + "&popup=no"},
{name: "Diigo", fullUrl: "http://www.diigo.com/post?url=" + url + "&title=" + title},
{name: "Blue Dot", fullUrl: "http://bluedot.us/Authoring.aspx?u=" + url + "&t=" + title},
{name: "Segnalo", fullUrl: "http://segnalo.alice.it/post.html.php?url=" + url + "&title=" + title},
{name: "DropJack", fullUrl: "http://www.dropjack.com/submit.php?url=" + url},
{name: "Yahoo Bookmarks", fullUrl: "http://bookmarks.yahoo.com/toolbar/savebm?opener=tb&u=" + url + "&t=" + title},
];
// Order sites alphabetically by name, ignoring case
function alphabetise(a,b){
return (a.name.toLowerCase() < b.name.toLowerCase()) ? -1 : 1;
}
myObjectArray.sort(alphabetise);
String.prototype.stripPunctuation = function() {
return this.replace( /[\.,;!#\$\/:\?'\(\)\[\]_\-\\ ]/g, "").toLowerCase();
}
// This contains the content written to the page, with styling included.
document.write("<div id=\"bookmarkContainer\" style=\"width:500px; margin: auto; padding:0px; color:#333333; font-family: arial; float:none;\">");
document.write("<span style=\"font-size:13pt; display:block; margin:5px 0 0 0;\">" + title2 + "</span>");
document.write("<span style=\"font-size:11pt; display:block; margin:5px 0 10px 0;\">" + url + "</span>");
document.write("<span style=\"font-size:9pt; display:block; margin:5px 0 10px 0; color:#666666;\">Please choose a bookmarking service below:</span>");
document.write("<div style=\"width:480px; border: 1px solid #CCCCCC; padding:10px;\">");
document.write("<ul style=\"margin:0px; padding:0px; width: 480px; list-style: none;\">");
// Iterate though the array and write sites to the page
for (i in myObjectArray) {
str = myObjectArray[i].name;
document.write("<li style=\"display:block; float:left; height: 17px; width: 210px; padding: 5px 0 5px 30px; line-height:17px;\">");
document.write("<a href=\"" + myObjectArray[i].fullUrl + "\" class=\"targetBlank\" title=\"Bookmark with " + myObjectArray[i].name + "\" style=\"text-decoration:none;\">");
document.write("<img src=\"./images/" + str.stripPunctuation() + ".gif\" alt=\"Bookmark with " + myObjectArray[i].name +"\" title=\"Bookmark with " + myObjectArray[i].name +"\" style=\"border:0px; margin:0 5px 0 0; float:left;\" />");
document.write(myObjectArray[i].name + "</a></li>");
}
document.write("</ul><div style=\"clear:both;\"></div></div></div><div style=\"clear:both;\"></div>");
Step 4: Download the images
Each bookmark site has an icon associated with here. You can download a zip file with all of the images used here. If you have downloaded the full example file mentioned at the beginning of this post you do not need to get these images, they are all already included.
That is everything! Please note that your 2 scripts, bookmark.xxx file, and images folder all need to reside in the same directory as each other and the articles which you are going to be adding the toolbar too.
Good luck, and I hope that the toolbar serves you well. Please bear in mind I am only a Javascript beginner. If you feel there is something I should do differently, or any additions that should be made, please comment below. I'm toying with the idea of an Ajax based toolbar that will remove the need for the bookmark page and will condense everything down into 1 script. Should be fun to do, but that's for the future.
PermalinkLeave a comment » • Send a trackback »
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)
No feedback yet
Comment feed for this postLeave a comment
Hello and welcome to my portfolio. I am a web and Flash designer / developer based in South-East England. My Testimonials
John delivered requirements on time, exceeded our expectations with the end-product and dealt with unforeseen extra requirements in a flexible and friendly manner.Justin Woodcock
World Parts
The IT Trade Show
