Introduction
Integrate pictures into your page
Integrate video into your page
Integrate MP3s into your page
Integrate third-party rich media into your page
Making your own PodCasts
Introduction
One of the first misconceptions to get over with GooglePages is that you might think that it will host all your video and MP3s. It isn't designed for this kind of storage but it will allow you to build a page to point to the content that you have. Don't worry it's not as bad as you might think. There are plenty of free applications out there which will host your content for free and show you the code you need to insert into your GooglePages so that they will display. There are three main types of rich content you are likely to want to put into your pages. These are pictures, MP3s and Video. The limits on GooglePages are either 100 pages or 100 MB of storage.
One point to note, GPC will remove your advanced tags such as embed, javascript etc; so this document assumes that you will save your file to local disk, edit it and then do an upload.
Links to all of the services I've mentioned are contained in the top left rail.
Integrating Pictures
For pictures, you can use the free service Flickr which is the one that I am using. Create libraries of photos and then create badges which can be inserted into your pages. There is an example on the left rail. This code is auto-generated by the service based on your choice. Flickr is free and you can use your Yahoo User Id if you have one. The user interface is very intuitive. Create an album and give it an appropriate name. You can then decide if the album is public or private. If it's public, you can create either a Shockwave version or a HTML version. The code can be embedded in your GooglePages or other service. One of the nice features is that if you have a Blog, which many of us do these days, you can post your photos directly to your Blog. In the case of BlogSpot, Flickr will auto-generate an email known only to you and you can use it to post your photos to the Blog. You can then decide to embed the Blog inside your GooglePages. I have another write-up on this if you're interested in the left rail. Additionally, you can tag your photos for use with Technorati. The competitor with Flickr is BuzzNet which hosts both pictures and video. You'll see the video embedded below.
If you want to share individual photos you must choose a unique alias. Choose carefully as you're locked into it. Then using this alias, you can show people your alias or share individual pictures.
<a href="http://www.flickr.com/people/seadarie/">My Flickr Alias</a>
<a href="http://www.flickr.com/photos/seadarie/ 130491208/">Flying High Photo</a>
Another approach is to embed thumb-nails into your page. There are two types of thumb-nails. (a) HTML thumbnail. You'll see this on the left-rail (b) Shockwave thumbnail which is far more polished but you'll need the plug-in. It's not so much a big deal anymore in my opinion.
My Flickr Photos
This was my day out in BettysTown and I've explained this in the commentary on the photos. Once again, Flickr uses a Wizard style interface and auto-generates the code for you similar to Google AdSense. Then just cut-n-paste.
Recently, I returned from Bratislava, Slovakia where I took some some photos. Although Flickr is really nice and so too is Buzznet, you may not want your photos stored on a remote site - you want them stored locally in some designated stoarage site which you maintain. The advantage of this is that you don't have to go for the professional versions of the online software which you'd need to store your entire photo collection which could run into many hundreds over a few years. However, you want to put some photos into your Blog. Using Blogger there are two ways to do this (1) A manual upload (2) Install Google Picasa on your machine and use it to publish the pictures to your Blogger Blog. I've done both (1) is very manual and tiresome (2) is great because Picasa indexes all the photos on your machine and let's you know which ones are most recent. There are other features other than Blogging pictures in Picasa but I'll discuss this one now. Plus, you can add as many photos to your Blog as you'd like within reason. Picasa is a standalone program that you download onto your PC. It takes the perspective that you own the photos and don't want another service to own them. Take a look at my Blog entry Using Picasa for Pictures which has a few Picasa-added photos inserted.
Once you have them imported into your Blog, you can then link to them in
your Web page. You don't have to place the pictures in your Blog, you can use another
program which will host your media files. I discuss one such solution for MP3s but there
are many others.
You can also create Collages which are a nice effect.
ThumbNails. There has been some talk about how to create your own thumb-nails. There is a Shareware program which will create ThumbNails, called 'Eazy Thumbnails'. It will build your thumb-nails for you if you wish to build your own Web based solution. You can also save your thumbnails to a Web page using a HTML template that you can easily customize to create your own layouts, and there's helpful documentation that includes full instructions and some useful tips. Easy ThumbNails
A service I would recommend and one I saw promoted by a Google member, visit HuckTunes is PutFile. Register free to PutFile and it will store your media. It's free and gives you reasonable storage. Then you can pop it into your Web page. Here is where you can possibly store your pics and their equivalent thumbnails.
A nice aspect of this service is that you get a customizable home page based on your Web User Id, which in my case is Seadarie. See My PutFile Home Page which includes my rich media.
<a href="http://www.putfile.com/seadarie"> My PutFile Home Page</a>
<a href='http://www.putfile.com'> <img border='0' src='http://x402.putfile.com/ 4/11714355537.jpg' alt='Hosted by Putfile.com'></a>
So you can store your files here and save your GooglePages space.
I've also added some Buzznet photos from my back garden in the left rail. Buzznet is closely aligned with MySpace so if you have party photos it's a good place for them.
JAlbum for everything
Now, let's say you don't want to host bits on another site. You want to host it all on one site, video, pictures the lot... How can you do this? There's a great freeware tool out there called JAlbum which was recommened by a GooglePages member. Using this tool, it will generate all the html code, js, css - the works. I transferred my 26 photos from my trip into the product and it generated the main page and the thumbnails. I used a different 'skin' from the standard ones becuase it had a standard header and footer which I modified for my own purposes. Now, here's the kicker. It generated 126 files. So, if you're a googlepages user, you've just exceeded your limit with just one photo album. However, I signed up to a free web hosting service called freewebtown and it also has ftp access so I used the integrated ftp facilities in JAlbum to upload the pictures. There are lots of free sites out there but they don't have the cool 'Google' effect, so you might use other services for features like this and link out to them. That's the other thing. You don't get ftp access with googlepages so JAlbum isn't going to work too well with this. However, what it produces is quite wonderful and you own it all. Here's My Bratislava Trip Recorded Using JAlbum
Picasa for Thumbnails as well
You can also see my trip using the 'Save as Web Page' feature in Picasa. It produces less files than the JAlbum but is not as customizable. With time, I'm sure Picasa will have the same versatility. The main problem is that GPC has no ftp facility and it Picasa also uses folders which GPC doesn't support, so you're facing a pain-staking task if you want to convert this to GooglePages. I'm sure that GPC will offer this type of functionality further down the road to be competitive. I placed the ThumbNails here.
My FreeWebTown account linking to both Picasa and JAlbum view is here.
Integrating Video
For video, you can use either the free video.google.com service or the YouTube service which seems to be becoming the market leader at the present. You must submit your video for review and then when it is published, you can add a link to it. On my WebSite. Technically, the HTML code requires uses the embed and object tag. I'll show examples of this with each video feed.
Blog with working version of Video
<embed style="width:400px; height:326px;" id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf? videoUrl=http%3A%2F%2Fvp.video.google.com %2Fvideodownload%3Fversion%3D0%26secureurl %3DpAAAAJkyAUfS4Vm7krcp6sCLZ-SxNeElZVG7Ru AXxnxep20nNhn2K2pAEe-RvMHMX-jJX05PfZyLsj RSQjNlJvfOYVYzjVZji_vX_a_YsMrAWQmxlKlxlXL yuZnoI6YpDdELbI6iMZUS1icshzN3iyke5XXc7R spXNuE5aQuOPx5awlU3BFhLwKrgU9w4IGDL5FVe- kO8k6JLB23zHfEACB3x58hmWSW5scuG-5dsy6HE 8Ev%26sigh%3DrOoT8TYKGGzG_sot9l_qaPUMDBc %26begin%3D0%26len%3D67280%26docid%3D- 2523087432134733854&thumbnailUrl=htt p%3A%2F%2Fvideo.google.com%2FThumbnail Server%3Fcontentid%3D474561232418c9ad% 26second%3D5%26itag%3Dw320%26urlcreated% 3D1142940854%26sigh%3DYnAOKRIYZl780f0IqCQ rs6QBHJQ&playerId=-9132159771708180104" allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL" FlashVars="playerMode=embedded"> </embed>
Here's a YouTube example
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/RjrEQaG5jPM"></param> <embed src="http://www.youtube.com/v/RjrEQaG5jPM" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
You can also use BuzzNet
<embed src="http://www.buzznet.com/assets/ bnflvplayer2.swf?file=http://cdn-42.cdn. buzznet.com/assets/videox/1/1/5/2/2/ orig-11522.flv&clip=http://cdn-47.cdn. buzznet.com/assets/videox/1/1/5/2/2/ thumb-11522.jpg&autoStart=false" width="425" height="352" quality="best" scale="noScale" pluginspage="http://www.macromedia.com/ shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
PutFile Integration. You can't embed directly due to the bandwidth concerns of PutFile but you can link to your videos, including some funny ones. Funny Star Wars
Integrating MP3s
Tools for Recording
So, let's say you want to record a PodCast or some of your favourite music straight to the PC.
What program can you use that's good and is free? The SourceForge community have a program called
Audacity which I've used to record audio. I used a standard hand-held mike - which gave me the
best results when I tried.
SourceForge Audacity
You can save the results to .mp3 with an additional plugin which is very straight-forward.
I've found the .mp3 sound result better than the .wav and it's a lot smaller too, of course...
Storing Your Files
For mp3 music, I use the www.orbitfiles.com. Using this free service, I created an account. Once I did, I installed the hercules upload client and stored my data on the server. When the data is there you can share by means of a HTML link and then place it on your page. You'll get 1000MB of storage and no individual file should be greater than 30Megs which should be sufficient. You can password protect the file if you want. All of the services have this kind of granular control in case you only want to show to family/friends.
My Mp3 Audio Hosted on OrbitFiles
You can also use the embed tag which I tried but it slows up the page for demonstration purposes.
<EMBED src="http://orbitfiles.com/download/id7318847" autostart=true hidden=true>
This is an Audio story but it could just as easily be a music file.
The second approach I used it to use www.archive.org which is also free and a little bit more sophisticated but the choice is yours. You get space on a public FTP server where your audio can be shared and reviewed by other folks outside GooglePages. You can link to it from your GooglePages.
Spore Story with Audio stored on archive.org
The Archive.Org Listing
<a href="http://www.archive.org/ details/martin_brady_horror_story_spore"> The Archive.Org Listing
Note how it's much more logical and well structured but maybe too much for casual needs.
If you're a band, one good place to go the Garage Band where they'll host your mp3s and give you some exposure - but it won't be comletely free.
External feed integration
You can also embed music videos (or MP3,Pcitures) directly into your Web Pages. These are videos which are featured on the http://video.google.com service. I have other examples accessible from my main page which has YouTube content. This published video in a different way which is definintely worth a look at. The images produce another page. My site has examples of integration with Flickr which does photos and my iTunes and MP3 section has integration with PodCasts (MP3) and some free music from independent bands seeking exposure.
Making Your Own PodCasts
I've begun looking at how to make my own PodCast. Previously, I have written a couple of books so I gave myself the job of turning the first chapter of one into an audio file. Since then I've bought a book on the subject. The book is called PodCast Solutions the book on Amazon. I've hosted the file I produced on my GooglePages solution. It's about 7MB and it's the first chapter. Now, this is not the way to host a whole book but for now it's Ok for this example. You have to be aware of the bandwidth restrictions of whatever site you're using. I initially tried recording the story on my Dell XPS 600 machine but the Mic pickup was so low I was shouting into the Mic and I gave up out of frustration! I even dipped into my Pocket and bought a professional Condenser Mic a Marshall MX which was no better on the PC. I realized (in my case anyway) that the PC was not an ideal recording device. Out of sheer frustration I bought a digital voice recorder and on EBay I came across a European EBay shop called Luzern Tech, see Luzern Store on which I bought a Goodman's X-PRO GPRD-1 which was refurbished. Using this hand-held device I just speak into it and then I hook it up to my PC and it becomes a standard USB drive. It produces a WAV file. (Later, using Audacity I changed it to an MP3.)
I had no great expectation of the sound quality but it turned out Ok for my needs. The next challenge was once I got my 'PodCast voice' sorted by trying several recording I started to act out the lines a little. It was easier for me as I'd written the story so I had a good sense of how to deliver the lines but do not underestimate how easy it is to do a recording 95% Ok and then goof up a word here or there. For the editing process I used Audacity, on http://audacity.sourceforge.net/ which allows me to stretch out the recording and replace the lines I goofed up. The technique was to record onto my digital voice recorder and them simply cut out and paste my new lines in.
Longer term I'd like to put my whole book up on iTunes. To do this yourself, take a look at this link on how to make your own PodCast, see http://www.apple.com/itunes/store/podcaststechspecs.html
The story itself is called Engines Under Ursus and this is the recording
