Social bookmarking made easy.

Adding Social Bookmarks to your site so your visitors can bookmark your pages easily.

Update, September 15, 2008. A new module within SBI! will now handle your Social Bookmarking needs ... it is called Socialize It! and is VERY easy to use.

This tutorial is no longer recommended, nor is AddThis or ButtonR, as the work to install takes more time, and must be done manually. Socialize It! is very easy to do and you can find it in the All Pages section of Sitebuilder.

Help with the following tutorial will no longer be provided.

Old tutorial:

Step 1: Save the images to your desktop; then upload to the Graphics Library. Do not change the file names, it is essential they remain as is.

Step 2: Then you need to get the javascript and css files up to your SBI site as well. Right click and "save as" the following two files into a folder on your computer called "support-files"; you may need to create this folder if you don't have it already, usually doing it under "My Documents" is a good idea.:

javascript file
css file

Create a dummy html file, copy and paste from the following box into a plain text editor like Notepad and name the file bookmarks.html (you may have to select "all files" to save the extension properly). Then you will use the "Upload Your Own HTML" option in SBI to upload the bookmarks.html file. After upload, you will be prompted to upload the css and js files, do that; then build the page. Do not preview or analyze it. Keep this file loaded on your site to maintain the integrity of the data it links to.

<html><head><META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Bookmarks code upload</title><link rel="stylesheet" href="support-files/addto.css" type="text/css"></head><body><script language="JavaScript" src="support-files/addto.js" type="text/javascript"></script></body></html>

Choose Your Option

There are 2 different display options for you to choose from, horizontal in the content area,or vertical (which you can place anywhere you like, side bars or content area).

Horizontal / 2 Rows / Icons

ADD TO YOUR SOCIAL BOOKMARKS:

Blink

Del.icio.us

Digg

Furl

Google

Simpy

Spurl

Technorati

Y! MyWeb

Highlight, copy, and paste from the box below to each page on your site where you want the bookmarking to appear. For those who upload their own HTML, you can use the SBI includes to include this on your pages.

<br clear="all"><link rel="stylesheet" href="support-files/addto.css" type="text/css"><script language="JavaScript" type="text/javascript">var addtoMethod=1;
var addtoLayout=4; 	
var AddURL = document.location.href;
var AddTitle = escape(document.title);
</script><script language="JavaScript" src="support-files/addto.js" type="text/javascript"></script><div class="addToContent">  <div class="addTo"> <span title="Learn about Social Bookmarking" class="addToAbout" onclick="addto(0)">ADD     TO YOUR SOCIAL BOOKMARKS:</span>    <span class="addtos" title="Add this page to Blink"  onclick="addto(1)"><img src="images/addto_blink.gif" width="16" height="16" alt="add to Blink">Blink</span>      <span class="addtos" title="Add this page to Delicious" onclick="addto(2)"><img src="images/addto_delicious.gif" width="16" height="16" alt="add to Del.icio.us">Del.icio.us</span>      <span class="addtos" title="Add this page to Digg" onclick="addto(3)"><img src="images/addto_digg.gif" width="16" height="16" alt="add to Digg">Digg</span><br><span class="addtos" title="Add this page to Furl" onclick="addto(4)"><img src="images/addto_furl.gif" width="16" height="16" alt="add to Furl">Furl</span>      <span class="addtos" title="Add this page to Google" onclick="addto(5)"><img src="images/addto_google.gif" width="16" height="16" alt="add to Google">Google</span>      <span class="addtos" title="Add this page to Simpy" onclick="addto(6)"><img src="images/addto_simpy.gif" width="16" height="16" alt="add to Simpy">Simpy</span>      <span class="addtos" title="Add this page to Spurl" onclick="addto(8)"><img src="images/addto_spurl.gif" width="16" height="16" alt="add to Spurl">Spurl</span>      <a STYLE="text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; font-weight:normal; color:#000" title="add this page to Technorati" href="javascript:void(document.location='http://technorati.com/faves?add='+escape(document.location))"><img src="images/Technorati.gif" alt="Bookmark at Technorati" width="16" height="16" border="0">Technorati</a>      <span class="addtos" title="Add this page to Yahoo! MyWeb" onclick="addto(7)"><img src="images/addto_yahoo.gif" width="16" height="16" alt="add to Yahoo">Y! MyWeb</span></div></div>

Vertical / 1 Column / Icons

This is the one I used on DebtSteps.com:

Click & Add:

Blink

Del.icio.us

Digg

Furl

Google

Simpy

Spurl

Technorati

Y! MyWeb

That's it! If you have any questions, please post to the support thread in the Social Bookmarking, etc. forum at the Sitesell forums.

If you need help placing code into your sidebar areas, see the HTML Forum FAQ on using absolute positioned divs; if you need to float the code to the left or right of your text in the content area of your pages, then see the HTML Forum FAQ on tables.

As more bookmarking services are added, this page and code will be updated to include them here.

footer for social bookmarking page