Nov 7, 2009

Greeting Widget (Entrecard, Twitter, etc.)

You might have noticed a greeting message on this blog. You would see different welcome messages depending on whether you come from a search engine, twitter, or entrecard. This post describes how to install such a welcome widget in your blog or website. Installation is as simple as copy-pasting a code.

Credits for a welcome message to Visitors from Entrecard and Twitter goes to Laura from Reviewing Whatever. In fact I even copied parts of her welcome message. Her message is great and I didn't know how to improve on it. If there is any part of it you don't like, it's probably an addition of me.

This widget is an extension of my earlier Welcome Widget. Basically you just take the code below and put it in your template where you want the message to displayed. In blogger you can create a new HTML/javascript widget and paste the code in the box.

There are parts of the code you might want to change, especially the text of the welcome messages, where it says search_again.innerHTML=.

You should also change this line:
if (document.referrer.length > 0 && document.referrer.indexOf("myoutsourcedbrain.com") > -1) return false

This filters the URL of your own site from the referral URLs. In my case that is myoutsourcedbrain.com. Just write the main part of your address there. This is important. If you don't change it, the widget does not work as expected.

For easy installation in blogger click the widget button:


Here goes the code of the greeting widget:

<div id="welcome_message"></div>

<script type="text/javascript">
function getReferrer() {
  var Refer = document.referrer
  if ( ! Refer ) return false
  if (document.referrer.length > 0 && document.referrer.indexOf("myoutsourcedbrain.com") > -1) return false
  if (document.referrer.indexOf("entrecard.com") > -1) return 2 // 2 for entrecard
  if (document.referrer.indexOf("twitter.com") > -1) return 3 // 3 for twitter
  return 1;  // by default probably search.
} 

function getQuery(){
  var Refer = document.referrer
  q = Refer.match(/(q(([^=]*)|kw)?|p)=([^"&;]+)/)
  if ( ! q ) return false
  query = unescape( q[ ( q.length - 1 ) ] )
  query = query.replace("/</g,>/g", '&gt;')
  query = query.replace("/\+/g", ' ')
  if ( ! query.match(/\w/) ) return false
  return query
}

function yousearchedfor(result){
  if(result.responseData.cursor.estimatedResultCount>1) {
      var search_again=document.getElementById("welcome_message");
      search_again.innerHTML='<h2>Welcome Searcher.</h2><br/>According to google, for your query "' + query + '" there are <a href="http://www.myoutsourcedbrain.com/search?q=' + query + '">' + result.responseData.cursor.estimatedResultCount + ' results</a> on <i>My Outsourced Brain</i>. Please feel free to leave comments. If you like the site, you might want to subscribe to our feed to stay updated. ';
  }
}

function welcome_entrecard(){
  var search_again=document.getElementById("welcome_message");
  search_again.innerHTML='<h2>Welcome Entrecard Dropper!</h2><br/>I hope you enjoy what you see enough to explore for more than the few seconds it takes to drop your card. My Outsourced Brain features articles about topics ranging from technology and software to scientific research. Recent articles have been more focused on <a href="/search/label/blogger">blogging</a> help, including several useful <a href="/search/label/widget">widgets</a>, which I wrote myself. You can find many articles on <a href="/search/label/linux">linux</a>, phd research, and <a href="/search/label/software">software</a> or of general interest such as lifestyle, and <a href="/search/label/nutrition">nutrition</a>. I write occasional <a href="/search/label/book review">book reviews</a>. <br/>A good place for exploration are most visited articles, labels, the search, or the article archive. <br/>I try to post several articles a week, but life being what it is, sometimes I make it, sometimes not. If you like what you see, it might be worthwhile subscribing to the <a href="/atom.xml?redirect=false&start-index=1&max-results=500">feed</a> in order to stay updated.';
}

function welcome_twitter(){
  var search_again=document.getElementById("welcome_message");
  search_again.innerHTML='<h2>Welcome Tweeter!</h2><br/>I hope you enjoy this site. My Outsourced Brain features articles about topics ranging from technology and software to scientific research. Recent articles have been more focused on <a href="/search/label/blogger">blogging</a> help, including several useful <a href="/search/label/widget">widgets</a>, which I wrote myself. You can also find many articles on <a href="/search/label/linux">linux</a>, phd research, and <a href="/search/label/software">software</a>. You can also find topics of general interest such as lifestyle, and <a href="/search/label/nutrition">nutrition</a>. I write occasional <a href="/search/label/book review">book review</a>s.<br/>A good place for exploration are most visited articles, labels, the search, or the article archive. <br/>I try to post several articles a week, but life being what it is, sometimes I make it, sometimes not. If you like what you see, it might be worthwhile subscribing to the <a href="/atom.xml?redirect=false&start-index=1&max-results=500">feed</a> in order to stay updated.';
}


var refer=getReferrer()
if(refer){  // refer > 0 query true, means the visitor was referred from another web site
  switch (refer)
{ // refer is a number that indicates the referral web site
    case 1: // search engine
          var query=getQuery();
          if (query){
          var script = document.createElement('script');
          script.src = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='+query+'+site%3Awww.myoutsourcedbrain.com&callback=yousearchedfor';
          script.type = 'text/javascript';
          document.getElementsByTagName('head')[0].appendChild(script);}
          break;
    case 2: welcome_entrecard();
          break;
    case 3:
          welcome_twitter();
          break;
    default: // standard welcome message
  }
}
</script>


Download here.

Enjoy. Please leave a comment below for questions and suggestions.

6 comments:

  1. This is a very smart Welcome Message, is this only work for entrecard and twitter viewers?

    ReplyDelete
  2. Hi Emily, good question. It is easy to extend it to any other referral sites you like. The steps are 1. a new line in function getReferrer(), 2. a new case in the switch(refer) where it goes to 3. a new function welcome_yoursite() that contains the greeting. If you have a site and a greeting in mind, I could help you to set it up.

    ReplyDelete
  3. This is a cool idea, wonder if you could do a pop-up.

    ReplyDelete
  4. nice idea. I will try this in my blog also. I havent had an idea about we can do like this also

    ReplyDelete
  5. @Corran57: A pop-up is a nice idea. There are several methods to do this with small changes to the code above. Here are three:

    1. Alert pop-up. Usually ugly, but can be styled to look much better. In the code above, instead of search_again.innerHTML='...'; put alert('...');

    2. In a new browser window. Disadvantage: can be blocked by browser, bad manners? Implementation: in the welcome functions, again instead of the innerHTML line, you would place something like testwindow=window.open ("", "mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
    testwindow.document.write('Hello tweeter!');

    3. Use some other javascript library, for example facebox. See the section at the end, called "Controlling Facebox Programmatically."

    ReplyDelete