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 wanted to use images instead of text links though?  You’ve more than likely seen images used as well as text links for social bookmark links on many different blogs and web sites.  Using images for your social links however will add a little more flair to your Blogger posts. 

Not only that, using images will save a little more space than the textual name of each service will, in most cases using images will also be more pleasing to the eyes.   With the space, you could use it for other sites that I don’t have listed here.  While I’m on that topic, if you have other sites you’d like to see in this post, just let me know in the comments.

Images for Social Bookmark

Here is ultimately what we’ll make in this post.  The following images can each be clicked and will perform the same function as the text links.  You can help me by using one or more of these right now for this post right here.  Thanks in advance for helping out!

 

Where do you get these images?  Pretty much anywhere you want really, assuming they are in the public domain of course, and most are.  You could right click and save the above images you want to implement in your blog, but if you wait a second and continue reading, I’ll share with you another option that will save you a bit of time.  If you don’t like these images and want to use different ones, you can find them on just about any other blog you might visit.

Image Hosting

There’s a problem using images though.  If you want to include images beyond the default set included in your theme, you need to find a place to host those new images.  There are no facilities for adding new images to Blogger (for your posts yes, but not for your template). However there are plenty of free image hosting web sites that provide a nice work-around to this problem.  You only need to upload your image and then get the URL reference for it.

Since both Picasa and Blogger are Google owned services, I decided to upload the above images to a Picasa Web Album and simply refer to the uploaded images in the code you’ll see below.

Now that the images are up on a server you can reference, you can start to build your “string” of social image links for placement within your template.

Note: After I uploaded the images to Picasa, I found that I couldn’t simply grab a reference to the image itself through normal means.  Instead, I had to strip the URL reference from the embed code that Picasa supplies for each image.  The following is what I went through.

Grab the Image Reference from Picasa

The following image shows you where to grab the embed code for an image you are currently viewing in a Picasa Web Album.  It’s the selected text, and I might add that I need to click the “Link to this photo” to expose it.

Simply copy the embed image code.  Here’s what you’ll come back with:

<table style="width:auto;"><tr><td>
<a href="http://picasaweb.google.com/lh/photo/R571Pox03gMJ5jA66zlPSw">
<img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKa674MI/AAAAAAAAAYU/FrJLxiWI_8M/s144/twitter.png" />a>
td>tr><tr><td style="font-family:arial,sans-serif; font-size:11px; text-align:right">
From <a href="http://picasaweb.google.com/waynejohnjohnwayne/BloggerImages">Blogger Imagesa>
td>tr>table>

You can see in the image tag source (src) property the reference to the image we want.  Simply extract that reference and you can use it wherever you want, even in Blogger templates.

All you need in the end is the image in your personal control, somewhere on the Internet.  If you use someone else’s image on a server that is not in your control, you run the risk of that image disappearing on you in the future.  Not only that, but each time that image is displayed to one of your visitors, the host where the image is will be using their bandwidth to deliver the image to your page.  Not good, and very bad form.

The exception to this rule is below, keep reading to find out more.

Creating the Image Tags

Here’s where the fun begins.  Let’s take a look at one of the existing text links that was built in the prior post.

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

You should notice that this will display as TwitThis.  So what do we need to do to make this an image instead of the TwitThis text?  Simple, we need to replace the TwitThis text in the code above to be an image reference instead of static text.  For those that have been following along, you might remember that I wrote a post that explains the image HTML tag in all it’s glory.  Please check out that post for details on the image tag in case you need to know more about it.

Next we’ll remove the TwitThis text and replace it with the image reference, so let’s build the image reference.

Continuing with using the Twitter link, I’ve constructed the following image tag using our reference from the Picasa embed tag:

<img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKa674MI/AAAAAAAAAYU/FrJLxiWI_8M/s144/twitter.png"
    alt="TwitThis" />

It’s rather long, and you might not see the file name on the end, but it’s there.  I also added the alt property to the image reference.  If you recall from my prior posts explaining the properties of the image tag, the alt property can be used to supply some text in cases where the image doesn’t show.  It also makes the image tag comply with W3C image standards, and that’s always a good thing.

I decided to also add a title property to the <img /> tag so that when visitors hover their mouse over the image, a tool tip will display that gives them a little more information about the action that will happen if they click it.

The <img /> tag itself may render with a border around it, as did my images on the Views on Life blog.  I didn’t like that, so I added a style property to remove the border.  The end result of these modifications looks like this for the Twitter image reference:

<img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKa674MI/AAAAAAAAAYU/FrJLxiWI_8M/s144/twitter.png"
    alt="TwitThis"
    style="border: none;"
    title="Post to Twitter"/>

With the <img /> tag all done up and ready for use, all we need to do is simply replace the <a> tag anchor text “TwitThis” with our <img /> tag.

The end result for the Twitter image link will look something like this:

<a expr:href='"http://twitthis.com/twit?url="
    + data:post.url + "&title="
    + data:post.title'>
    <img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKa674MI/AAAAAAAAAYU/FrJLxiWI_8M/s144/twitter.png"
        alt="TwitThis"
        style="border: none;"
        title="Post to Twitter"/>
    a>

As you can see, I’ve removed the TwitThis text and replaced it with a reference to the Twitter icon image hosted on Picasa.  The Twitter icon will now be a link because it is encapsulated between the beginning and ending tags of the anchor (<a>a>) tag.

Help, Don’t Hinder

I have one final thought that I’ll share with you about this.  When a user clicks the image, they will be taken to another site to perform a bookmark or some type of post promotion for you.  While that’s great, you don’t want to have the visitor leaving your site for good.  Perhaps they’re not done yet and would like to remain on your site.  Allow your visitors to leave your site when they wish.  Wanting to bookmark a post is wanting to help you or wanting to remember the location of the story they read, so the intention isn’t necessarily to leave your site.

In the final code below, you’ll see that I added a target=”_blank” property to the <a> tag.  This will open a new window when a user clicks the image.  I felt this was a better approach for these particular links, and if you disagree, you only need to remove the target property from the <a> tag statements.

Wrapping It All Up

This post shows how one can go about including images into the core of their Blogger template, as well as expand on my prior post on adding social links to your Blogger posts.  Since I’ve already done the effort of uploading the images to my own Picasa account, you can piggy-back on that and not worry about uploading your own images.  However, you’ll have to upload your own images if you want to use different images, or you don’t like the ones I chose.

Here is the complete code for all the same services, ready to insert into your template and begin using today if you want to.  Simply copy and paste into your template in the appropriate location as referenced in my prior post.

I promise to never remove the images in my Picasa account.    You can also see it in action here.

Enjoy, the code below is ready to drop into your template!

<a expr:href='"http://twitthis.com/twit?url="
    + data:post.url + "&title="
    + data:post.title' target="_blank">
    <img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKa674MI/AAAAAAAAAYU/FrJLxiWI_8M/s144/twitter.png"
        alt="TwitThis"
        style="border: none;"
        title="Post to Twitter"/>
    a>
<a expr:href='"http://www.stumbleupon.com/submit?url="
    + data:post.url + "&title="
    + data:post.title' target="_blank">
    <img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKAmkDgI/AAAAAAAAAYE/KUnCLCefDL0/s144/stumble.png"
        alt="Stumble"
        style="border: none;"
        title="Stumble this post"/>
    a>
<a expr:href='"http://del.icio.us/post?v=4&partner=fb&url="
    + data:post.url + "&title="
    + data:post.title' target="_blank">
    <img src="http://lh4.ggpht.com/_VChI6-yIxn4/SUqnDnGbriI/AAAAAAAAAXk/JOFPfwuzpAs/s144/delicious.gif"
        alt="Delicious"
        style="border: none;"
        title="Bookmark with Delicious"/>
    a>
<a expr:href='"http://digg.com/submit?phase=2&url="
    + data:post.url' target="_blank">
    <img src="http://lh4.ggpht.com/_VChI6-yIxn4/SUqnDlDzelI/AAAAAAAAAXs/cHSLbPnNovY/s144/digg.gif"
        alt="Digg"
        style="border: none;"
        title="Digg it!"/>
    a>
<a expr:href='"http://technorati.com/faves?add="
    + data:post.url' target="_blank">
    <img src="http://lh3.ggpht.com/_VChI6-yIxn4/SUqnKDlsfvI/AAAAAAAAAYM/dHm6DYOcdus/s144/technorati.png"
        alt="Technorati"
        style="border: none;"
        title="Bookmark with Technorati"/>
    a>
<a expr:href='"http://blinklist.com/index.php?Action=Blink/addblink.php&url="
    + data:post.url+ "&title="
    + data:post.title' target="_blank">
    <img src="http://lh4.ggpht.com/_VChI6-yIxn4/SUqnDX5kBlI/AAAAAAAAAXc/r5Xa7X8fT5c/s144/blinklist.jpg"
        alt="Blinklist"
        style="border: none;"
        title="Save to Blinklist"/>
    a>
<a expr:href='"http://furl.net/storeIt.jsp?u="
    + data:post.url+ "&t="
    + data:post.title' target="_blank">
    <img src="http://lh5.ggpht.com/_VChI6-yIxn4/SUqnEG5ObrI/AAAAAAAAAX0/vj0tH_x6qSs/s144/furl.gif"
        alt="Furl"
        style="border: none;"
        title="Furl It!"/>
    a>
<a expr:href='"http://reddit.com/submit?url="
    + data:post.url+ "&title="
    + data:post.title' target="_blank">
    <img src="http://lh4.ggpht.com/_VChI6-yIxn4/SUqnEXCAC3I/AAAAAAAAAX8/2SwzalInFvE/s144/reddit.gif"
        alt="Reddit"
        style="border: none;"
        title="Save to Reddit"/>
    a>

I’ll update this post in the future should the links change.  You just need to let me know in case you catch it first. 

Are there any other services you’d like to see in this list?  If so, let me know and I’ll update the text link post and this post.

Update!  The Technorati add link performed a search instead.  Please update your templates if you used this code.  Thanks to Diesel for calling this to my attention!

Another Update: Because I love OnlyWire, I need to include the following to ensure that I can continue to use their service.