Add a web counter!

Jun 18, 2001 01:35

Prereq
GLOBAL_HEAD tutorial
Basic HTML knowledge

Counters, counters everywhere! It seems that the hit counter is just about as ubiquitous as the web itself!

LiveJournal doesn't currently offer a counter system of its own, but if it does you can be assured that will be a paid accounts only feature.

Instead of overriding the usual GLOBAL_HEAD element of your journal, we're going to look at a separate part of your LASTN journal page, the LASTN_WEBSITE element (if you want to add a counter to other pages, change LASTN_WEBSITE to FRIENDS_WEBSITE, CALENDAR_WEBSITE or DAY_WEBSITE as desired). In the past LiveJournal used to allow simple HTML in the website field of your edit info page, but since it was never intended to be that way, it was reversed to only allow a simple link to your webpage.

If you don't have a website, you can easily put in the URL to your journal in the website field on your edit info page.

The next thing you have to do is to grab a counter from thecounter.com, or from any other counter service that doesn't rely on javascript to work. When you first get your account with thecounter, you'll be given the source code that you'll need to put a counter on your page; ignore all of the lines between and look for the element . Inside, you should find an anchor tag wrapping around an image tag like so :




where ****** = the id number given upon your counter's creation.

The best way to explain thoroughly is to show you the basic over-rides:
  • Remember, you have to be careful as to which LASTN_WEBSITE over-ride you choose. Using one over-ride with a different style might yield disastrous results (not really, but I'm stressing a point here ;-)
  • I didn't include the over-rides for the generator style because they came out pretty ugly, and the NotePad style doesn't include the LASTN_WEBSITE field


Default Journal LASTN_WEBSITE over-ride

LASTN_WEBSITE<=




%%name%%

<=LASTN_WEBSITE


Punquin Journal LASTN_WEBSITE over-ride

LASTN_WEBSITE<=
> %%name%%




<=LASTN_WEBSITE


Tabular Indent LASTN_WEBSITE over-ride

LASTN_WEBSITE<=
View: Website (%%name%%)


.
<=LASTN_WEBSITE


Webley LASTN_WEBSITE over-ride

LASTN_WEBSITE<=
[ %%name%%


]
<=LASTN_WEBSITE


Generator LASTN_WEBSITE over-ride (Thanks to braindrain)

LASTN_WEBSITE<=






[
website
|
%%name%%
]

<=LASTN_WEBSITE


Refried Paper LASTN_WEBSITE over-ride (Thanks to macheide)

LASTN_WEBSITE<=

my website





<=LASTN_WEBSITE


Disjointed LASTN_WEBSITE over-ride (thanks to crschmidt)

LASTN_WEBSITE<=

%%name%%




<=LASTN_WEBSITE


Clean and Simple LASTN_WEBSITE over-ride (thanks to shiningkianna)

LASTN_WEBSITE<=
  • %%name%%




  • <=LASTN_WEBSITE

    Links :

    WebMonkey's basic HTML tutorial
    GLOBAL_HEAD tutorial

    Follow Ups

    TheCounter
    If you've had trouble with getting the counter from http://www.thecounter.com/ to work, it might be that you need to change a little bit more than just the ID number in my sample code. If you go back to thecounter's site and login, you can request to view your sample code by clicking on the config tab (very small type, on the mid-left hand side), and clicking the link to Html code. In the popup window, you will see sample HTML code - you need to find the portion between the tags, because this is the only thing LiveJournal will accept. Copy that portion over the link and image tag, and everything should work.

    There are also many other counter systems you can use; thecounter.com was just a simple example to work from. You may wish to look for counter services using your favorite search engine.

    SiteMeter
    Sitemeter should work if you try the regular HTML codes. When I sign into their site, I see a menu on the left with the link "HTML Code" in it. When I go there, and click on the "Using NotePad or another HTML editor", it gives me all the code I need near the bottom of the page. I guess it should look similar to:




    - punquin, - webley, counters, - clean and simple, - default, - generator, - disjointed, - refried paper, - tabular indent

    Previous post Next post
    Up