[How To] Create Custom Google Search with custom result page in your site using vbulletin template

Hi,

One of my customers requested me to create a Custom Google search for him with custom results page in his vbulletin, so I decided to post this article here for vbseo members, I hope you like.


Step 1 : Creating a Custome Google search using Google Adsense :
------------------------------------------------------------------------

First You should create a custom google search via your adsense account based on you styles colors :

Method 1 (Old Google Adsense interface) :
------------------------------------------------

1.Login to your account , then go to AdSense Setup
2.Then go to : AdSense for Search
3.Then Select "Only sites I select" radio button for Search Type option ,
then write URLs that you wanna use with the custom search.
(exp: http://www.your-forum-name.com/ )
then enter your keywords in the optional keyword text-box (its optional)
then set "More options" as you want and click on Continue >
4.At this step you should select the Search-Box look , Personally I prefer the first one (Watermark type)
and then enter your desired "Text Box Length" (its not important because you are able to change it in future) then Continue >
5.At this step You should set the "Opening of search results page"
This is my personal settings :
>Open results within my own site (Note: You should select this option if you wanna have Custom Results page in your forum)
>Enter URL where search results will be displayed :
EXP:

Code:

http://www.Your-Forum-Name.com/gsearch.php

>Ad Location: Right ( set it as you want)

>And you should Set the Colors based on your Style Design.

Then Click on Continue >

6.Then accept the additional google terms and then name your search engine and click on Submit
--------------------------


Method 2 (New Google Adsense interface) :
-------------------------------------------------
Coming Soon...



OK, now you see 2 code-boxes and your are done with Google adsense account.

Step 2 : Importing the Search box code into your templates :
----------------------------------------------------------------
This step depends on you, for example I imported the search box code in Navbar Template for my client, but you can put it in any template that you want.

Example : Importing the Search Box code in Navbar Template :

Goto : Admincp > Styles & Templates > Style Manager > Expand the template that you wanna import the codes > Expand All Template Groups > Double Click on Navbar Template >

Then copy the navbar template codes in your favorite text editor ( like Notepad++)

Find

HTML Code:

<strong>$vboptions[bbtitle]</strong>
</if>

and add the search box codes that you have made in first step (the first code box from top in your adsense account)

so it will be like this :

Code:

            <div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong>
        </if>

                    
<div align="right">                    
<form action="http://www.forum-name.com/gsearch.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="Your-pub-ID:custom-code-from-google" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="25" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

</div> 


</td>

Note : The red code is the Google Search box code plus additional align right code that I added to the search box form.

Then Press Save.
Now you can see the search Box in your navbar.

Note : as I said before you can set the search box Length by editing (25) in below line :

HTML Code:

<input type="text" name="q" size="25" />

----------------
Ok , now you should create custom page for search results ,

Step 3 : Creating a custom page for search results :
-------------------------------------------------------

1.
first create a new php file and name it gsearch.php (it should be same name that we have set in Step 1> number 5)

and place the following code into it:

PHP Code:

<?php

// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);

// #################### DEFINE IMPORTANT CONSTANTS #######################
define('NO_REGISTER_GLOBALS', 1);
define('THIS_SCRIPT', 'gsearch'); 

// ################### 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(
    'gsearch',
);

// pre-cache templates used by specific actions
$actiontemplates = array(

);

// ######################### REQUIRE BACK-END ############################
require_once('./global.php');

// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################



$navbits = array();
$navbits[$parent] = 'Googole Search';

$navbits = construct_navbits($navbits);



eval('$navbar = "' . fetch_template('navbar') . '";');
eval('print_output("' . fetch_template('gsearch') . '");');

?>

and save this file,

Then upload it to your forum root.


2.

Now we should create a new template for our search results page :

Go to the style Manager in the Admincp. From your skin (and you will have to do this for each skin if they aren't inherited) Select 'Add New Template' from the drop down.

You should name this template : "gsearch" as we have set in SETP1/5 and in the php file.

and then place the following code into the template:

HTML Code:

$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Search - $vboptions[bbtitle]</title>
$headinclude
</head>
<body>
$header

<div align="center">
<form action="http://www.forum-name.com/gsearch.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="Your-pub-ID:custom-code-from-google" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="ISO-8859-1" />
    <input type="text" name="q" size="50" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

</div>
<br />
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
    <td class="tcat" >Search Results - $vboptions[bbtitle]</td>
</tr>
<tr>
    <td class="alt1">
<div align="left">

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 870;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

    
</div>
</td>
</tr>
</table>

$footer

</body>
</html>

You can edit this code and put your additional ads or etc.

Note :
I set the page width 870 (based on my style) , you can change it as you want :

Code:

var googleSearchFrameWidth = 870;

__________________________________
I hope you like this Tutorial.

Best Regards,
Ali.Ch.

Other tutorials of the same concept:
vb3: Making vBulletin search more prominent
vb4: Making vBulletin search more prominent

oh, I have not seen them Brian. Remove my post if its useless.

It's fine to leave. it's a slightly different approach.

I have installed this and it works perfectly well. But there are 2 issues that I am having right now.

1) Google Searchbox has different size in different browsers (Chrome and Firefox). By default I have set it to 25.

2) Google Search box background turns into secondary colour whenever we hover the pointer over it.

Will really appreciate any help to fix the issues. Thanks!

Google Chrome


Firefox

Goto : Admincp > Styles & Templates > Style Manager > Expand the template that you wanna import the codes > Expand All Template Groups > Double Click on Navbar Template >

no such thing..

Originally Posted by Globus

no such thing..

this part is the same for both vb3 and vb4 (I mean this setting exists in both) , but please note that this tutorial is for vb3.