Integrate and Display Google AdSense for Search within WordPress Pages » Search, Adsense, Google, WordPress, Page, Create » Online to Make Money!
The URL shortener service that pays you! Earn money for every visitor to your links.
Powered by MaxBlogPress 

Integrate and Display Google AdSense for Search within WordPress Pages

by tomveo on July 12, 2011 · 131 comments & , Views: 3470

Before You Continue, Check Out This HOT OFFER...


Make REAL Money In The Next 24 Hours - Click Here!

Place Google Adsense for Search code into your website will help to generate extra income for you

AdSense for Search Improved! Offer your users site search or web search while earning revenue from ads relevant to their search terms. AdSense for Search can be a good additional earning source for Google AdSense earning as long as the integration is done in right way. Base on my own experience, the best AdSense for search integration is that integrate it into blogs so readers do not need to leave our blog when do a search process. I hope it can help you to increase your Google AdSense earning.

Google AdSense for Search features the ability to let web publishers to open and display search results within the website itself. In other word, the results of a user search performed in Google AdSense for Search box will appear within a frame on a page from the site, so that rather the users need not to leave the publishers’ websites and being taken to Google, while still able to search for information with Google web search.

Beside, Google AdSense for Search also has Custom Search Engine that can be placed and integrated, together with the search results into website, and comes with more customization options such as search refinements, ads positioning, prioritize or limit sites to include in search results, change and modify the look and feel, collaboration with users, ability to create multiple search engine, make money with AdSense, and of course, ability to integrate into existing website and blog templates.

As Google AdSense publisher, I experience that AdSense for Search is a good additional for Google AdSense earning. Although the earning is not as big as the AdSense for content but At least, the search process can be monetized perfectly by using AdSense for Search. It is better than nothing, isn’t it?

Here  how to do perfect AdSense for Search integration with WordPress Theme:

  1. Generate new AdSense search code:
    First, login to your adsense account  (Click to Sign up for Google AdSense) and begin create your adsense for search code.AdSense for Search Account

    Under “Search Type” select “Only sites I Select” so that the search only returns pages within your blog. Under “Selected Sites”, type the URL of your blog. Leave the rest of the settings and click “Continue”.

     

    google-search-sites

    Pick the Search Box type:
    AdSense-Search-Box

    Insert the Text Box Length:

    AdSense-Search-Text-Length
    You can do any other customization of your personal Google search engine, such as color, logo, style, layout, language, Google domain’s country, sites to include, and etc.  In my case, I want a very discreet appearance so I chose the watermark version of the search box. I also changed the search box length to 22 so that it fits on my blog sidebar.

    When you get to the section labeled Opening of search results page, select the option "open results within my own site"  (Google AdSense for Search under Opening of search results page section)

    adsense-search-result-setup
    Key in the URL of the page on your site that the search results will appear. For WordPress page without page parent, the URL should look like this:http://www.yourdomain.com/page-title/ (Ex. with my site: http://tomveo.com/WP/google-search/).
    Note: trailing slash is insignificant, and can be dropped. You may change the “google-search” to anything else, but make sure you change the “Post slug” (Permalink) when creating a new WordPress Page for Google Search.
     Then, continue through the process of creating your adsense search code until you reach the final page displaying your search box code and your search results code. Both of them will be copied  (You must have both code, if not your configuration of search box is wrong).

  2. Create a new Google Search WordPress Page template and insert search results code into it
    There are many ways to make this step. But how incredibly simple you do the following. If you are using WordPress default theme:

    • Create a new text file with your text editor.

    • Copy and paste the following code into the new text file. The code creates a frame in the page to display Google search results.

      < ?php

      /*

      Template Name: google search

      */

      ?>

      < ?php get_header(); ?>

      your search results code

      < ?php get_footer(); ?>

    • Save the file as googlesearch.php and Upload googlesearch.php into your WordPress theme folder, “default” folder in this example.
      Note: If you are using other WordPress templates, you might need to edit page.php of your template, strip out WordPress code, and save as googlesearch.php at the folder containing the file page.php I am using WordPress Flexsqueeze theme:
      Template_google search

  3. Create a new Google AdSense for Search WordPress Page: 
    Create a new WordPress static Page by clicking on “Write” then “Write Page”. Key in Title as what you enter for URL to display search results during setup of Google search box above (e.g if you enter /google-search/ as URL for search results page, you will need to enter Google Search as page title). OK, type “Google Search” for the Page Title, but leave blank for the Page Content.
    Google Search WordPress Page
    On the right side, expand Template: and select “google search” (googlesearch.php) or whichever name you gave to the new template. Then, save and publish the page.:
    google-search-template
    Remember that you page-slug has to be exactly the same with the URL entered as shown in 1st step. In this example the Post slug is "google-search".

  4. Insert AdSense for Search box code into WordPress template: 
     

    Finally, edit your template: replace your existing AdSense search box code on WordPress template files with the newly generated search box code in 1st Step (put in the search box code to anywhere you like the search box to appear).

    Save your template files and upload to your server. The search results from Google is now integrated with WordPress blog. Whenever a user search with the Google search box from AdSense or Custom Search Engine, the search results will appear within your WordPress blog.

  5. Return to your Blog to test your new AdSense for Search results landing page. Enjoy!

AdSense-Search-Result

Bunus: How to replace Google branding from Custom Search Element

After you set up your Google AdSense for Search Ad unit, Google will present you with the following 2 code blocks for you to insert into your website. You will need to make a couple of changes to the Original Google AdSense for Search Code in order to get the site search to work properly.
Search Box Code:

<form action="http://yourwebsite.com/google-search/" id="cse-search-box">
 <div>
<input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxxxxx:cb1bf4gqimy" />
 <input type="hidden" name="cof" value="FORID:10" />
 <input type="hidden" name="ie" value="ISO-8859-1" />
  <input type="text" name="q" size="22" />
 <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>

Replace the following input box statement:

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

with the following input box statement:

<input name='q' onfocus='if(this.value==this.defaultValue) this.value=&quot;&quot;' onblur='if(this.value==&quot;&quot; ) this.value=this.defaultValue' size='36' type='text' value='Search More Related…'/>

you can replace value='Search More Related…' with your slogan. I do not know are we allowed to customize the Google Custom Search Engine (GCSE) or not, do it at your own risk.

How To Customize Google AdSense for Search Watermark Image And Search Button (do it at your own risk):

Google AdSense for Search-code-javascript

To change the watermark image, copy the javascript source link i.e http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en and open it in browser. When you will carefully look at the javascript code you can see an image link.

(function() q.style.background = ‘#FFFFFF url(http:\x2F\x2Fwww.google.com\x2Fcoop\x2Fintl\x2Fen\x2Fimages\x2Fgoogle_custom_search_watermark.gif) left no-repeat’; ; var f = function() q.style.background = ‘#ffffff’; ; q.onfocus = f; q.onblur = b; if (!/[&?]q=[^&]/.test(l.search)) b(); )();

We have to perform the following steps to change the watermark image :

  • First copy all the javascript code and paste it in Notepad.
  • Now change the watermark.gif image link with your own desired image.
  • Now save the file as google.js and upload it on web.
  • Now, go back to the GCSE code and replace the javascript code with your own edited code i.e:

edited-Google AdSense for Search-code

Customizing the AdSense for Search Submit Button:

Customizing the submit button is very simple, we do not have to edit any javascript rather we will tweak the CSS.

Open Edit HTML  and paste this code before of  ]]></b:skin>

#SearchButton
background:url(Your-Submit-Button-Image-Link-Here) no-repeat;
width:70px;

Please note : Change the width according to the size of the button image.

Now, in the GCSE code look for

<input type=”submit” name=”sa” value=”Search” />

and change it to:

<input type=”submit” name=”sa” value=” ” id=”SearchButton”>

Save it and finish! But: Use Google Adsense for Search code Modified at your own risk!

Originally posted 2011-06-08 15:56:00.

Related Posts:

Previous post:

Next post: