Computer Consultant: Social Bookmarking Links in Blogger

Custom Search

Social Bookmarking Links in Blogger

In this article, we shall provide the code for you to place into the template to have a line of icon/ button links or text links to popular social bookmarking sites like Digg, Technorati, del.icio.us, Reddit, Blinklist, Furl, Yahoo, Simpy, etc. Readers can click them to add your site or your post to their bookmarks and in sharing these links with others, your Blog becomes more visible. This code when inserted into your template will automatically place these social bookmark links at the bottom of every post. There are many social bookmarking sites and new sites pop up almost every week. What we can do here is to provide you with a code that will place several of these popular sites, and update this list over time.

Social bookmarking is a popular way for users to share their personal bookmarks of useful sites with other users. Since most of the bookmarks are classified by topics, tags or categories, people around the world with interests similar to the user can easily locate these sites by viewing their online bookmarks. Just over the last couple of years, this concept has caught on with so many users that social bookmarking sites are now very popular and highly ranked by search engines. We shall discuss and list these sites in a separate article. For now, we want to provide you a code so that you can have something to work with.

Bookmarking Codes

1. AddThis

You would have noticed that we have used the free services of AddThis. They provide a simple widget code which you can place into your template. When users click it, they will be brought to a page of the most popular social bookmarking or feed reader services. Through that interface, they can submit your site or blog post to their online bookmarks or feed readers. What we like about this is the simplicity in design with only one button at the end of each post. It provides as well statistics of the popular posts that are bookmarked.

Register for a free account with them. When you are logged in, click on “My Account” and “Get the code for your widget.” You can either have a bookmarking widget or feed widget, choose a size of the button, and indicate Blogger as your blogging platform. Once you click on the “Get your free button link”, you will be shown a few codes that you can use. If you want the button to be in your sidebar, copy the code under the heading “Blog Button (New or Older Blogger).” Login to your Blogger account, go to Template -> Page Elements -> Add a Page Element in your sidebar and select “HTML/JavaScript”. Paste this code and save.

If you want the bookmark button in your Post footer use the code under the heading “Blog Post Button (New Blogger).” Follow the later section in this article explaining the different positions where you can place the code.

There are also other sites that provide similar services as AddThis. A search in Google will reveal a number of these sites. Feel free to try them out and find one that suits your needs.

2. Social bookmark text links

Text links are neat and can easily fit into the Post footer. This is what you can expect to see:-

If you like this in your Blog, we shall look at the code. Let us understand how the code works by using the example we gave in our article on Add Digg button to Blogger or Blogspot.

To submit that post to Digg, the full submission URL would be:-

http://digg.com/submit?phase=2&url= http://tips-for-new-bloggers.blogspot.com/2007/03/ add-digg-button-to-blogger-or-blogspot.html &title=Add%20Digg%20button%20to%20Blogger%20or%20Blogspot

The part marked in blue is the URL of your Post. This is of course assuming that you have in your Settings -> Archiving, you have chosen “Yes” to “Enable Post Pages.” In your Blog template, this Post URL is coded as data:post.url. The part in orange is the Title of the Post. This is coded as data:post.title in your Blog template.

To change the above to an automatic link for every post, such that you do not have to key in the Post URL or Post Title, the code will be this:-

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a>

If you have read our article on Hyperlinks and Image Links (I), you will know that the target='_blank' opens that link in a new window or tab. If you don't want that, you can remove this from the code.

On that understanding, the rest of the popular social bookmarking text links will be coded like this:-

Add Post To: |
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a>|
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Technorati</a>|
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>del.icio.us</a>|
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>Furl</a>|
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' target='_blank'>Simpy</a>|

The above is the Text Link code that you can use. We shall talk about where you can place in the later part of this article.

3. Social bookmark icon links

If you prefer images instead of text, you can have icons or buttons to represent the bookmarking sites.

The icon links will look like this in your Post footer:-

Search for the bookmarking site icons through their official sites, download them, resize them to the required size, and upload them onto a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files.

For the purposes of this article, we have uploaded the images onto our Photobucket account. You can change the image URLs to those of your own.

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/digg.gif'/></a>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/technorati.gif'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/delicious.gif'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/stumbleupon.gif'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/reddit.gif'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/blink.gif'/></a>
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Furl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/furl.gif'/></a>
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Spurl' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/spurl.gif'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Yahoo' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/yahoo.gif'/></a>
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Simpy' src='http://i191.photobucket.com/albums/z76/tipsfornewbloggers/simpy.gif'/></a>

Where to place the Bookmarking Code

After you have determined what you'd like – AddThis, Text Links, or Icon Links – copy the relevant social bookmarking code and place it in the template as follows. Go to Template -> Edit HTML and check the box that says “Expand Widget Templates.”

There are several places where you can place the bookmarks.

i. You can place them just below your Posts and before the “Posted By” line as shown in the above pictures. Scroll to these lines and place the relevant code at the red portion:-

<div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> PLACE CODE HERE <div class='post-footer'> <p class='post-footer-line post-footer-line-1'>

ii. If you want the social bookmark links to be just above the labels like this:-

Scroll to these lines and insert the relevant code at the red portion:-

PLACE CODE HERE <p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'>

iii. Should you want the bookmark links to be at the bottom after the labels as shown here:-

Scroll to these lines and place the code at the red portion:-

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'> <data:label.name/> </a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </p> PLACE CODE HERE

posted by Computer @ 10:18,

Computer Consultant

Computer Consultant, Network Security Consulting, Computer Consultants

Social Bookmarking Links in Blogger

0 Comments: