Tuesday, 18 October 2005

Display links to your posts via Blogger Backlinks, Icerocket Link Tracker etc






In this post I'll cover:
  • how to include simple one-click links to achieve (almost) the same result as backlinks using Blogsearch, Technorati etc - whether you use Blogger or not
  • how to include backlinks in your Blogger blog if you have customised your template
  • how to combine backlinks and one-click links from other services, including Ice Rocket's Link Tracker and links to your blog on Delicious, in your blog.
As I previously mentioned, Blogger's "backlink" feature (which was announced on Blogger's own blog, Buzz) using Google's newish Blog Search is really nothing particularly innovative - Technorati's Cosmos has done the same thing, but via searching Technorati's own index, for ages; Icerocket's Link Tracker is also a variation on the same sort of theme.

The difference is that backlinks can cleverly show automatically, on your post or item page, a list of the posts linking to your post, with the ability to see extracts from a post by clicking the right arrow by the post title. Link Tracker shows the number of linking posts, but no list of titles, and Cosmos does neither, providing only a simple link to click to search Technorati for links to your post.

(I'd also add that Blogger have now fixed the Firefox copying problem noted in my original post, and they seem to have improved the loading speed too.)

Simple link to search on Blog Search or Icerocket (all blogging platforms)

I've covered the Technorati Cosmos search link before. If you want simple links to click do the same search via Blog Search or Icerocket etc, instead of Google's backlinks, you can have them - and this works for any blogging platform, not just Blogger. (If you're on another platform, just change "<$BlogItemPermalinkUrl$>" to whatever template tag represents your post's permalink on your platform, e.g. I believe it's "<$MTEntryID$>" for Movable Type and "<?php the_ID(); ?>" for Wordpress). Obviously you can change the link text (e.g. "Google Blog Search Backlinks to this post") to anything you like.

Here's the code for Google Blog Search:
<a href="http://search.blogger.com/blogsearch?q=link:<$BlogItemPermalinkUrl$>">Google Blog Search Backlinks to this post</a>

Icerocket:
<a href="http://blogs.icerocket.com/search?q=<$BlogItemPermalinkUrl$>">Icerocket links to this post</a>

Blogpulse:
<a href="http://www.blogpulse.com/search?query=<$BlogItemPermalinkUrl$>">Blogpulse links to this post</a>

Bloglines:
<a href="http://www.bloglines.com/citations?url=<$BlogItemPermalinkURL$>">Bloglines links to this post</a>
Delicious [added 31 December 2005]:
<a title="Who's bookmarked this post on Delicious?" href="http://del.icio.us/url?v=2&url=<$BlogItemPermalinkURL$>">Delicious</a>
(this isn't so much who's linked to your post, but who's bookmarked that post on Delicious.)

And you can also find out who links to your blog generally (not just specific posts) by changing "<$BlogItemPermalinkUrl$>" to your blog URL (or on Blogger "<$BlogURL$>") e.g. in my case it's http://consumingexperience.blogspot.com.

Blogger: backlinks for custom templates

Blogger's help page on the Backlink tags is now working, and it's pretty self-explanatory, so I won't need to go into too much detail here - just take a look at that page. I'd just add a few things.

What Blogger call the "backlink indicator" is just a link (on your main blog page) to the section of the post page or item page which displays the backlinks in full. As Blogger point out, the <BlogItemBacklinksEnabled> tags around the backlink indicator are used so that if you haven't turned on backlinks for a particular post, the backlinks link won't be displayed (you can do it for individual posts when creating a post, where it says "Allow New Comments and Backlinks on this Post" underneath the box just above the Save as Draft/Publish Post buttons. It seems though you can't turn backlinks on and off independently of comments, it has to be both or none - pity). The same tags also surround the backlinks display on the item page or post page, for the same reason.

The code they give for the Itempage (under the heading "Displaying the backlinks") is exactly what I've used in my template, with one change. To create a link for Blogger users to click in order to add a link to your post (basically, by enabling them to create a new post on their own Blogger blog about your post, with the link to your post already pre-filled in), Blogger use the tag "<$BlogItemBacklinkCreate$>". That automatically generates link text ("Create a link") which I thought was a bit misleading, because that link only allows Blogger users to create a link - not bloggers using other platforms. So I changed the text to read "Create link here by posting on Blogger" to make it clear it's not much good for non-Blogger users to click it! To do that, or similar, just change "<$BlogItemBacklinkCreate$>" in the Blogger code to "<a class="comment-link" href="javascript:BlogThis();" id="b-backlink">Create link here by posting on Blogger</a>", inserting whatever link text you prefer.

The final thing to mention is one possible gotcha. If you have deleted your <Blogmetadata> tag from your Blogger template, e.g. in order to enable feed autodiscovery for your Feedburner feed, you may find that the backlinks code provided by Blogger won't work. To get it to work you need to do one more thing - between the head tags of your template, you need to insert this (first changing XXXXXXX to your own blog's ID number):

<script type="text/javascript" src="http://www.blogger.com/js/backlink.js"></script>
<script type="text/javascript" src="http://www.blogger.com/js/backlink_control.js"></script>
<script type="text/javascript">var BL_backlinkURL = "http://www.blogger.com/dyn-js/backlink_count.js";var BL_blogId = "XXXXXXX";</script>

Combining backlinks, Link Tracker, Cosmos etc

From the above you will be able to figure out how to combine them. I've mentioned before that that's exactly what I've done. For an example of the combo in use, see my main page http://consumingexperience.blogspot.com for the "backlink indicator" (which I've changed so as NOT to surround with conditional <BlogItemBacklinksEnabled> tags, because even if I've turned off Google backlinks I may want to be able to include Technorati or Icerocket etc search links) and my "how to edit comments on Blogger" post for an example of the displayed backlinks and Icerocket etc links. But just to save time, feel free to copy the code I've used for my template. Here's my own combo code (not forgetting the additions to the head section mentioned above):

Main page/archive page:
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a></p>
([note added 31 December 2005:] I've since shortened the above to cut out the list of services, i.e. the word " on Google Blogsearch, Technorati, Icerocket, Blogpulse, Bloglines")

Itempage/post page (the backlinks code only works for Blogger, the others will work for other platforms as long as you change "<$BlogItemPermalinkURL$>" to whatever template tag represents the post's permalink on your platform, as discussed above):
<a name="links"></a>Links to this post on:<br />
<ul>
<li><a href="http://technorati.com/search/<$BlogItemPermalinkURL$>" title="Search Technorati for blog posts linking to this post">Technorati (Cosmos)</a></li>
<li>Icerocket - <script language=javascript>writeCitationsFrame("<$BlogItemPermalinkURL$>");</script></li>
<li><a href="http://www.blogpulse.com/search?query=<$BlogItemPermalinkURL$>">Blogpulse</a></li>
<li><a href="http://www.bloglines.com/citations?url=<$BlogItemPermalinkURL$>">Bloglines</a></li>
<a title="Who's bookmarked this post on Delicious?" href="http://del.icio.us/url?v=2&url=<$BlogItemPermalinkURL$>">Delicious</a>
<BlogItemBacklinksEnabled><li>Google Blog Search -</li>
<dl id="comments-block">
<BlogItemBacklinks>
<dt class="comment-title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class="comment-body"><$BlogBacklinkSnippet$>
<br />
<span class="comment-poster">
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
</ul>
<p class="comment-timestamp"><a class="comment-link" href="javascript:BlogThis();" id="b-backlink">Create link here by posting on Blogger</a></p>
</BlogItemBacklinksEnabled>
</p>
([note added 31 December 2005:] I've since shortened the above to change "Posts linking to this post on" to just "Links to this post on".)

Icerocket's Link Tracker

One more thing to add. You'll notice special code for Icerocket - not just the single one-click link I mentioned earlier. That's because I've made use of the Icerocket's Link Tracker code. That enables you to display not just a simple link, but also how many posts on Icerocket's index link to your particular blog post e.g. "5 Linking Posts". I won't say much more about that as the Icerocket page explains what to do - see their instructions under "2. IFrame based version of Link Tracker" if you use Blogger or another platform that doesn't let you install scripts on your blog server. Unfortunately I haven't been able to figure out yet how to tweak the text, if I don't want it to say "X Linking Posts" but "X Linking Posts on Icerocket", or even "X linking posts". I don't think you can. Pity Icerocket don't allow you to.

I would add that the code they tell you to install in the head section of your template can supposedly be tweaked to style it to your preference - but I couldn't get it to work except by specifying the style of the link direct (in my case, I used "var linkStyle = "font-size:62.5%; font-family:'Lucida Grande', Verdana, Arial, Sans-Serif";" which should fit in with my blog) - leaving that variable empty or trying to specify the class for the link just didn't work at all for me, and indeed what I did still hasn't worked completely (wrong font family still for instance), and I've not yet heard back from Blake Rhodes of Icerocket as to why. So don't despair if you find the link text is a bit weird, just experiment with different styles in the var linkStyle line until you get something that just about does it, which is what I did. (If anyone figures out how to get it to work properly, let me know!).

The other thing is that the code they say to insert after each post can of course be anywhere you like, before your comments or after - in my case I put it after the trackback link, under the Technorati Cosmos link. No doubt Technorati will be working on a Link Tracker or Backlink type display where the titles of linking posts appear on your blog, or at least their number (and who knows, maybe Icerocket will produce a list/expandable extracts display a la backlinks sometime too). Ah, innovation - great for us bloggers and Net users especially if everyone adopts everyone else's good bits!


Technorati Tags: , , , , , , , , , , , , , , , , , , , , , , , ,

24 comments:

ycc2106 said...

I tried doing what you say, but I get some..<$BlogBacklinkTitle$>< /a> <$BlogBacklinkDeleteIcon$>...
showing instead of the backlinks, what could that be due to?

Also please do my poll to say which bookmark manager you prefer:
http://quimble.com/poll/view_poll/224

Thanks

Improbulus said...

ycc2106, I'm not quite sure what you mean. Have you got an example post with the code?

Will try your poll when I've a moment!

Anne said...

I can't get the google blog search to work...what am i doing wrong?

Improbulus said...

Anne can you give the URL of the blog you've tried it on? I can take a look at your code if you do.

John said...

Imp,

Thanks for the template-head .js for the backlinks. Knew I'd seen it here, and whaddaya know... it was right there when I needed it.

Much appreciated.

Improbulus said...

Glad it's been of help John!

CL said...

Neat! I just added this hack to one of my blog (will do the rest later).

I've added who furled and who is yahooing my post. ;)

Improbulus said...

Great, CL. Hope it works well for you. :)

fantababy said...

i had put autodiscovery of feedburner feed in my blog and it did not show backlinks. i added your code between the head tag and it worked. thanx to your post.

Improbulus said...

Fantababy, thanks for your comment. I'm glad it worked!

Lucas said...

I get a $BlogItemPermalinkUrl$ error. Like a variavel dont declared. Sorry, the error message is in portuguese...

Improbulus said...

Lucas, I think you're on the new version of Blogger and that template tag won't work on new Blogger.

You'll need to convert over. This post may help perhaps. I've not had a chance to look in detail at how backlinks work on New Blogger so I'm not sure yet if the above still holds even with using the new template code.

collectededitions said...

I installed the backlink code via Blogger's instructions, but I'd like to have it show (on the main page and on the post page) how many backlinks there are for each post. Is there a way to do this?

Improbulus said...

collectededitions, I'd like that too but it takes more programming skill than I possess! Let's hope Google release copy/paste code that will do that soon (as Technorati did a few months back with their Linkcount script).

Unless some developer wants to take on the challenge?

Aashi said...

Don’t be too much worried about links. It is usually considered that the more links Google sees, the more traffic you get. But back links can easily be achieved by keeping fresh and unique and original content on the site. A site that has freshly and regularly updated content attracts more traffic. If users are impressed and satisfied with your content they will automatically cast a vote. The most important thing is not code, not page rank but the content. It is said "Content is the king" The greatest challenge should be to create websites that are useful to others.

nana said...

It may be difficult for me to understand but..thanks for useful information

Health Insurance Quotes said...

Wow, Improbulus, great post with such detailed info on backlinks and tracking. Amazingly detail oriented! Shows me how much I have yet to master... I see you like watching CSI - my girlfriend and I are also hooked!

Thanks again for the useful tips.

Ren said...

I've used one of the template from blogskins and it's done such a way there all the titles on my blog doesn't have a unique html, that is giving me problem on creating backlinks to post. How can I edit the template to have the title as a clickable link? Thanks for your help.

www.isaac-khng.blogspot.com

nitendra said...

Excellent point you had mentioned in your article.Most of us doesn't follow all these points. But now i will in order to achieve high PR

sama said...

would add that the code they tell you to install in the head section of your template can supposedly be tweaked to style it to your preference - but I couldn't get it to work except by specifying the style of the link direct (in my case, I used "var linkStyle = "font-size:62.5%; font-family:'Lucida Grande', Verdana, Arial, Sans-Serif

Zahid Rouf said...

Nice Post . Good job.

zahidbin.blogspot.com

vikas gautam said...

good post can you tell me how to make my blog popular

dotclub said...

Don’t be too much worried about links. It is usually considered that the more links Google sees, the more traffic you get. But back links can easily be achieved by keeping fresh and unique and original content on the site. A site that has freshly and regularly updated content attracts more traffic. If users are impressed and satisfied with your content they will automatically cast a vote. The most important thing is not code, not page rank but the content. It is said "Content is the king" The greatest challenge should be to create websites that are useful to others.

Erwin Selian said...

Thanks for useful information...