« Previous | Next»

Seamless integration Google Search into Lifetype (Part 3)

Posted by coldtobi | 15 Aug, 2008, 20:47

This is the third part of the integration how-to. As an exercise, you can use the google search integrated in this blog to find the others. Just kidding, here is the list:

Getting a keyword

So far, you have configured yourself a CSE, and are ready to include it into Lifetype. For that, you have to modify the templates in two places: One to display the goolge search form and the other is the place where to display the results.

I tried my best to avoid messing with the PHP Code, and as a result, No line of code has to be changed. However, we still need to "trick" lifetype: As we use the template system, we use lifetype's engine to display the template for the results and just replacing the results with google's. So lifetype actually needs to perform a search, just to present us some results we'll replace with googles one.

The problem is, that lifetype is quite smart: It won't display results, if there is no or only one result. On zero hits, it will display an error page instead, and on exaclty one hit, it will display the article found.

So you need a search phrase which will return at least two articles. For example, on this blog "coldtobi" works very good. Just try some, and note down your keyword. We'll need it later.

Editing the templates

The following instructions are made to keep the down-time of the site as low as possible, by first editing temporary files and replacing the files on the server at the very last step. Though "designed to be safe", I urge you to make backups now. Don't forget your database!

To be safe and to reduce down-time of your blog, make a copy of your template directory: Just copy the whole directory of your template and name it like "<your_template>_work". This gives you the opportunity to switch to the new template within seconds.

There are basically two files to edit: One, where the search box is to be displayed and the other is the file to display the results. As this is depending on the template you are using, I can only give you guidlines where to look.

Displaying the search box

First, let's change the file which displays the search box.

If you use the YAML template set, you create a new file, lets call it menu_googlesearch.template and place it in the render directory. The contents of the file is the Google CSE Code, framed with some CSS to make it display nicely. (The below for an example.) 

To find the section for other templates, look line like this: (For the Standard template, this is in the footer.template, for the Spollo I found it in the header.template)

<input type="hidden" name="op" value="Search" />

The section containing this line is the one you need to replace with Googles CSE code. Make sure to remove all teh code for lifetype's search form: The section starts with <form>, then somewhere is the line quoted and finally ends with a </form> tag. (You got the CSE code when configuring your search engine. Make sure you use yours, and copy it. See the red code for an example)

<h2>Google {$locale->tr("Search")}</h2>
<div id="badges" style="float:left">
{ * start google code * }
<form action="http://blog.coldtobi.de/index.php" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxxx" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="16" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
{ * end google code * }
<br/>
</div> 

Displaying the results

The second file to touch is the one, which finally displays the search results.

For the YAML based set, you can create anothere new file, "render/ender_googlesearchresults.template". The content of this file is the code that Google gave you to display the results. Once again, make sure to take your own to avoid breaking Googles TOS.

<h2 class="post-title">{$locale->tr("search_results")} </h2><br/>
<div class="post-info">
{* start google code * }
<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 800;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
{* end google code *}

</div>

For other template, you'd usually edit searchresults.template and replace the code lifetypes is using to display the result with one google supplies. To know for what to look for, this is the code in the standard-template, that have to be replaced:

    {foreach from=$searchresults item=result}
        {assign var=article value=$result->getArticle()}
        <h3><a href="{$url->postPermalink($article)}">{$article->getTopic()}</a></h3>
        <p class="searchArticle">
        {$article->getText()|strip_tags|truncate:300:"...":false}
        </p>
        <p class="footer">
        {foreach name=categories from=$article->getCategories()
                 item=postCategory}
            <a href="{$url->categoryLink($postCategory)}">
             {$postCategory->getName()}</a>{if
                !$smarty.foreach.categories.last}, {/if}
        {/foreach}
        </p>
        {/foreach}

Up next....

Now all the template files have been modified. You might want to "fine-tune" them to display properly and blend into your existing design, but thats beyond the scope of this article.

However, the integration is not yet finished: We integrated the new search box and prepared the layout to display the results, but they are not yet linked to the lifetype system: If you hit "search" lifetype simply does not know what to do and it will just display the main blog. 

So the next part is, to tell lifetype to display the right templates when the CSE is used.

_ASIP_

_CLEARFIX_

Tips and Tricks, Lifetype | Comments (1) | Trackbacks (0)

Related Articles:

1 Comments | "Seamless integration Google Search into Lifetype (Part 3)" »

  1. led illumination :

    22/05/2010, at 05:41 [ Reply ]

    It would not only integrate the user experience but a wide scope for search engine interaction is there for sure.