Adding a Google Custom Search Box To Your Web Page

4.2 Adding a Google Custom Search Box To Your Web Page
If there was one advantage that the old AdSense for Search had over Custom Search, it was the ease of implementation. There were no tricky decisions to make and not much choice in the way of optimization. You kept the Search button grey, picked a size that suited your website and pasted in the code.
If someone searched and clicked you got a little money as they left. If they didn’t search, or they didn’t click, you got nothing.

 

The Custom Search Engine offers a heap of formatting options — and those are only the ones available from within AdSense. Skip around AdSense and come in through the Custom Search Engine’s own site and you can go really wild with the optimization.
Sign in to your AdSense account using the new interface, and on the left of the screen, you’ll find a link marked “Content.” Below it is a link marked “Search.” That link opens up to two other choices: Custom search engines; and Custom channels.
The first of those two will put you in the search engine business.
You’ll need to give the search engine a name — any name will do — then decide whether you want the engine to search “the entire web” or “only sites I select.”
That’s not as easy a choice as it sounds. Choose the entire Web, and you’ll give yourself an easy time. You won’t have to run around looking for sites to recommend, and you won’t have to think about keywords to help target your search. But you also won’t be tweaking the search to make the results relevant, and you’ll be increasing the chances that the user will be served ads that are less than completely relevant too.
The problem for many new publishers though, is that the list of sites that they might want to include could be fairly small. You’ll want to include your own site, of course, and there could be a handful of others that you know and respect, but you’re going to need a good twenty or thirty sites at least before your search engine can deliver helpful results.
Start with just a handful to get going, and your search engine could pick up a reputation for being ineffective. Returning users who searched once and failed to find a good result because the pool of searched sites was so small will know to ignore it in the future, cutting you out of the income from their searches.
Using a Custom Search Engine properly then takes a little time and a little thought. A better option is to choose “the entire web” initially, then set aside a couple of hours to come back later, plug in the list of websites to search, add the keywords, and do all of the refinements that you can only do when you search selected sites.
That selectivity is particularly important for keywords. These aren’t difficult but they are vital. The keywords you provide for your search engine give Google a clue about the nature of your site’s topic. The example that Google likes to provide is a search for “tiger.” List keywords related to animals, and the search engine will list results about big cats. List keywords related to Copyright © 2011 Joel Comm and Flying Monkey Media, Inc. – All Rights Reserved
78
Macs, and Google will return results for operating systems. List keywords related to golf, and Google will return results about Tiger Woods.
You should throw in a few keywords initially to help keep your results focused but do come back and add to the list later. The more you can target your search results, the better you’ll target your ads — and that means more clicks.
Choosing the country should be fairly straightforward but remember that your choice should match the location of your users rather than your own location. A publisher based in the UK whose users come from the United States, for example, would be better off picking the United States as his country or territory.
Custom Channels are important, but you’ll want to create a unique channel for your search box. Just hit the “Create new custom channel” link, enter a name and you’ll be able to track the clicks your search engine generates separately.
That just leaves the Search box look and feel; and the Search results and ad location
The Golden Rule that applies to AdSense units doesn’t apply to the search box. You don’t have to blend the search box into the page in the way that you need to do with ad units. The Search box is an element on your Web page, not an ad, so it doesn’t matter if it stands out.
In fact, you want users to be able to find it.
When it comes to “look and feel” then, choose the option that best suits the style of your site. Usually, that will mean ignoring the gray and black background options, sticking with white… and scratching your head about where to put the “Google Custom Search” tag.
Fig. 4.1 Google’s Search options. Which of these will make you rich?
Putting the tag inside the field is a pretty good default and saves you real estate space on your Web page. But it’s easy to see how the title might help

a link unit to blend into a hot spot just beneath the search box. Start with the tag inside the field then, and if you’re thinking of placing a link unit nearby experiment with placing the tag outside afterwards.
The width of the field should match the width of the column in which you’ll be placing the search field. You want it to look nice.
The “Search results and ad location” is much tougher. You’ve really got two choices: stick with the default Google palette and you’ll send your users to a page that looks like something from Google, giving you the kind of clickthroughs that Google satisfies itself with.
That might be fine, especially if you’re offering to search the entire Web. It’s not a bad place to start your testing.
But the results will depend on the behavior of your users. If you’ve added keywords then the results should be better targeted. That might mean better targeted ads, but it could also mean better search results — and therefore less reason to click the ads.
Use the color palette to match the search results page with the design of your own website, adding your logo to the page as well, and the results page will look like content rather than a list of results from Google. Even the ads will look like links to articles on your site. That might give them some more clicks.
The only way to know for sure which of those two approaches — a Google page of search results or a branded page of search results — will be to test them. Start by letting users search the Web and see the results on a page that looks like Google. Next, restrict the users to seeing results from sites that you’ve chosen. Finally, match the design of your search results page to the design of your own site. Compare the results and you’ll know which option works best for your users.
The last decision you’ll have to make when you put an AdSense search box on your site is where to bring up the results page. You have three choices:
? On a Google page in the same window;
?
On a Google page in a new window;
?
On a page on your website, inside an iframe.
Combined with a branded search results page, I’ve found the last option to be the best. Not only do I get a page of search results that look like they’ve come from my site, I also get to surround them with my own navigation — and more ads too, I want.

You’ll need to tell AdSense the URL of the page on which to place the frame, the width of the results area and, most importantly, whether to put the ads top and right, top and bottom, or right.
Top and right is usually best, but once you’ve got the frame working on your site, those three positions can be tested easily.
You’ll be given two blocks of code: one for your search box; and the other for the search results.
Fig. 4.2 Users had to scroll past an entire screen of ads and links to reach the search results on one design of my site WorldVillage.com.

Putting a button ad at the end of a list

For example, you might have a list of links to frequently-read articles or other sites on one side of your page. Putting a button ad at the end of a list like that could help it to blend in well. The final types of text ads are those that run vertically.

These come in three sizes: skyscraper (120 x 600), wide skyscraper (160 x 600) and vertical banner (120 x 240). Clearly, these are useful options for filling up the sides of the page. I would also recommend using the ‘wide skyscraper’, text-only ads on the right hand edge of the screen — in conjunction with the 3-Way Matching I discuss later in the book.

That’s because most people are right handed , and even left-handed people like me control their mouse with their right hand —it’s just what we’re used to doing. Placing the ads on the right side of the page creates less distance between the right hand and the screen.

This ‘closeness’ makes the user feel more comfortable and therefore more likely to click through to a link. They feel more in control of their visit experience. It works!

contact

<iframe src=’/contact1/contactform.php’ frameborder=’0′
width=’100%’ height=’600′ ></iframe>

Slick Social Share Buttons

Add facebook like, twitter tweet button, google +1, google buzz, linkedin, digg, stumbledupon & pin it social media share buttons in a floating or slide out tab to any WordPress website with the Slick Social Share Buttons plugin.

Slick Social Share Buttons also includes a social statistics page in WordPress admin, which gives you complete share totals for each page, post and category page.

The plugin has a range of options giving you full control of position of button panel, size of social media buttons, display order and whether to show or hide the floating or sticky panel on page load.

The plugin gives you the choice to include the social media share buttons on:

WordPress Home page
Posts page if using static home page
Posts
Pages
Category Pages
Archive Pages

If you are looking for a non-Wordpress version, which can be used on all websites check out our jQuery Social Share Buttons Plugin – allows you to add all of the main social media share buttons to any web page.
Demos for WordPress Social Share Buttons Plugin

Plugin also used on this site – see social share buttons on left. Additional demos include:

Sliding Vertical Button Panel
Horizontal Sliding Button Panel
Top Vertical Slide Down Panel
Vertical Floating Panel
Bottom Floating Panel

Installation

Upload the plugin through `Plugins > Add New > Upload` interface or upload `slick-social-share-buttons` folder to the `/wp-content/plugins/` directory
Activate the plugin through the ‘Plugins’ menu in WordPress
Configure the plugin options via the “Social Buttons” menu option in WordPress admin -> Social Buttons
After selecting the button and plugin options click “Save” to activate the buttons on your WordPress website

Floating/Sticky Tab Options

The type and position of the social button panel can be configured via the plugin settings page in WordPress admin:
Method

Select either a “floating” panel or a sticky “Sliding” tab
Location:

The position of the social button panel in the browser window:
Position From Center

Only available if using floating buttons. Check this if you wish to have the floating button panel positioned from the center of the page as opposed to the edge of the browser. In the text box enter the number of pixels that the panel should be positioned from the center of the screen. Useful for fixed width websites.

If not checked the position of the floating panel will be based on the edge of the browser – i.e. if the browser window is reduced the buttons will move towards the center.
Offset

Offset allows you to fine tune the positioning by adding the number of pixels that you would like to offset the panel from the edge of the browser window.

For sliding tabs only one offset is used:

Top-left & bottom-left – number of pixels from left edge of browser
Top-right & bottom-right – number of pixels from right edge of browser
Left & right – number of px from the top of the browser window

Floating social buttons:

Top-left & left – pixels from top & pixels from left
Top-right & right – pixels from top, & pixels from right
Bottom-left – pixels from bottom & pixels from left
Bottom-right – pixels from bottom & pixels from right

Direction

Only applicable for “Slide Out” panels. This allows you to select whether the buttons are displayed horizontally or vertically.
Disable Floating Effects

If checked the floating style animation used for the floating buttons panel will be disabled and the panel will now stick to its location in the browser (only applicable to floating button panels)
Floating Speed:

The speed for the floating animation (only applicable for the floating type) in milliseconds – i.e. the time it takes to “catch up” when the page scrolls up or down) – e.g. to set the floating speed to 1.5 seconds use 1500.

The default speed is set to 1.6 secs.
Animation Speed:

The speed in milliseconds to open and close the button panel.

The default speed is set to 0.6 secs.
Auto-Close:

If checked, the panel will automatically slide closed when the user clicks anywhere else in the browser window
Load Open:

If checked, the social buttons will be displayed open when the page first loads. The tab will still close the panel when clicked.
Default Skin:

Check this box to use the default skin that comes with the plugin. To use your own styles uncheck the box and add the CSS to your theme’s style sheet. The default CSS file can be used as a template.
Tab Image URL:

To use your own image for the button panel tab insert the full URL for the image into the text field. Leave the box empty if you wish to use the default “Share” tab that comes with the plugin.
Page Display Options

Check the boxes of those pages/posts where you would like the social media buttons to appear:

WordPress Home page
Posts page – if using a static home page this will be the page that displays posts
Posts
Pages
Category Pages
Archive Pages

Excluding Individual Categories

For category pages you also have the option to specify any categories you would like to exclude from showing the social media buttons.

Click the “Show Categories” link to display a complete list of all categories on your website. Clicking on a category will move the category between the include and exclude lists.

Click the “Save” button once you have selected the relevant categories.

If a category is excluded the social media buttons will not appear on the category page or any post assigned to that category.
Social Media Button Options

To disable a button uncheck the checkbox next to the button name.

The size of each button and whether to display a count of total shares for that page can be selected from the dropdown menu. A sample showing an actual, active button with the selected settings will display in the right-hand column.

The buttons will display on the website in the same order that they are listed in the settings page. To change this order drag & drop the buttons and arrange as required.
Current Supported Social Media Share Buttons:

Twitter Button
Facebook Like
Google +1 Button
Google Buzz Button
LinkedIn Button
StumbleUpon Button
Digg Button
Pinterest “Pin It” Share Button

In addition to the basic settings some Social APIs require additional information.
Twitter

Input your twitter username (minus the ‘@’ symbol) to include this in the tweet.
Facebook

The facebook like button includes the option to use either the iFrame or xfbml methods of adding the button.

If you select the xfbml version you must add the following settings:

Either a Facebook App ID or a Facebook Admin ID – although both can be entered you only need one for the xfbml version to work.
Default Facebook Image – enter the URL for an image that will be entered into the facebook open graph meta tag in the event that a post thumbnail is not available for the page.

Google Buzz

The “Default Google Buzz Image” option allows you to enter the URL for a default image, which will be used if a featured image in your blog post is not available. This is not a required item and can be left blank.
Pinterest.com Pin It

The “Default Pin It Image” option allows you to enter the URL for a default image to use for the “Pin It” button if a featured image in your blog post is not available.
Twitter URL Shortening

The plugin includes the option to select URL shortening for twitter from several services:

Bit.ly
Digg
Su.pr
tinyurl

If using bit.ly the API Key and account login must also be entered. For su.pr these are both optional.