Recently I was working on one of my forum sites arabxperts and I wanted to integrate Google AdSense for Search with the forum and display the search result in a vBulletin page. Its a nice convenient way to generate revenue while offering a Google search engine on the website. Since this is an Arabic forum site, I have changed the page direction to RTL, which is why you’re seeing the search result aligned to the right in the screenshot below.
So here’s what we need:
- Create a new PHP page
- Create an account on Google AdSense
- Create AdSense for Search
- Create a new template in vBulletin to display the search result
Create a new PHP page
The code below is based on a post you can find here. alright, so first I suggest you download a good editor like notepad++. Create a new file with it, copy and and paste the code below and change "gsearch" and "gsearchTemplate" based on the comments in the code, then save the file with .php extention. I’m calling my file/page gsearch.php, you can name your own whatever you want.
<?php
// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);
// #################### DEFINE IMPORTANT CONSTANTS #######################
define('NO_REGISTER_GLOBALS', 1);
define('THIS_SCRIPT', 'gsearch'); // << Change "gsearch" with the filename you'll be using.
// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array(
);
// get special data templates from the datastore
$specialtemplates = array(
);
// pre-cache templates used by all actions
$globaltemplates = array(
'gsearchTemplate', // << Replace "gsearchTemplate" with your own unique name that you want to use for the template
);
// pre-cache templates used by specific actions
$actiontemplates = array(
);
// ######################### REQUIRE BACK-END ############################
require_once('./global.php');
// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################
$navbits = array();
$navbits[$parent] = 'Search Result'; // << Replace "Search Result" with whatever you want to call your page, this will also be used for the navbar.
$navbits = construct_navbits($navbits);
eval('$navbar = "' . fetch_template('navbar') . '";');
eval('print_output("' . fetch_template('gsearchTemplate') . '");'); // << Replace "gsearchTemplate" with your own unique name that you want to use for the template
?>
Now that the page is done we can move on to finish the rest of the stuff.
Create an account on Google AdSense
This one is easy enough, just go here and follow the road signs.
Create AdSense for search
Login to your AdSense account and look for AdSense Setup, click on it then click on AdSense for Search. Now you should get the AdSense for Search wizard that helps you customize your search engine the way you want. Personally, I like the single page criteria as opposed to the wizard.
Change the settings for the search type, keywords, language and look and feel the way you want, or need as the case may be. Since everything is pretty much self explanatory, I am going to jump to Search Results Style. And since we want to display the search results in our own page, we’re going to change opening of search result page to open results within my own site.
So type in your domain and the page you want to display the search results on. In my case I called it gsearch.php, so it’ll be something like this http://www.yourdomain.com/gsearch.php
Change the Ad location and its colors, then give it a name and submit it to get the code. You should get a code for the search box, and another one for the search results.
Creating the template
Go to your vBulletin Control Panel > Styles & Templates > Style Manger > and from All Style Options dropdown menu click on Add New Template.
Now you specify the template Title, and since I used gsearchTemplate in the code above, then that’s what I need to use here. So you copy and paste the code below after changing what needs to be change (read the comments in the code), and you save the template.
$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<title>$vboptions[bbtitle]</title>
$headinclude
</head>
<body>
$header
$navbar
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">Title</td> // Replace "Title" with something meaningful like search results
</tr>
<tr>
<td class="alt1">Google Search Results Code</td> // Replace "Google Search Results Code" with the acctual code you got after creating the Search for AdSense
</tr>
</table>
$footer
</body>
</html>
Alright, so now everything is in place and all we have left is to put the Google Search Box code where you want to display it. Personally I wanted my Search Box to appear in the header, check screenshot 1. So I basically placed the Search Box code in its own table cell on my header. Below is what I have on my header, yours should be somewhat similar depending on where you want to display the Search Box:
<!– Header –>
<table style="background-position: right top; width: 100%; background-image: url(‘**********bluetech/misc/header_bg.jpg’); background-repeat: repeat-x;" cellpadding="0" cellspacing="0" height="140px" dir="rtl">
<tr>
<td>
<table cellpadding="0" cellspacing="0" height="140px" style="background-position: right top; width: 100%; background-image: url(‘***********bluetech/misc/header_logo.jpg’); background-repeat: no-repeat;">
<tr>
<td>
</td>
<td width="40%" style="padding: 20px"><div align="center">
<!– Google Search box –>
<form action="http://arabxperts.com/gsearch.php" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-*******************************" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="windows-1256" />
<input type="text" name="q" size="31" />
<input type="submit" size="20" name="sa" value="search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ar"></script>
<!– END Google Search Box –>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
<!– /Header –>
One thing I forgot to mention, is that you need upload that PHP page we created for the search to the root of your website, or whatever you specified when you created your AdSense for Search.
