Knowledge Exchange...: PHP Tip: Add Custom Google Search Results to Your Site with PHP

Have you ever wanted to integrate a custom google search on your site, and style it to your liking? Today, I will take you through adding custom google search results to your site with php.

What you need

Quickly...

Mike Migurski's PHP JSON decoder
allow_url_fopen set to On in your PHP.INI (many hosts have this on by default)
A desire to learn to be even more awesome than you already are

You'll end up with 2 files to make things work: search.php that shows a search form and results and querygoogle.php that pulls search results from Google. Put the CSS used in this tutorial wherever you want... if you want it.

How will this make your life better?

Being the awesome Web developer/designer/jack-of-all-tradeser you are and your clients know you are, you receive frequent requests to add a "little search box" as a part of your client's Web site. What follows is a twitch you disguise as a sneeze because you know you haven't got a solid easy-to-impliment custom solution that the client won't groan at.
But that'll all change now. Armed with a little PHP wizardry, we can turn you into a star. This is a ridiculously easy to implement solution for adding CSS-able custom results straight from Google to your client's Web site. And, we'll do it all in 3+1 easy steps. (note: please read Google's Terms of Use).

Step 1: The search form/page - search.php

Since computers can't yet read minds, we'll have to create a simple search form that includes a text field for the search query and a search button. This should be pretty ho-hum to you, but it's important nonetheless.
Notice the form posts to querygoogle.php. We'll create that script in step 2.

<form method="post" action="querygoogle.php"> 

<label for="searchquery"><span class="caption">Search this site</span> <input type="text" size="20" maxlength="255" title="Enter your keywords and click the search button" name="searchquery" /></label> <input type="submit" value="Search" /> 

</form>

Yeah baby! We've created a simple search form ready for any daunting search challenge. Let's create the real muscle be your custom search engine, the famed querygoogle.php.

Step 2: The script to query Google - querygoogle.php

Now the fun stuff you've been skip scrolling to see (I know your scanning tendancies!). I wrote this PHP script to take advantage of Google's AJAX Search API to provide a transparent, usable, branded experience to end-users. My customers were happy, and yours will be too. Save this PHP as querygoogle.php.
Here's what the code is doing:

Includes the JSON library
Sets up the URL that you will give you Google's search results. The URL includes your domain to make it a site specific search and the user's search query. The search uses Google's "site:domain.com keywords" search syntax
Uses fopen and fread to grab the JSON that results from a call to Google
Decodes the JSON into a PHP object with Mike's JSON library
Iterates through the object, creating custom HTML-formatted results
Sets a session variable that contains the custom HTML-formatted results to send to your custom results page
Uses PHP's header function to send the browser to your custom results page

<?php 

session_start(); 

  

// if you use an Mike Migurski's JSON library, include it like I did 

require_once('JSON.phps'); 

  

// Here's the Google AJAX Search API url for curl. It uses Google Search's site:http://www.yourdomain.com/ syntax to search in a specific site. I used $_SERVER['HTTP_HOST'] to find my domain automatically. Change $_POST['searchquery'] to your posted search query 

  

$url = 'http://ajax.googleapis.com/ajax/services/search/web?rsz=large&;v=1.0&q=' . urlencode('site:' . $_SERVER['HTTP_HOST'] . ' ' . $_POST['searchquery']); 

  

// use fopen and fread to pull Google's search results 

  

$handle = fopen($url, 'rb'); 

$body = ''; 

while (!feof($handle)) { 

$body .= fread($handle, 8192); 

} 

fclose($handle); 

  

// now $body is the JSON encoded results. We need to decode them. 

  

$json = new Services_JSON(); 

$json = $json->decode($body); 

  

// now $json is an object of Google's search results and we need to iterate through it. 

  

foreach($json->responseData->results as $searchresult) 

{ 

if($searchresult->GsearchResultClass == 'GwebSearch') 

{ 

$formattedresults .= ' 

<div class="searchresult"> 

<h3><a href="' . $searchresult->unescapedUrl . '">' . $searchresult->titleNoFormatting . '</a></h3> 

<p class="resultdesc">' . $searchresult->content . '</p> 

<p class="resulturl">' . $searchresult->visibleUrl . '</p> 

</div>'; 

} 

} 

  

$_SESSION['googleresults'] = $formattedresults; 

header('Location: ' . $_SERVER['HTTP_REFERER']); 

exit; 

?>

Important Note

We are having a small issue with the code syntax formatting, be sure the '&' signs in the url on line 9 above do *not* have a semicolon after them. Please see 'Renes' comment below for more. Apologies for the inconvenience!

Step 3: The results page - back to search.php

I know you're itching to see the results. So was I! Boy I wish I could do it all over again for the first time...
Anyway, the HTML formatted results are now stored in a PHP session variable from querygoogle.php. Groovy. All we have to do is display them and add some more CSS to make the results look sexy.
Make sure you can pull the results from the session by verifying that you are starting the session at the beginning of search.php and then echo the results. See below for the final search.php code (we started it in Step 1):

&lt;?php 

session_start(); 

?&gt; 

  

<form method="post" action="querygoogle.php"> 

<label for="searchquery"><span class="caption">Search this site</span> <input type="text" size="20" maxlength="255" title="Enter your keywords and click the search button" name="searchquery" /></label> <input type="submit" value="Search" /> 

</form> 

  

&lt;?php 

if(!emptyempty($_SESSION['googleresults'])) 

{ 

echo $_SESSION['googleresults']; 

unset($_SESSION['googleresults']); 

} 

?&gt;

Your search results work! But they're ugly. Here's some sexy CSS like I promised to get your started.

body 

{ 

background-color: #000; 

color: #ccc; 

font: .75em/1.5em Arial, sans-serif; /* EMs calculated with pxtoem.com */

padding: 1.5em; 

margin: 0; 

width: 40em; 

} 

  

.searchresult 

{ 

padding: 1.5em 0; 

border-bottom: 1px solid #333; 

} 

  

.searchresult h3, .searchresult p 

{ 

margin: 0; 

} 

  

.searchresult h3 a 

{ 

font: italic 1em Georgia, serif; 

color: #f30; 

border-bottom: 1px solid #900; 

text-decoration: none; 

font-weight: bold; 

font-size: 1em; 

} 

  

.searchresult .resultdesc b 

{ 

color: #fff; 

} 

  

.searchresult .resulturl 

{ 

color: #666; 

font-size: .75em; 

}

If you'd like to style your own results your way, each result will be placed in the following HTML format:

<div class="searchresult"> 

<h3><a href="page-url">Page Title</a></h3> 

<p class="resultdesc">Page description/highlights</p> 

<p class="resulturl">URL that google always shows in green</p> 

</div>

Step 3+1: Celebrate!

Congratulations! Your clients are happy. You've worked hard and you should take some "you time."

Need Web Hosting?

If you're looking for a quality web host, check out Web Hosting Search for an array of quality hosting services.
If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!

Knowledge Exchange...