Embedded Social Bookmarks in Blogger Template

A two days ago I started working on custom Blogger template, my goal was to learn how to make Blogger template, and I am learning fast. It is not that easy, but minor tweaks can be done very quickly. New layout and style is done by CSS, but if you like to do something more than you need to dig into the XML.

This is my test blog for testing Blogger templates.

It is not finished yet, but one feature is done, and it is embedded Social Bookmark links.

All Social Bookmarking have similar URL-s for bookmarking, and all of them need post title and post permalink. Order varies from site to site but that is not the problem.

Blogger template is actually an XML application done by Google Schema for Blogger. Data for blog is acquired by expressions, and there are many of them. But for Social Bookmarking links we need only two. We need post title and post permalink.

Post title is acquired by data:post.title, and post URL or permalink by data:post.url.

Now all that is needed is to make proper url for each Social Bookmarking site. For example, if you like to submit something to Technorati you would do something like this :

http://technorati.com/faves?add=_permalink_&title=_title_

But doing this in Google Blogger XML is not that simple.
What you need to do is this :



I posted this code as image so that entities display as they should. You need to write &quote; as HTML entity and & also. Retype that code in one line and that is it. For some reason Google Blogger XML uses single quotes instead of double quotes, but you do not need to worry about that, because Blogger will change them.

Here are some more Social Bookmarking sites URL-s :

Stumbleupon :
http://www.stumbleupon.com/refer.php?url=_permalink_&title=_title_

Delicious :
http://del.icio.us/post?url=_permalink_&title=_title_

Digg :
http://digg.com/submit?phase=2&url=_permalink_&title=_title_

Google :
http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=_permalink_&title=_title

Reddit :
http://reddit.com/submit?url=_permalink_&title=_title_

Yahoo :
http://myweb2.search.yahoo.com/myresults/bookmarklet?t=_permalink_&title=_title_

Furl :
http://furl.net/storeIt.jsp?t=_title_&u=_permalink_

Facebook :
http://www.facebook.com/sharer.php?u=_permalink_&t=_title_

Magnolia :
http://ma.gnolia.com/bookmarklet/add?url=_permalink_&title=_title_

Newsvine :
http://www.newsvine.com/_tools/seed&save?u=_permalink_&h=_title_

Just make those URL-s like Technorati URL and they will work. To see them in action visit my test blog for testing Blogger templates.

Where to put these links, you might ask.
Well best place is to put them bellow the post meta data.

First open your template HTML. And then click on the Expand Widget Templates. Then find the div that has class post-footer-line-3 and in that div write your Social Bookmarking links.

Before you do any editing save your template.