Vanity URLs and orphaned pages: a few more options.

[Erik Woods]

John posted a tip on how to do a simple redirect. This works just fine, but if you want a few more options and an easier way to manage this sort of thing, check out my tip (below).

On the network I developed and manage (makinghealtheasier.org), our client wanted to have vanity URLs. They wanted users to be able to type in makinghealtheasier.org/SaintLouisCountyMOin their browser and have it go to the group page for that group (click on it, and notice the URL it redirects to). For custom pages, you can have totally custom URLs. However, all group URLs have to start with "group/" - so I had to write something custom to accommodate for this.

This is a modified (and simplified) version of what I am doing to fake Vanity URLs. It is in the Custom Code box (Developer Mode):

<script>(function($){
// Vanity URLs and Orphaned Pages v1.1 by erikwoods.com
// USAGE GUIDE: http://bit.ly/ningvanityurls
myWinLoc = window.location.href.toLowerCase();

if (myWinLoc.indexOf(".org/saintlouiscountymo") > 0) {
    showRedirectMessage("/group/saintlouiscountymo");
}

function showRedirectMessage(newURL) {
    $("body").append('<div id="show-redirect-message">Redirecting...</div>');
    window.location.href = newURL;
}
})(jQuery);</script>

The red part of the above code will store the current URL that the user is on and convert it to lowercase. I had to convert to lowercase, because it seemed to make a difference for groups or something. I cannot recall the reason at the moment.

The green code checks the current URL for the "vanity" (.org/saintlouiscountymo). Remember that I converted to lowercase - that is why it is lowercase here.

When there is a match, it calls a function (the blue code) and then redirects to the proper page (which is in the parenthesis).

Change the underlined parts to match your pages as necessary. This part could probably be written a lot better but I don't have the time. Someone else can feel free to make this script easier for non-technical people to use (like using regular expressions and arrays or something - heck, maybe I will update it when I find the time).

The blue part of the code is a function which adds a message to the page and covers the page with a plain white background and a message. (See attached screenshot.)

This allows me to set up "vanity" URLs without having to create a custom page for it. So, technically you are seeing a 404 error, with a white box on top of everything (again, look at the screenshot and it will make sense).

But you can't do it with the script by itself. You also need a bit of CSS to make the white box appear the way it does in the screenshot. No biggie - just add this to your CSS somewhere:

#show-redirect-message {
    background: #fff;
    height: 100%;
    left: 0;
    padding: 40px 0 0 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10;  /* increase this to something like 999 if 10 doesn't work */
}

You might be thinking "OK that's great, but what about those orphaned pages (changing one URL of a page to a different URL)?"

If you want to use this for orphaned pages, there's not much to change. In the example above, I am looking for a pattern of ".org/whatever" - you can change this to your orphaned page. Then the second underlined part is your new page.

Again, the benefit to doing it this way is that you manage all of your redirects in one page, and you do not have to create empty pages in order to do it, as shown in John's tip.

Enjoy! If you have questions, don't hesitate to ask. I just may not be able to respond right away.

[Erik Woods]

Note: I am also using this same sort of thing for "dummy" group redirects.
On this network, the client wanted a map of all the groups - they explicitly wanted to group GROUPS by state. So, I put a drop-down in place of the Location text box when you create a group so that they are restricted to selecting a state, and then I have a map at http://makinghealtheasier.org/page/communitieswhich will display groups based on state.

There was just one problem - there was one group which existed in three states. So what I did was create one dummy group for each state and then my script detects when they've gone to one of those groups, and redirects to the proper group. This had to be done since I could only associate one state per group. To see what I'm talking about, check this out: http://makinghealtheasier.org/groups/group/search?q=great+lakes

Notice that there are four groups. But three of them redirect and one of them is the actualgroup.

I am also doing this for another special case for Colorado here: http://makinghealtheasier.org/groups/group/listByLocation?location=... (but this one was for a slightly different reason)

[JFarrow]

interesting...trying to wrap my mind around it

[Erik Woods]

Let me know if there's anything I can do to help. I know it's a lot to take in if you're not familiar with JavaScript or the JQuery library.