Overview
This page covers a hack that adds social bookmarking icons to the post includable.
It is strongly advised to read the documentation of this includable before you start to modify it. Also, backup your template before applying modifications or hacks.
The Social Bookmarks Bar
This hack adds a Social Bookmarks Bar to the bottom line of each post.
When hovering the mouse over an icon, the name of the bookmarking service is dynamically displayed. If the button is clicked, the corresponding service is activated, and a link to the current post is added to the bookmark service.
Technical Background
Summary
Each icon has a url attached to it, that invokes the social bookmarking service with the right parameters. How this works out for each service is explained below.
Hovering the mouse over the icon (that is: hovering over the link) triggers a onmouseover-event. This event is captured by a javascript function, that dynamically changes the text of the Social Bookmarks Bar to the name of the corresponding service. In the same way, moving the mouse away from the icon triggers a onmouseout-event, that resets the default text.
Coding components
The hack needs 2 components of coding:
- A javascript function, as part of the head of the template
- A piece of html-code, as part of the post footer
Javascript function
function showsbtext(id,index) { var bookmarktext=document.getElementById(id); var sbValues= new Array(); sbValues[0] = 'Bookmark this post:'; sbValues[1] = 'Add to <strong>Digg</strong>'; sbValues[2] = 'Add to <strong>Delicious</strong>'; sbValues[3] = 'Add to <strong>Blinklist</strong>'; sbValues[4] = 'Add to <strong>Yahoo Web</strong>'; sbValues[5] = 'Add to <strong>Netvouz</strong>'; sbValues[6] = 'Add to <strong>Ma.gnolia</strong>'; sbValues[7] = 'Add to <strong>Fark</strong>'; sbValues[8] = 'Add to <strong>Furl</strong>'; sbValues[9] = 'Add to <strong>Technorati</strong>'; sbValues[10] = 'Add to <strong>Simpy</strong>'; sbValues[11] = 'Add to <strong>Spurl</strong>'; sbValues[12] = 'Add to <strong>Newsvine</strong>'; sbValues[13] = 'Add to <strong>Blinkbits</strong>'; sbValues[14] = 'Add to <strong>Smarkings</strong>'; sbValues[15] = 'Add to <strong>Segnalo</strong>'; sbValues[16] = 'Add to <strong>De.lirio.us</strong>'; sbValues[17] = 'Add to <strong>Reddit</strong>'; sbValues[18] = 'Add to <strong>Wists</strong>'; sbValues[19] = 'Add to <strong>Google</strong>'; document.getElementById(bookmarktext.id).innerHTML = sbValues[index]; }
The function showsbtext() needs 2 parameters:
- id - the unique id of the bookmark text
- index - the index-number of the bookmark service that is hovered over
Because there can be several posts on the page that have a bookmark bar, we need the id to find the right one and change its text.
The index is just a numerical value, that indicates the service. 1=Digg, 2=Del.icio.us, and so on. The index-value 0 is used for the default text ('Bookmark this post').
Each bookmark bar has a default text ('Bookmark this post'). This text is wrapped in a html DIV-element with a unique id. This id is composed of the post-id with the prefix 'sbtxt'. The method document.getElementById(id) returns a handle to this div. The contents of this div can be changed by assigning a new value using innerHTML.
Add the javascript code to the head of your template, using one of these methods:
<script type='text/javascript'> function showsbtext(id,index) { var bookmarktext=document.getElementById(id); var sbValues= new Array(); sbValues[0] = 'Bookmark this post:'; sbValues[1] = 'Add to <strong>Digg</strong>'; sbValues[2] = 'Add to <strong>Delicious</strong>'; sbValues[3] = 'Add to <strong>Blinklist</strong>'; sbValues[4] = 'Add to <strong>Yahoo Web</strong>'; sbValues[5] = 'Add to <strong>Netvouz</strong>'; sbValues[6] = 'Add to <strong>Ma.gnolia</strong>'; sbValues[7] = 'Add to <strong>Fark</strong>'; sbValues[8] = 'Add to <strong>Furl</strong>'; sbValues[9] = 'Add to <strong>Technorati</strong>'; sbValues[10] = 'Add to <strong>Simpy</strong>'; sbValues[11] = 'Add to <strong>Spurl</strong>'; sbValues[12] = 'Add to <strong>Newsvine</strong>'; sbValues[13] = 'Add to <strong>Blinkbits</strong>'; sbValues[14] = 'Add to <strong>Smarkings</strong>'; sbValues[15] = 'Add to <strong>Segnalo</strong>'; sbValues[16] = 'Add to <strong>De.lirio.us</strong>'; sbValues[17] = 'Add to <strong>Reddit</strong>'; sbValues[18] = 'Add to <strong>Wists</strong>'; sbValues[19] = 'Add to <strong>Google</strong>'; document.getElementById(bookmarktext.id).innerHTML = sbValues[index]; } </script>
or download this javascript-file, host it on your webserver, and add it to the head of your template like this:
<script src='http://....../showsbtext.js' type='text/javascript'/>
The HTML-code
The social bookmark bar itself is a piece of HTML-code, that has to be added to the post footer.
Open the template in HTML-edit mode, and search for the post footer line 3. Change the code:
<p class='post-footer-line post-footer-line-3'/>
to
<p class='post-footer-line post-footer-line-3'> </p>
The code for the bookmark bar has to be inserted between these <p>-tags.
The HTML-code of the bookmark bar has the following structure:
<span class='bookmark'> <!-- extra span to customize CSS for the bookmarks bar --> <table align='left' border='0' cellpadding='0' width='100%'> <!-- create table --> <tr> <!-- row 1 --> <td style='vertical-align:middle' valign='middle' width='30%'> <!-- col 1 --> Bookmark this post </td> <td> <!-- col 2 --> Button1 Separator Button2 Separator .... ButtonN </td> </tr> </table><br/> </span>
As you can see, the bookmark bar is made using a table with one row and two columns. But as the border of the table is set to 0, you don't see the lines so it doesn't look like a table at all.
In the left column, the default text is displayed. This will be changed when the mouse hovers over one of the buttons. The right column holds the buttons. The buttons are separated by a buttonseparator, that can be any character (space, or |), or even an image.
The bookmark text
The code for the bookmark text in the left column is given below:
<div expr:id='"sbtxt"+data:post.id'>Bookmark this post:</div> <script type='text/javascript'> showsbtext('sbtxt' + '<data:post.id/>',0) </script>
The first line creates a div-element with a unique id, based on the post id. If the post id is 123456 the id of this div is sbtxt123456. Note the quotes in the expr:-expression here:the expression is between single quotes, the "sbtxt" is between double quotes.
Line 2 to 4 call the javascript-function, passing the unique id and index 0 (for the deault text).
Notice that here <data:post.id> is used and not data:post.id.
The button code
The button code has the following structure:
<a expr:href='bookmarkurl' expr:onmouseout='defaultbookmarktext' expr:onmouseover='showbookmarktext' target='_blank'> <img alt='servicename' border='0' src='http://..../icon.gif'/> </a>
You can see here that the button image is wrapped in a HTML anchor-element. The image has an ALT-attribute with the name of the bookmark service, and its border is set to 0.
The anchor-element has a href-attribute, that holds the url to the bookmarkservice. The onmouseover and onmouseout-events make calls to the showsbtext-function, and the attribute target='_blank' makes the bookmark service appear in a new window.
The HREF attribute
The contents of the HREF-attribute are placed between single quotes. The content itself is a string, so parts of the contents will be placed between double quotes if we look into the code later.
Now, let us assume we have a post called testpost with a post-id of 123456. And let us assume we want to bookmark this post using Ma.gnolia. The HREF-attribute would have to be:
http://ma.gnolia.com/bookmarklet/add?url=http://yourblog.blogspot.com/testpost.html&title=testpost
The html-code to construct this HREF-attribute is:
expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title'
Notice the single and double quote at the beginning!
Also, notice that the &-sign from the url is replaced by its html-code &. If you don't use & you will get an error-message if you try to save the template ("Your xml is not well-formed").
The HREF-attribute is different for each bookmarking-service, but the principle is the same.
OnMouseOver
If the mouse is hovered over a button, the OnMouseOver-event is triggered. In that case, the javascript function showsbtext() has to be called. Again, assuming our post id is 123456 and our service is Ma.gnolia (service nr. 6), our call would be coded like this:
showsbtext("sbtxt123456",6)
The HTML-code to construct this call is:
expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"'
Notice the single and double quotes at begin and end of the attribute. And notice that if you want to add a double quote as a character to the contents of the attribute, you have to 'escape' it by putting a backslash (\) in front of it.
OnMouseOut
If the mouse stops hovering over a button, the OnMouseOut-event is triggered. In that case, the javascript function showsbtext() has to be called. Again, assuming our post id is 123456 , our call would be coded like this:
showsbtext("sbtxt123456",0)
The HTML-code to construct this call is:
expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"'
Notice the single and double quotes at begin and end of the attribute. And notice that if you want to add a double quote as a character to the contents of the attribute, you have to 'escape' it by putting a backslash (\) in front of it.
Complete social bookmarking bar
Download the social bookmarking icon files to your desktop, and host them on your server.
Download the bookmarks-file to your desktop. Open the file in Notepad, and copy the contents. Insert the contents into the Post Footer Line 3 <p>-element.
Change the src-attribute of the <img>-tags to the right urls of your icon files.
Save your template.
