This is the seventh in a series of articles which will be put together as a guide to creating Google gadgets. To see a full index of all gadget lessons, please see the Google Gadget Tutorial.
In lesson six we learned that Google gadgets can actually be “mini websites”. I have received a few questions about this, and the best way I can put it is as follows…
Look at your computer screen, you are looking at this webpage in a browser. The browser (Internet Explorer or Firefox) you are seeing this website in is just like a gadget. Websites that you see are designed to be a certain size that fills your computer screen. A Google gadget that is a “mini-website” (type URL) is just like every other website, except it is smaller, and designed to be seen in a small space. We will explore this further as we make our next gadget.
We will now go through the steps of creating the Princess Bride quotes gadget…
This gadget displays random quotes throughout the day. It is a very good gadget in the sense that the information or content is frequently updated. This means the user is presented with several different quotes throughout each day.
This makes the gadget a litter bit harder to make, but with this guide you can “fill in” any quotes you want and submit it as your own Google gadget!
How to make a quotes Google gadget
This gadget is a type “HTML” gadget (like the tiger in the first lessons), it is not a “mini-website” type, but it actually uses a mini website to display information.
To make this gadget we need the mini website that displays quotes. It is a simple one page website, and I will step you through how to make it.
This gadget requires that you have your own webserver. The mini website we will make will not work through the Google gadget editor.
We will need two things to create this gadget.
1 – The mini website
2 – the Google gadget to display quotes
Lets begin with the website. As I said, this can be made with just one page.
Here is the website “behind” the Princess Bride quote gadget, it will open in a new window. – Click here to see website
You will see that the website ony does one thing, it shows a blank screen with one quote on it. We will use this to display the concept of a “mini website”.
Minimize the window that is showing the quote…
When this web page is displayed in a smaller container, it starts to sorta look like gadget doesn’t it?
Now refresh the quote page and you will see another quote appear. Every time you refresh that page you will see a new quote. Neato huh? But all those quotes are in reality on one page of code.
This is done through a PHP script.
Sound scary? Don’t worry. All you will do is copy and paste and then replace the Princess bride quotes with whatever quotes you want to display. Let’s get started.
The first step is to get the code and save it to your server. Click here for the code in a text file.
This code was written by David Marotz. Thanks!
Follow these steps:
Create a page on your server named “quote.php”
Copy the code from the text file and paste it into your “quote.php” file.
Save the file.
Now open that file from a browser. (example – www.yourwebsite/quote.php)
One of two things will happen.
It will work, and display a quote.
or
It won’t work.
If it works – Great! You have successfully used a PHP script! We can now go on and create our gadget.
If it doesn’t work - You will have to double check that you copied all the code, and that you named the file correctly (file name “quote.php” the “php” part is important). If you feel that you have both copied it right, and named it right, but it still doesn’t work, you will need to call your host support and tell them that you have tried to display a php script, but it is not working. They should be able to help you.
Now we must make the Google gadget to display the quotes.
The gadget we are making displays a picture and the quotes from the website. This means you need an image, lets just use this one for now…
To put this image on your server follow these steps:
Right click on the image, choose “save this image”, then save it to your computer.
Upload the image to your server (or use the Google gadget editor to upload)
Okay we are almost done, we have everything we need except the Google gadget code…
I am not going to explain in depth how this gadget works, I am just going to show you how to make it. Follow these steps:
Create a file called “quote.xml” on your server (or in the Google gadget editor)
Copy the code from this text file
Paste that code into your “quote.xml” file.
Save the file.
Your gadget will not work yet!
We have to change some things in the code to make it work with your information.
Replace the following stuff in the code with the correct information:
Click image to see the larger, readable version:
Once you have replaced the information as described in the above image, you are done!
to see your gadget simply use the steps we discussed in earlier lessons to add your gadget.
note: your gadget file is “quote.xml”
Okay now you can replace the quotes in the php file with quotes of your own, here is how…
Click image to see the larger, readable version:
After you have replaced the quotes and authors with your own, you can save the file and see your new, personalized gadget. You can use the same process to create as many quote gadgets as you like.
Update: I have updated the Princess Bride quote gadget so it looks different. To see the new gadgets, go to my Quote Google gadgets page.
Related posts:How to Make Google Gadgets – Lesson Six
How to Make Google Gadgets – Lesson Four
How To Make Google Gadgets – Lesson Two
{ 27 comments… read them below or add one }
at end to close it – That was the first error however — —
Then I keep getting this error message and have tried everything to no avail:
Error parsing module spec:
There should not be CDATA here
Any ideas?
Sorry – In first post I said needs closed at the end – you will get an error message
Hi, I just retested it and it works. If you can be as specific as possible in describing where you are having problems, I could help you more.
Error parsing module spec:
There should not be CDATA here
The above error keeps popping up. So I checked my file against the image above and all looks ok. I’m not certain how to explain it more because I am not sure what is happening. I tried to remove the Cdata but that didnt work – so put it back.
I even copied and pasted and started all over again – but same thing happened.
I’ll try a few more things. Thanks
Hi Bob, I changed the code. It will work for you now.
There was an error. Before you copy the code again make sure to refresh the page the code is on.
Pat,
Thanks! I was able to create a google gadget with zen quotes and embedded it at the bottom of my website. I added a link to your website on my favorite links page. If there is any other way I can acknowledge your help, let me know.
Gayle
thanks Gayle
Hi,
Not sure what I’m doing wrong; I get this error: XML page cannot be displayed.. etc.. Invalid at the top level of the document. Error processing resource ‘http://loreenart.com/quote.xml’. Line 1, Position…
Loreen, it looks like you have copy and pasted from the wrong source. All of what you have in your gadget is correct, but if you copy and paste from a web browser, you will have the problems you are experiencing.
Copy and paste the code from
the text file, and you should be fine.
Yes, the text file is the solution to the problem which Loreen was experiencing, as copying from a web page may not be of any use whatsoever.
Emm…
What if I don’t have my own website?
I cannot try it out…
If you don’t have a website, use google sites.
I don’t understand the php file. Isn’t the script not finished? It just looks like an array. How are the quotes being accessed?
I must be missing something…
Oops. I was looking at the image file instead of the txt file. I’ll give it a go as soon as I find somewhere to host a php file.
Thanks!
loved it!
Much more extensively discussed.
Thanks for the effort.
We shall call it “Google Gadget for dummies”.
Brilliant introduction to gadgets. From start to finish it was easy to follow. I particularly enjoyed the video with the author pointing to other things he hoped against hope would be next to it as it played. They were. Tabs are now gone though, replaced with a menu down the left. Really enjoyable. I think people will find it easier if they are aware, at least a little bit, about the syntax required in writing code whether it is xml, html or javascript (syntax very similar in all). I particularly mean being aware of the practice of using both opening and closing tags. I struggled to get the correct version of the developer gadget. Other ones kept throwing an xml header missing error.
I’m getting this message:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
Okay, I just realized that I should just ignore this message. The gadget works anyway. Thanks for this.
Is there anyway to make quote marks appear around the quote?
Hi! I just began to make my own gadgets and this example was very useful. I had to modify the php opening tag to ‘<?php’ because my web server displayed the source code instead the quote.
Thank you so much! I have been looking for a way to content in my gadget. This was perfect! Thank you. (I’m adding your site to my links list on the blog.)
Hi there,
I’m having problems with the php file. I pasted the text straight into a file on my server. When I open in my browser I see this:
// ////////////////////////////////////////////////////// $bgcolor = ‘#FFFFFF’; $textcolor = ‘black’; // Array Structure: “Quote”,”Author” $allqts = array (“This is true love… you think this happens everyday?”, “Westley”, “You’ve been chasing me your entire life, only to fail now. I think that’s the worst thing I’ve ever heard; how marvelous.” , “Six Fingered”, “Since the invention of the kiss, there have only been five kisses that were rated the most passionate, the most pure. This one left them all behind.”, “narrator”, “Do you want me to send you back to where you were – unemployed in Greenland?!”, “Vizzini”, “My name is Inigo Montoya, you killed my father, prepare to die.”, “Inigo”, “Inigo- You seem a decent fellow, I’d hate to kill you. Westly- You seem a decent fellow, I’d hate to die.”, “Inigo and Westley”, “Westley- I told you I would always come for you. Why didn’t you wait for me? Buttercup- Well, you were dead. Westley- But death cannot stop true love… All it can do is delay it for a while.”, “Buttercup / Westley”, “Is this a kissing book?”, “Grandson”, “Would you please consider me as an alternative to suicide?”, “Prince Humperdink”, “You fool! You fell victim to one of the classic blunders! The most famous is never to get involved in a land war in Asia. And only slightly less well known is this… never go in against a Sicilian when death is on the line!”, “Vizzini”, “I would sooner destroy a stained glass window as an artist like yourself. However, since I can’t have you following me either.”, “Westly to Inigo”, “Buttercup… That’s the fire swamp! We’ll never survive Wesley… Nonsense! You’re only saying that because no one ever has.”, “Buttercup / Westly”, “WHo are you? Why am I against this wall? Why won’t my arms move? Where’s Buttercup?”, “Westly”, “Buttercup… You mock my pain! Westley… Life is pain, Highness! Anyone who says differently is selling something.”, “Buttercup / Westley”, “You can’t hurt me. Westley and I are joined by the bonds of love. And you cannot track that, not with a thousand bloodhounds, and you cannot break it, not with a thousand swords.”, “Buttercup”, “-As Buttercup prepares to commit suicide with a dagger- There’s a shortage of perfect breasts in this world. It would be a pity to damage yours.”, “Westley”, “Vizzini… Inconceivable. Inigo Montoya… You keep using that word. I do not think it means, what you think it means.”, “Vizzini / Inigo”, “Am I going mad, or did the word ‘think’ escape your lips? You were not hired for your brains, you hippopotamic land mass.”, “Vizzini”, “As you wish.”, “Westley”, “Vizzini… No more rhymes, now, I mean it! Fezzik… Anybody want a peanut?”, “Vizzini / Fezzik”, “You’ve been chasing me your entire life, only to fail now. I think that’s the worst thing I’ve ever heard… how marvelous.”, “Count Rugen”, “Farm boy, fetch me that pitcher”, “Buttercup”, “Since the invention of the kiss, there have been five kisses that were rated the most passionate, the most pure. This one left them all behind. The end.”, “narrator” ); // Gets the Total number of Items in the array // Divides by 2 because there is a Quote followed by an Author $totalqts = (count($allqts)/2); // Subtracted 1 from the total because ‘0′ is not accounted for otherwise $nmbr = (rand(0,($totalqts-1))); $nmbr = $nmbr*2; $quote = $allqts[$nmbr]; $nmbr = $nmbr+1; $author = $allqts[$nmbr]; $space = “……………………………….”; echo ”
“; echo “”; echo “$quote
“; echo “”; echo “$space $author”; echo “$comments”; echo ”
“; ?>
Help!
A
I’m confused about the comment “If you don’t have a website, use google sites”. How do you add php to google sites?
I second that: How do you add php to google sites?
Yes, I want to make my own Quotes gadget, but my Google site doesn’t support .php files. Is there a way around this?
Is there an answer to David L, I.V and Andrew’s questions? How do you add a php page to google sites? I am lost and want to finish lesson 7.
To the best of my knowledge…
It is NOT possible to run PHP on Google Sites
Hi,
All these 7 lessons were of great help. Thanks for sharing such knowledge.
I would like to know that can i show different gadgets, that i created, in my own website or on my own webserver? i mean, i don’t want to use google for seeing my gadgets. if yes, how?