Adding Google AJAX Search API to your Blog
February 4th, 2010
Search is the way that content is found on the Internet, if your content can’t be searched in some way users simply won’t be able to find content particularly past content.
For some time now my blog hasn’t actually had any accessible search functionality, because the theme I’ve been using Simpla is a very minimalist theme (more of a template really). This is what I wanted since it is very small, clean and quick; but due to it’s simplicity some common features were left out. I have since sort to rectify this problem. After a little consideration and Googling I decided to use the Google AJAX Search API, firstly because it probably offers better results than the WordPress search and my server does not do the indexing and processing.
Google AJAX Search API
The Google AJAX Search API can return many types of search: Web, Local, Video, Blog, News, Book, Image and Patent. The most relevant for a blog search is Web search, to return relevant posts. There are of course restrictions for example the maximum number of results is 64 and you’re not allowed to modify the results, as far as I’m aware there is no query limit, which is good.
To get started you require an API key, which are free, Sign Up. The key will only work for the domain that you signed up with.
Basic Example
Firstly import the Google AJAX Search API:
<script src=http://www.google.com/jsapi?key=YOUR_API_KEY" type="text/javascript"></script>
google.load('search', '1');
The function specified in setOnLoadCallback is called once the library loads. This example specifies OnLoad function that creates a web search, tells the API to use an element called “results“ to display the results and then performs an initial search for “hello kitty”.
function OnLoad() {
// create a search control
var searchControl = new google.search.SearchControl();
// add just a web searcher
searchControl.addSearcher(new google.search.WebSearch());
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("results"));
// execute an inital search
searchControl.execute("hello kitty");
}
google.setOnLoadCallback(OnLoad);
Read more: Customisation, Adding to WordPress, Example search.php
Customising an AddThis Button URL for WordPress
September 21st, 2009
Altering an AddThis button on a per post basis is useful in wordpress when, from example, you want the reader to be able to bookmark a perticular post rather than the url of the page that the button is shown on.
AddThis button attributes
- addthis:url
- addthis:title
This particular solution invovles editing one or two php files in the theme directory (wp-content/themes/’active-theme’). The files to edit are ‘index.php’ and ’single.php’ Note: some themes don’t have a single.php.
Somewhere in the each of the php files is a loop that prints the posts content it starts with while(have_posts). Simply add the altered AddThis button code below in the place where you want to display the button.
<!-- AddThis Button BEGIN --> <a class="addthis_button" addthis:url="<?php the_permalink(); ?>" addthis:title="<?php the_title(); ?>" href="http://www.addthis.com/bookmark.php"> <img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/> </a> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END -->There we go hopefully that made sense should do if you’re familiar with PHP and the inner workings of wordpress themes.