S3 tech blog

404

Visitors of a website could land in a 404 page because of a mistyped address, a bad link, a deleted page, etc. These are what you can do to improve your 404 page in a Web Application Development Project.

Being Helpful
People who visit your website must be those looking for the contents via a link and expect something from it. Then instead of showing a search form, a warning, or link to the homepage, we should think of a solution that can suggest a page by guessing where the visitor intended to go.

SUGGESTING THE RIGHT PAGE

One way to suggest a suitable page is to do searching and present the result via Google’s Custom Search API.

Google’s Custom Search API helps suggesting the right page

This is a tool allowing searching within an individual website. It allows you to retrieve the information that is regarded as the most relevant from your website. It does need a search phrase, though. So, to give Google something to search with, we’ll use the path of the URL that the user is currently on.

CAVEAT: LIMITS ABOUND

The free tier for this API has a limit of 100 calls per day. It is advisable to test it before implementing. While someone with a small website might be fine with this limit, paid upgrades are available.

Setting Up

Before using the Custom Search API, we need to let Google know who we are and get some access keys.

SEARCH ENGINE ID

First, register for your website before going to the 100 API request.

• Select “Add.”
• Input your website’s URL (yoursite.com) in “Sites to search.”
• Hit “Create.”

You now need to find your “Search engine ID.” Click “Edit” on the search engine that you created, then the “Search engine ID” button. Take note of that code!

Setting up the Google’s Custom Search API

DEVELOPER API ACCESS

If you don’t yet have a project, select the “New Project” option and fill in the form.

Under “APIs,” activate the “Custom Search API” by switching the “Off” button to “On.” Then, select “Credentials,” then “Create New Key,” and choose the “Browser Key” option. Take note of the API key!

JAVASCRIPT

Armed with both a search engine ID and an API key, you can now start hitting the API. The code below requires jQuery.

It does some AJAX JSON stuff, so I’d rather lean on the framework to ensure that it works across browsers.

Before creating functions, we should consider the environment that our code will run in. Because we’re writing JavaScript on the front end, our code might run alongside other plugins and scripts. So, let’s build a little space to cleanly separate our functions from everything else:

Within our custom search object, we can define methods and variables safely away from the global context. First, let’s set up some variables to use later:

Replace the keys with those we generated earlier.

Initially, we establish a local context by storing this in a variable. We’ll use this to access a show dialog method later.

Trying A Search

First, we’ll add a method that tries a custom search:

This trysearch method takes a phrase and sends it along with your keys as a request to Google’s API. The response is then checked, and the first link that it finds will be logged to the console. You would call it like so:

see something logged in your console.

GETTING THE SEARCH PHRASE

Next, we’ll write some code to get the path from the URL of the page. This path will become the search phrase.

Within the jQuery ready method, we’ll pick up the path name part of the current URL and create a search phrase from it. We’ll decode the URI, replace any forward slashes with spaces, and send the result to the trysearch method.

In the next article in vietnam Web Application Development, we will provide you with more presentation on how to:

- REPLACING STRINGS WITH JAVASCRIPT

- SHOWING THE REDIRECT

- SOME OTHER APPROACH 

- FALLBACKS AND OTHER STRATEGIES

Source: Smashing Magazine