wayne on August 7, 2008
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 his Blogger.com blog. This is how you would do just that.
In case you are not familiar with Technorati, the site is 'tracking over 112.8 million blogs and over 250 million pieces of tagged social media'. They claim to be the recognized authority on what is happening on the web right now. That may or may not be true, but one thing is for sure, they aren't going away anytime soon.
The Link Count Widget
The link count widget displays how many people have 'reacted' to your post. Reactions are simply links to your posts. When you sign up with Technorati and let it know about your blog, it is able to identify your posts, and thus, be able to tell who is linking to whom.
For instance, here is an image of the reactions to my blog. I picked the first two reactions on my blog. I was top commenter for July 2008 on Pixelheads blog, 
and because he made reference to my blog by way of placing a link to my site, Technorati counts that as one reaction. Gary who writes on ThreeScorePlusTen and who inspired this post, shows as the second reaction. In this one he is referring to a Blogger.com Help lesson I wrote about adding audio to your profile.
The link count widget will show the number of times your blog is referenced, in this case, we are doing it on a post by post basis, so it will show the references for each post.
Adding the Widget
This involves modifying the template. Be sure to make a copy of the entire template and save it somewhere before doing anything, or at least maintain a back out plan should things go awry. One thing to note, I wrote this using the Sand Dollar default template. If things don't work in your template, just let me know the issue by leaving a comment. Things will get figured out.
The first thing we want to do is grab the appropriate script tags from Technorati. What we need is found on Technorati's Link Count Widget page. Since this is geared toward the Blogger.com platform, I'll copy the string (text) from the text box marked Blogger from that page.
With script in hand, you then need to make your way to your Layout - Edit HTML administration page. When there, you may have to check the Expand Widget Templates checkbox so you will see the entire code.
Modifying the Link Count Script
Let's take a look at the string we are going to insert into our template first. To note, it may be easier to open Notepad or some other text editor to perform the following steps. the Blogger.com template interface is rather small for me, and it's easier when you can see the entire string (text). lol.
<script src="http://embed.technorati.com/linkcount" type="text/javascript"></script>
<a class="tr-linkcount" href="http://technorati.com/search/<$BlogItemPermalinkUrl$>">View blog reactions</a>
The first line is the reference to Technorati's javascript file. This is what makes the display work. The second line is a hyperlink tag, and the part we are interested in is:
<$BlogItemPermalinkUrl$>
We need to replace this bit of text with the url to each and every post. After a bit of trying, I've worked out that on my template to replace that bit of text with this:
<script src='http://embed.technorati.com/linkcount' type='text/javascript'/>
<a class='tr-linkcount' expr:href='"http://technorati.com/search/" + data:post.url'>View blog reactions</a>
Ok, so a few changes were made between the two strings. Here's a list of the steps I took:
- I replaced all the " (doublequotes) with ' (single quote). Since every other tag was like that, I made the 'when in Rome' decision to conform the text I was inserting to be like the rest of the text already in the template.
- I typed expr: before the href tag. This tells Blogger to run the line through a parser that will replace the data:post.url text with the actual url of the post being provided.
- Inserted the " text before the http reference to Technorati, and I also added it after the / in search/.
- Added + data:post.url after the last " we added in step 3.
With those steps handled, we are now ready to place the modified text string into the Blogger.com template.
Adding the Link Count to the Blogger.com Template
Everyone's site template is going to be different, there is no doubt about that. There will be some, perhaps, that find the exact same strings (text items) in their templates as I will state here. However, when we think about this conceptually, all we really want to do is place this somewhere in the footer of each post. Right next to or underneath the post footer. So all we need to do, is find where that is in the template.
For me, I found love right after the following line:
<div class='post-footer'>
Just like I was hoping to find, the template has clearly defined areas. I found this line about 3/4 of the way down in my template. This has placed the 'View Blog Reactions' link right after the post, but also before the date and author line. If I wanted to move it below those lines, I simply need to move it further down. I find that is you place this code immediately after any <div> tag, you can trial and error your way to place it correctly. Just have another browser open to test with to help save some time.
Save and Review
If you think you have it, hit save and if Blogger doesn't throw up errors, give your blog a look and see if it's working. To check to make sure all is set up correctly, you should be able to hover your mouse over the 'View Blog Reactions' link and in the status bar, you should see the URL that you will be taken to when you click it. You should clearly see a proper http://technorati.com/search/ and immediately following that, a URL referencing the post you are looking at. For instance:
The first post I used for the Views on Life blog is referenced here. This is the post view page.
Afterthoughts
You might have noticed that what you see in the image for the Link Count widget with the 160 reactions isn't how it shows when you install it. That is because the Technorati icon is separate from the string they provided you. You will have to grab one of their icons (if it is legal of course) and place it next to the link. To do that, you would use this bit of code immediately after the <a></a> tags.
<img alt='some text describing the image' src='<$The url to the image$>' />
Of course, replacing the values with your own.
Aw crap, what's wrong?
Things go sour, south, bad and a number of other things. If you are having issue getting this to work, just post a comment and we'll work it all out. I tried a "test" comment earlier to see if there were any issues adding html to a comment and found no issue. You should be able to post html code simply by typing or copying it in. No special work needs to be done to it, it should look the same as what you type in your comment.
So what's next?
Well, if you liked this post, why not favorite it in Technorati using the favorite button I just recently added to my blog?
Have you implemented this widget already? What has been your experience with it? Let us know by leaving a comment below.
Peace and love! This ones for you Gary!
