Adding Social Links To Your Blogger Posts

You’ve seen them, you might have used them, but how do bloggers put those social links into their Blogger posts?  Here’s a list of some of the more popular social bookmarking sites and how to include their links in your Blogger posts to help your visitors to bookmark and promote your posts easily.

Including a way for your visitors to bookmark individual posts within your blog is quite beneficial too.  The primary URL used to access your blog is most likely the greatest link you have spread across the Internet, but what about the individual pages?  Bookmarking and linking to the individual pages in your site is also highly beneficial, and providing a way for your visitors to do this easily will only help to improve your blogs standing in search engine results.

Update!  If you want to use images instead of textual links, please see my post on Using Images for your Social Links for Blogger instead.  Code ready!

Blogger Template Modification

To use the social bookmarking items found below, you’ll need to modify your template a little.  And I might say these are untested with the older template system on Blogger.  Being that these apply to each and every post, it makes sense to place all these at the end of each post.  You could add them to the top of each post if you wanted, but that would go against the grain of normal usage in most cases.  If you are not familiar with editing your template, a great place to start is a post I wrote on using the Edit HTML Layout screen in Blogger.

Modify Your Template

To begin, we’ll need to locate a section of the template code to inject these code snippets into.  I decided to modify the Views On Life blog to include these are the end of each post, and you can see them in action there.

You will want to include these snippets immediately after the following lines of code in your template (check the ‘Expand Widget Templates’ checkbox to see this code):

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

This will position these new items to sit on top of the default Blogger post footer items such as your name, date of blog post and comment link.  You might also want to add a <br> tag at the end of all the items you add to create a two row list of links.

WordPress Users

If you have a WordPress blog, you might want to check out the post over at Exploding Boy for the same information tailored for WordPress.

Helping By Example

The examples will show you what happens when  you use the exact same code to help me promote this post.  Please show some support if you use any of these by using the examples as well.

 Twitter

Example: TwitThis 

<a expr:href='"http://twitthis.com/twit?url="
    + data:post.url + "&title="
    + data:post.title'>TwitThisa>

StumbleUpon

Example: StumbleThis

<a expr:href='"http://www.stumbleupon.com/submit?url="
    + data:post.url + "&title="
    + data:post.title'>StumbleThisa>

Delicious

Example: Save to Delicious

<a expr:href='"http://del.icio.us/post?v=4&partner=fb&url="
    + data:post.url + "&title="
    + data:post.title'>Save to Deliciousa>

Digg

Example: Digg This

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

Technorati

Example: Technorati

<a expr:href='"http://technorati.com/faves?add="
    + data:post.url'>Technoratia>

Blinklist

Example: Blinklist

<a expr:href='"http://blinklist.com/index.php?Action=Blink/addblink.php&url="
    + data:post.url+ "&title="
    + data:post.title'>Blinklista>

Furl

Example: Furl

<a expr:href='"http://furl.net/storeIt.jsp?u="
    + data:post.url+ "&t="
    + data:post.title'>Furla>

Reddit

Example: Reddit

<a expr:href='"http://reddit.com/submit?url="
    + data:post.url+ "&title="
    + data:post.title'>Reddita>

Anything Missing?

This post covers a number of sites, but there are more out there.  From the examples above you might be able to derive your own for other sites.  If you want me to create one for you though and update this post I’d be more than happy to, just let me know.

Update: I’ve just found a list of these that are formatted for use with the older template system Blogger used to use.

Another Update! The Technorati link was performing a search and not an add.  It’s been updated above, please update your templates if you used this code.  Thanks to Diesel for calling this to my attention.

You might also enjoy these related posts

1. Using Images For Your Social Links On Blogger Posts In my recent post on Adding Social Links To Your Blogger Posts, I showed how to put social links into the footer of your Blogger blog posts.  What if you...
2. Using Social Submitter to Promote Your Posts I’ve been a bad little social whore.   With the number of social sites popping up each week, I’ve been pondering how one might start using these sites to help promote...
3. Adding a Technorati Link Count Widget to Blogger This post was motivated by Gary, an ever spunky and highly motivated blogger that I truly admire. He recently asked my how to get Technorati’s Link Count widget installed on...
4. Adding the AddThis Widget to Graffiti Posts I’m playing around with Grafitti a bit and figured I’d add the Add This widget to each post. I didn’t see anything inherent in the application to do this, so...
5. Blogger.com Help – Lesson 5 – The Edit Posts Screen Editing your posts is one of those guaranteed tasks that goes along with blogging. In this post, I’ll take a look at the Edit Post screen and identify each part...