By putting Google Video Search in your blog you can enable your reader to search for videos without leaving your blog. He/She can view the videos in your blog and even upload their videos from your blog. Click below picture to enlarge it.
Above is a video of an octopus playing on my blog at Google Search Map site.
In your blog you will need a space for the Video Search Control. I have chosen the Minima template and given a float:left; property to the outer-wrapper so that I can locate the Google Video on the right hand side.
Your first step is to sign up for a Google API at : http://code.google.com/apis/ajaxsearch/signup.html With your key in hand, add the following three lines of code to your page or blog template. This key identifies your web site to Google and helps them track usage of Google Video. A new and distinct key is needed for each directory on your website that includes Google Videos.
Put a check in the box where it says I have read and agree with the terms and conditions and paste your blog url in the text box below and click on Generate API Key button.(Step 1)
Copy paste this code (ONLY THE BLUE LINES) just below the title tag in your template :
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY"
type="text/javascript">
IN THE ABOVE LINE ADD amp; AFTER BOTH THE & CHARACTERS OR YOU WILL GET ERROR MESSAGE.
Add your key number instead of YOUR-KEY.
<script src="http://www.google.com/uds/solutions/videosearch/gsvideosearch.js"
type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videosearch/gsvideosearch.css"
rel="stylesheet" type="text/css"/>
In the second step define a place on your page for the search control (note: you can have more than one). This is typically done by defining a named <div> element as shown below:
<div id="videosc">Loading...</div>
Set some styling attributes on this element to constrain the width of the control, set a border or margin, etc. For example in your css put the following code :
#videosc {
width : 300px;
margin-left: 10px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
border : 1px solid #f9f9f9;
}
To override standard player dimensions add the following code just beneath :
.playerBox_gsvsc .player_gsvsc {
width : 320px;
height : 260px;
}
Next find the <body> element on your page and add an onload handler.
<body onload="OnLoad()">
Add the following scripts just before the </head> tags
<script type="text/javascript">
function OnLoad() {
var options = {
largeResultSet : true,
startupDelay : 100
}
new GSvideoSearchControl(
document.getElementById("videosc"), // container
defaultTags, // default tag array
loadTags, // optional load function
saveTags, // optional save function
options // optional options
);
}
function loadTags() {
var tagStrings = GSvideoSearchControl_JSON.stringify(defaultTags);
return tagStrings;
}
function saveTags(tags) {
//alert(tags);
}
</script>
<script type="text/javascript">
var defaultTags = [
{
query : "feed:top100",
label : "whatshot"
},
{
query : "big wave surfing",
label : "surfing"
},
{
query : "genre:comedy",
label : "comedy"
},
{
query : "mtv"
},
{
query : "christina aguilera type:music_video",
label : "christina"
},
{
query : "jessica simpson",
label : "jessica"
},
{
query : "vw gti"
},
{
query : "type:music_video",
label : "music videos"
},
{
query : "feed:top100new",
label : "whatsnew"
},
{
query : "ferrari f1",
label : "f1"
},
{
query : "toyota tacoma",
label : "mytruck"
},
{
query : "type:gpick",
label : "google picks"
},
{
query : "nascar"
},
{
query : "ads"
}
];
</script>
Save Template. View Blog.
Click on individual videos to play them in the player.
Conduct your own searches through Google text box.
Check it out in the right sidebar at the bottom here at Google Search Map site.
This is what itlooks like :
Technorati Tags:google, google video, google video search
