Friday, December 5, 2008

How to show WWSGD text in Blogger

I've been doing quite a bit of reading regarding the ins and outs of blogging, search engine optimization and building readership. In the course of this, I read 21 Ways to Make Your Blog or Website Sticky. In that article, Darren Rowse mentioned a WordPress plug-in by Richard Miller called What Would Seth Godin Do. Based on an observation by Seth Godin, this plug-in allows customized messages to viewers based on the number of times they visit your site.

Intrigued by this idea, I set off to find something similar for Blogger (a.k.a. Blogspot) based sites. After a lot of searching, I failed to find anything. I figured it couldn't be too hard; I'd just roll my own. It took a bit more work than I expected, but I finally came up with my own variation. There is no code shared at all with the WordPress plug-in; it's simply similar functionality inspired by Seth's observation and Richard's implementation. The following explains how to configure a Blogger site display different text based on a user's visit count.

First, go into the Layout tab for your site and then the Page Elements sub-tab. Click on Add a Gadget. Select the HTML/JavaScript option. In the Content section, place something like this:
<div id="NewVisitor" style="display: none;">Thanks for visiting! Use the RSS feed or e-mail subscription to keep up to date on what's happening on this site.</div>
<div id="ReturningVisitor" style="display: none;">Welcome back! We're glad you enjoy our writing. If you especially like a particular article, please consider casting a Digg vote. Thanks!</div>
I'm no copywriter and obviously you'll want different text, but the important thing is to have two div sections with IDs of NewVisitor and ReturningVisitor, and with a style attribute for both set to display: none;. When the page is loaded, one section or the other will be changed to visible based on the result of a cookie.

Except for the limitations of ID and style, the rest is normal HTML. You can put things that are common to both text sections outside the div sections. Inside the div sections, put things you want displayed for the context identified by the ID attribute.

Save the gadget. Since the text is inside a gadget, you can move it to where you want it to display.

Next, select the code below and copy it to the clipboard. Then go to the Edit HTML section of your blog configuration and scroll down through the template code until you find the line that says <body>. Just above this line, there will be one that says </head>; paste the copied code just above the </head> line.

<!-- Start of script for "WWSGD" div manipulation -->
<script type='text/javascript'>
function getCookie(c_name)
{
  if (document.cookie.length > 0)
  {
    c_start=document.cookie.indexOf(c_name + "=");
    if (c_start != -1)
    {
      c_start=c_start + c_name.length+1;
      c_end=document.cookie.indexOf(";",c_start);
      if (c_end==-1) c_end=document.cookie.length;
      return unescape(document.cookie.substring(c_start,c_end));
    }
  }
  return "";
}

function setCookie(c_name,value,expiredays)
{
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie=c_name+ "=" +escape(value)+
      ((expiredays==null)
        ? ""
        : "; expires="+exdate.toGMTString()+
      "; path=/");
}

function checkCookie()
{
  wwsgd_count=getCookie('wwsgd_count');
  if (wwsgd_count == null || wwsgd_count == "")
  {
    wwsgd_count = 0;
  }
  else
  {
    wwsgd_count = parseInt(wwsgd_count);
  }
  setCookie('wwsgd_count',wwsgd_count+1,365);
  visibleTag = 'ReturningVisitor';
  <!-- This will show the "new visitor" text three times.
      Change 3 to the desired value. -->
  if (wwsgd_count &lt; 3)
  {
    visibleTag = 'NewVisitor';
  }
  divToSee = document.getElementById(visibleTag);
  if (divToSee != null)
  {
    divToSee.style.display = "block";
  }
}
</script>
<!-- End of script for "WWSGD" div manipulation -->

(For those with sharp eyes, JavaScript's less than operator is encoded above. This is by intent. It needs to be encoded in the Blogger template when it is saved. It gets converted to a real less than sign and used properly when it is sent to the client's browswer.)

Finally, on the <body> line, before the closing ">", add onLoad='checkCookie()'. When done, this line will look like:
<body onLoad='checkCookie()'>

When these three things are finished, the site should show the items inside the NewVisitor div section the first three times it is visited. After that, the items inside the ReturningVisitor should be displayed. If you want a different count for the first message, change the numeral 3 in the script (indicated by a comment) to the desired number. If cookies aren't enabled, then nothing will be displayed.

Leave a comment if you have any thoughts or find this useful. Thanks!

Resources

Thanks to the following for information found useful in the development of this tool:

15 comments:

Anonymous said...

my goodness..this is unbelievable.. its so easy to do, and works like a charm.. I tried it with a test blog of mine, and works perfectly.. thanks a ton for posting this..

Anonymous said...

Good post..I will certainly try it out..

Paralegal Mentor said...

I am no techie...but this worked! I'm always pleased with myself when I can work with the html language.

Erika said...

Thanks for sharing this. I admit that I'm a wanna be tech person, so I know just enough to be dangerous.

I tried putting the code into my template, but my quotes keep getting changed to " and '

How do I prevent this?

Harley Pebley said...

Erika,

I'm sorry, I'm not sure what you mean by "my quotes keep getting changed to " and '". I don't understand what you mean by "my quotes" since the " is the quote character (' is the apostrophe character). What is it that is getting changed to these characters?

Patti & Dave Alexander said...

Nice help for blogspot to the "What would seth godin do" widget. I was told that I had to change to wordpress to enjoy this feature. This widget works great... I just followed your instructions.

Anonymous said...

Wow. So simple an it's works perfectly! I just implemented this in my blog.
Thank so much for share this!

Unknown said...

Awesome tool - I love it. I was able to set it up and I know nothing about HTML!

Me said...

Thanks for the plugin.

Amanda Hunt said...

Help! there is no < body > in my template on blogger, just a < / body > and it doesn't have < / head > above it at all. PS. I put spaces in the html because it won't let me comment with it done properly.

Harley Pebley said...

Hi Amanda.

I'm not an expert on blogger templates by any means, but I can't imagine there's a closing body tag without an opening one somewhere. However, because of the nature of HTML, depending on where your template came from, it may not be on a line by itself and easy to find by simply scanning.

I'd suggest using the browser's find command. Depending on browser and operating system, the key combination will vary but it should be something like Ctrl-F (Windows) or Command-F (Mac). In any case, you should be able to find it with the edit menu. Open the template editor so you can modify the template and go to the browser's Edit menu. When you select this option, you should get a edit box to type in your text. In this case just type in "body" and it should show you where that word is used in the template. There should be some way of moving to next and previous instances of the word. (E.g. little up and down arrows.) You may have to hit the next button a couple times to find the one you're looking for. As an example, my template has 9 occurrences of the word "body".

For example, in Chrome on the Mac there's a "Find" sub-menu with a number of different options. In this case you want the "Find..." option. In Chrome on Windows, clicking the little wrench icon button will give a menu that has "Find..." about half way down.

Sorry, don't have other browsers handy, but hopefully that'll get you in the right direction.

Hope that helps. Let me know how it goes.

Unknown said...

Im inspired with the exceptional and instructive contents that you provide in such short timing.
www.c2logix.com

Karen said...

This is really a great implementation, and exactly what I needed for my fictional character's story journal.

Since the story is told from her first-person perspective, and the site's front page is the blog posts, I wanted something that could pop up a little notice that would point new visitors to the Introduction page which explains the fictional nature of the content.

I'm going to tinker with the CSS later, to try and work in some of the style elements of my blog's template so the section that pops up 'looks like' it belongs in the site, but the raw implementation described in this post worked perfectly!

Thanks for posting it!

Karen said...

Well I played with it some more, and it came out great! I found that I could remove the "returning user" message, and it would simply show nothing after the first few visits.

If I had one request, I'd wish for it to count "days" since the cookie was created, rather than page-loads, since the widgets on a blogger template load every time you click a link within the site, you can get to 5 pageloads just by clicking pages.

Harley Pebley said...

Karen, I'm glad it worked so well for you. I like your idea about counting days instead of visits. I think ideally it'd really be a combination of the two. I'll have to think about it.