Powered by Blogger.
Menu :
Showing posts with label Google Custom Search. Show all posts
Showing posts with label Google Custom Search. Show all posts

Custom-search-engine adds an "overlay" results layout

This quick-tip is about a new overlay results format which Google Custom Search Engines have just introduced - and which looks like it will be their new standard. 


quick-tips logo
Custom Search Engines have announced a new layout - which appears to have become their new standard option.

Search-engine creation is much the same as it was, but at the end you only get one piece of code to install, and it can just go in the place where you want it (no more messing with editing the <header> in your template).

The search results page is shown as an overlay on top of your regular page.  As always with custom-search-engines, there are ads-by-Google at the top of the page, and if you have already become an AdSense publisher you can use your custom-search-engine to share the revenue.

The big question is - will this new layout approach work in Blogger?    If I was writing an article, I'd test it out somewhere else first, and have some advice about the options, likely problems etc.   But since this is only a quick-tip, this post is my research!   Below, you should see a search-engine, which is set up to search inside Blogger-HAT.   Search for something in it, and you will hopefully see how the overlay search results work.    (If not, I'll come back and change this post as soon as I know more about the problem and how to solve it.)

See an example of custom-search-engine overlay results format

Try it out here:







Is this layout better?


If the layout works, my next decision is whether I should switch the overall Blogger-Helper-Search tool over to use it.

 What do you think?   Like the overlay search results approach, or hate it?

Custom Search Elements won't support iframe for much longer - change to new options now

This article is about changes made to Google's custom search engines made in June 2011, and the implications for Blogger users who have been using the iframe option to show search results inside their blogs.


Previously I've explained how to make a Google custom-search engine for your blog,  This is particularly useful for AdSense publihsers, because it lets them have a share of the revenue from the advertising displayed inside Google search results.

In June 2011, Google's Custom Search team announced some new options for displaying search results.  Overall these are a step forward, but they do include removing the "iframe" option which, until now, has been the only way that Blogger users who implemented a custom-search could display the search-results inside their blog.

As a result, Blogger users who used the CSE i-frame display option need to upgrade to one of the new displays.   This can be done now - it's not clear how much longer the iframe-based code will work for.

Also, Blogger users who don't currently have a custom-search in their blog but want to install one have some new options to choose from, as described in the New CSE Display Options.


What's happened for existing Custom Search Engines

If you already have a Custom Search Engine (CSE), you manage it  by logging in to the CSE control panel. If you have been using the iframe option and you go to the look-and-feel tab now, there is a new message like this:


It says:
Deprecation warning: The Iframe option is deprecated. We recommend the "Two page" or "Results only" layouts in the Search element as the new options. Please refer to our developer guide for a complete list of layout options.
"Depreciated" is web-developer speak for "we don't like this, and one day we will stop supporting it and wll do some new feature that makes it break".    In short, "we don't apprecaite this any more".

In short, the new message is saying that the iframe option will work for now, but you will need to change to use something else sooner or later.


New CSE results display options

Instead of the iframe option, Blogger users need to choose one of the options that are based on Google web-elements.   Choose Search-element under Hosting Options and you will be shown the new display options, which are:
  • Full-width - The search box and search results take up the whole width of the place(post, page or gadget) where you put the Search element.
  • Compact - Like the full-width option, this takes up the the entire width of the page or column, but the results section shows fewer results, so it takes up less vertical space. Google say that "this option is optimized for mobile devices, so it works well on Android, iPhone, or Palm webOS devices."
  • Two Column - The search box and the search results section are in places in your webpage, and to leave the search results section, a user must click on the X icon next to the search box.
  • Two Page - The search box and the search results are placed in two different places (posts, pages or gadgets).  In this option, the search results section also has search box, so visitors can submit further queries directly in the search results page.
  • Results Only - Search results are shown in the place (post or gadget) where you put them - but Google CSE doesn't give you a search box, you need to make your own.
  • Google-Hosted - CSE gives you the code for a search-box, and you put this into a post or gadget.  But then someone clicks search, they are taken to a Google-hosted webpage outside fo your blog, which can be opened either in the same window or in a new window.
Google have provided examples of each layout option.


How to install these into blogger

Follow these steps to choose one of the new display options, for either a new or existing Google Custom Search Element that is used in Blogger:

1)  From the Custom-Search-Elements, choose Control Panel, and then choose Look and Feel.


2)  Choose a layout option, by clicking on it.  The one you have selected is shown in a frame.

3)  Scroll to the bottom of the page, and click Save and Get Code

4) Install the code into your blog in the way specified by the option you chose:  some options have code for place where you want the search box and where you want the resutls, while others only have code for one of these.


How well do each of the options work with Blogger:

Full-width and Compact:

These options both display their results well inside blogger.   However the search-box is only shown on the same page as the results, so either
  • You need to put the search-element into a gadget that is visible the whole time, or
  • Searching your site becomes a two click process (on click to get to the search box, one to run the search), which will confuse some users.
But the search results look good - although the ads at the top blend very strongly into the results.

Two-column:
This option does not currently appear to work with Blogger (at least not when I tested it under Firefox 4 / MS Windows XP)

Two-page:
Inside Blogger, this appears very similar to the way that the iframe-results display worked:   to install the code, you need to say what page or post the results will appear on, and then you are given specific code to put into each of:
  1. The place (gadget or page or post) where the search-box goes. and
  2. The place (gadget, post or page) where the results go.
I haven't fully decided, but it's likely that this is the option I will use for the Blogger-Helpers-Search Tool.

Results only:
Again, inside Blogger, the results-only option is very similar to the Two-page option, with some key differences:
  1. There is no search-query bar at the top of the place (post, page, gadet) where the results are displayed, and
  2. You need to make your own search query form and to call the search from it.
It's very likely that I will use this option for several of my other blog-sites, where the search is always called from a gadget:   because the gadget will continue to be shown on the search results page, I don't need to put a search-form into the results.

NB  Having to make your own search-query may seem difficult, but there is a very simple way to do this, by using CSE itself to build the search-box code for you:
  • Choose the two-page option
  • Enter the URL of the post or page where you want the results to appear
  • Click Save and get code
  • Copy the code that you are told to install into where you'd like the search box to appear.
  • Paste that code into the appropriate gadget, post or page
  • Go back to the Look and Feel tab in CSE
  • Choose the results-only option
  • Click Save and get code
  • Copy the code that you are told to install into where you'd like the results to appear.
  • Paste that code into the gadget, post or page where you want to put the search results

Google-hosted
I have not investigated this option, because I want to have the search-results right inside my blog.


  

Related Articles:



Putting a Google Search Engine into your blog

Setting up AdSense for your Blog

Blogger-Helpers-Search-Tool - a customised search of high-quality sites

Installing HTML into your blog

Using a Google-search-engine to add a custom search gadget to your blog

This article is about adding a Google Custom Search Engine (CSE) to a blog made with Blogger.  However much of the information is relevant to putting Google-CSE's into other blogs and websites also.

Search vs Custom Search

Four stroke cycle compression
Blogger provides a search gadget that you can add to your blog the same way you add any other gadget.   This works well, provided your blog is public, and you have allowed Google to index it:
Old interface:  Settings > Basic > Let search engines find your blog = Yes.
New interface:  Settings > Basic > Privacy - edit > Let search engines find your blog = Yes

However if you want more control over how the search in your blog works or if you are an AdSense publisher and want to (potentially) earn revenue from ads on the results page then you need to use a Custom Search Engine.  (Or some other non-Google search engine might work too - but it's not what I'm covering in this article.)

A Custom Search Engine (CSE) is like a specialised widget:  you log into the CSE-editor and set up the search options, and then are given some code to put into your blog.   Setting up the options and putting the code into your blog isn't hard, but you do need to do a few specific steps to make sure the code you are given that works inside Blogger.

If you use a CSE, as well as getting a share of the AdSense earnings, you can also customize the search, eg by searching more than just the one site, turning auto-suggestion on, modifying searches with additional keyworks, adding refinements, changing the layout of results, etc.



Creating your Custom Search Engine

Follow these steps to make your own search tool, and install it into your blog.

Log in:

1  Go to Google's custom-search-engine application

2  Log in with the Google account that owns the blog

You can transfer a blog from one Google account to another one.   But there is not currently any way to transfer ownership of a CSE between Google accounts.   So if there is any chance that you might want to hand the blog over to someone else in the future, it's a good idea to make sure that items like this are owned by a Google account that can go with it.

3  Click the Create a Custom Search Engine button (currently a very large button near the top right of the screen)


Start your CSE:

4  A simple wizard opens, to help you create the CSE.  Fill in these fields on the first screen:
  • Name - what you will know it as
  • Description - describe what it's about (mostly so you know later on, I think)
  • Language - if your blog isn't in English, it's important to change this to the correct language, so that the search works correctly.
  • Sites to search:

    Enter your blog's URL.  

    Put  www. at the beginning, and  /* at the end (this says to search all of your blog, not just the home page) . 

    Example, the sites-list for the search on this blog is www.blogger-hints-and-tips.blogspot.com/*
  • Edition - unless you are willing to pay $US100/year, you need to select Standard edition. 

    This displays Ads-by-Google on the search results page.  But if you are an AdSense publisher you can link these ads to your account and earn revenue if they are clicked on.
5  Read the Terms of Service, and if you are happy with them tick the box and press Next.   One important rule (when this post was first written) is that Google needs to be the only search-provider on your site.   I don't know how strict they are about this - and I'm not about to put an Amazon search widget onto one of my blogs to find out.

6  Choose a Style

Test the search:
  • Enter a search-term
  • Click the Search button
  • On the screen, check that the search looks and works ok.   If not, search for words from a post entered several weeks ago, in case Google is behind in indexing your blog.
  • If necessary, go back and make changes.

You can choose different themes for the search results without re-running the test-search:  just click a theme and wait a second or two for the screen to re-draw. 

8  Create the CSE by clicking Next


At this point, the CSE-editor makes you think that you can use the HTML that is shown.  However there is more customising that you can do - and more that you must do if your CSE is going into a site created with Blogger.


Customize your CSE:

9  Click any of the options in the list to go to the CSE Control Panel for your Google account.   In this Control Panel:
  • The Basics and Sites tabs have a little more information than was in the set-up wizard, but you do not need to change them
  • Refinements and Promotions let you add extra functions to your search.  They are not needed for a standard blog-search.  Refer to Google's documentation (available from the tabs) for more about them.
  • Synonyms lets you upload a customised set of word-combinations that should be treated as equivalent in your search. 

    For example, in Blogger-hints-and-tips if I always use the word "gadget" in posts, it would be sensible for me to upload "widgets" and "page elements" as synonyms since they mean the same thing, and are terms that people are likely to search for.  However even though it would be sensible, I haven't actually uploaded this list, and the custom-search here seems to work well enough.
  • Autocomplete offers searches similar to the one your reader (appears to be) typing:  by default it's turned off, but if people who search your site a used to standard Google search (which now has it on) then it may be good to turn it on

    You also have an option to manually include or exclude certain auto-complete patterns  could be useful if your blog is in a niche with very specific terms for which the standard auto-complete option is totally wrong.
  • Look and feel:  this is is essential for custom-searches that are to be used in Blogger.

    Firstly, you need to choose a layout:   I've described the options for CSE screen layout for people who needed to convert existing CSEs to the most recent layout options, but the notes there will help you see what layout might be right for your blog.

    Second, under Choose or Customize a Style, you may choose a style:  by default it's set to the value you picked in the wizard.  There is also a Customize button, and this let you edit a number of features including the colours, how the Google brand is shown, and whether or not a logo is shown at the top of the search results.
  • Make Money:

    If you don't already have an AdSense account, you can apply for one from here.   Because you will be using AdSense for Search, rather than AdSense for content, the rules and processes are a little different to those for joining AdSense for your blog.

    If you have an AdSense account on the Google account that's making the CSE, then this connection is easy - just turn it on. 

    If your AdSense account is associated with another Google account, then you need to make the connection by entering the Google Account ID and certain other information that you've previously associated with the account, like phone number and postal code.:


Install:

10  Once all the customization is done, choose the Get Code tab.  Copy the HTML that is shown, and install it into your blog - either into an HTML gadget, or into a Post or Page.




Related Articles: 



Putting HTML from a 3rd party into your blog

Transferring a blog from one Google account to another

Setting up AdSense on your Blog

Showing image-only AdSense ads in your Blog

Finding a picture's URL in Picasa-web-albums.

Blogger Helpers' Search Tool - a customized search of Google Blogger experts

This article introduces the "Blogger Helpers Search Tool", which lets you search of a select list of blogs and websites that are known to provide excellent advice about using Google Blogger.  


Icon search updates 96x96
The "Blogger Helpers Search Tool" (BHST) lets you search within a selected group of English-language websites that give excellent help and advice about Google Blogger.

You can find it by choosing "Search Blogger Helpers" from the menu at the top of this page.

Why?

There are over a dozen "blogger tutorial" websites and blogs that I regularly follow using RSS - because they're a good way to hear about new ways to use Blogger, and what's happening with other related products.

And even though Blogger-Hints-and-Tips is also about Blogger, the sheer range of
  • Features in Blogger
  • Ways to combine Blogger and other tools (eg Facebook, Twitter, Google Docs, etc etc)
  • Levels of experience and ability to understand "how to" articles
means that no one can possibly know enough to help with everything that can be done with Blogger.   So I see the people writing these other blogs as colleagues, not competitors.

Also, when I'm solving a problem in my own blogs, I often think "Ahh, yes, I read something about that".   But often I can't remember if it was Chuck in The Real Blogger Status, or GreenLava in Blogger Sentral, etc, etc.

Putting these ideas together, I created a Google Custom Search that applies all the power of Google Search to a select list of blog-sites that I've chosen because of the quality advice that they give.   I set the custom-search up yesterday, then applied the advice in Blogger Sentral's recent article about putting the search results in a page, which looks far better than the old way of showing them in a standalone page hosted by Google.


Who's on "The List"

To start with, I've put in BHAT and the helper blogs listed under "Recommended Blogger help sites" on my sidebar, because these are the ones I consult most often.

I plan to add more helper blogs to the list over time.  I haven't written down all the guidelines for what's included yet, but to start with, I'm looking for sites that:
  • Show the date when an article was published or last updated   
  • Are in good-enough English  (some helpers speak other languages too)
  • Explain things well enough that I want to subscribe to see what they're going to write next.
Of course I cannot guarantee that the search-results are all correct and up-to-date:   as with any Google search, you must carefully assess the results and judge if they are good enough for you.


To see if a particular site is included:

Use the tool to search for
site:YOUR-SUGGESTED-URL
Because there are no keywords, the results will list all pages on the site that that Google's index currently  knows about - if the site is on the list.

If the results say "Your search - site:YOUR-SUGGESTED-URL - did not match any documents", then YOUR-SUGGESTED-URL is not currently in the search-list (or Google hasn't indexed it - this is unlikely, except if Google has banned a helper-site).   


To suggest a site to include:

Leave a comment below, giving the name and URL of the site, and a few words about why you think it should be included.  



Related Articles:



Blogger Helpers Search Tool

Setting up a custom-search for your blog.

RSS:  why it matters

Giving your blog a search-box

Linking blogs and websites