How to: Add Google Video Bar to Blogger Beta
Following the promise on a BuzzBadge given to Google Video Bar, Here is the full guide on how to insert a Google Video Bar into your Blogger Beta blog (thanks to GSVideoBar Solution). First of all, I must declare that I am not a programmer nor a coder. I am just an average blogger who knows a bit of code here and there. So, I am not going to explain in detail how each element or piece of code work (I don't understand them) and I assume that you know a little bit of HTML and CSS.
Before I start, here are the references that might help you clear some doubts. I managed to insert the Google Video Bar into this blog by putting their codes together:
- Google Video Bar Sample
- Google Video Search Solution
- Google Ajax Search API
- Video Bar on Google API Blog
Add Google Video Bar to Blogger Beta
Step 1: Get your API key ready
API is not scary. You don't need to understand what's an API key to make this work. I don't. But you need to have your very own API key. Ok, the Video Bar will fetch videos to your blog and display them as a list of thumbnails. In order for it to search and fetch the videos, you have to give it a key to enter the database (am I right?). Go here to signup for your API key. It is easy.
Step 2: Create a Widget to hold Javascript
This is easy too. Go to Template >> Edit HTML, scroll down to almost the end, find
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
Change maxwidgets='1' to maxwidgets='2'.
This will allow you to create a page element which you can then add a javascript element to hold the script.
Step 3: Load API key and Search Solution
This step is straight forward. Go to Template>> Page Elements, you will now see a new place to add page element, that's in your header. Click 'Add a Page Element', select 'HTML/JavaScript'. In the popup box, leave title to be blank, copy and paste this into the content:
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY" type="text/javascript"></script>
<link href="http://www.google.com/uds/css.gsearch.css.css" rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js" type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function OnLoad() {
var vbr;
var options = {
largeResultSet : true
}
vbr = new GSvideoBar(
document.getElementById("videoBar"),
document.getElementById("videoPlayer"),
options
);
vbr.execute("VW GTI");
}
</script>
See that vbr.execute? Replace "VW GTI" with the tag of the videos you want.
Replace 'YOUR-KEY' in the codes above with the Google Search API you just signed up for. Save the Page Element.
Step 4: Insert the CSS
Insert this into your CSS section:
#videoBar {
width : 160px;
margin-right: 5px;
margin-left: 5px;
margin-top:100px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
float: left;
}
You may do some styling if you know CSS.
Step 5: Show me the Video!
Go to Template >> Edit HTML, change
<body> to <body onload="OnLoad()">Then, below the widget code you entered just now, insert these lines:
<div id="videoBar">Loading...</div>
<div id="videoPlayer">Loading...</div>
This will tell the video bar and video player to load. Don't worry about video bar's position, you can adjust it in the CSS you entered just now. However, you may want to change where the player will load. Move the div with videoPlayer id to any place in your template you want the player to show.
That's it! Hope it works for you!
1 Buzzes:
I have found an even easier way to embed a Google Video Bar for showing YouTube videos.
I have written about how to set it up at
http://hayden-tennent.blogspot.com/2007/12/google-video-bar.html
Post a Comment