Sunday, December 31, 2006

Quote A Day Widget For Blogger

Quick quick, i have to take bath n go to the temple. The title says everything, i need not elaborate on what i am gonna write. Ok, why am i wasting time writing this.

What it does?
Displays random quotes on your blogger page.

Got the idea from?
This and this. I dowanna debate on who came up with the idea first. Its obvious that you guys also got the idea from somewhere else.

Advantage over the above ideas
Any number of quotes and no hard coding of the quotes. You can change them on the fly with some effort.

Disadvantage
Some extra network bandwidth is utilised each time it is displayed. Not too much. Depands, if 100Kb is too costly for you.

Things to do first

* Go to your blogger account settings page and enable full feed. By default, blogger gives only the first para or 256 chars. Change this settings to full feed.

* Create the quotes file with quotes in it. Quotes should be delimited by "%".e.g file contents below.

mary had a little lamb and it ran away
%
Where did the lamb go?
%
Who are you to ask? It went its way!!!
%
This should be enough for you to know the quotes file format.

Note that, "%" should not appear before the first quote and after the last quote. This can be handled in js but i am bit lazy now to do it and got lot other work too.

* Create a new post, go to the html view and paste the contents of the quotes file there. Publish the post. If you dowant the post to appear on front page, change the post date back to your school time.

* Go to the quotes page and copy the post id form the comments link. e.g :

http://www.blogger.com/comment.g?blogID=18356831&postID=358823621417987856

Red coloured number is blog id and blue coloured is the post id. Make a note of it.

* Add a page element to your template and add this js code where you want to quote

<script language="javascript">
function displayQuote(root) {
var content = root.entry.content.$t ;
var quotesArray = content.split('%');
var index = Math.floor(Math.random() * quotesArray.length);
var quote = quotesArray[index];
var d = document.getElementById ("quotesDiv").innerHTML = quote;
}
</script>
<div id="quotesDiv"></div>
<script language="javascript" src=" http://www2.blogger.com/feeds/DDDDD/posts/full/OOOOOOOO?alt=json-in-script&callback=displayQuote"
></script>


Wait, dont close the widget editor. Replace DDDDD with your blog id and OOOOOO with your quotes post id.

* To add flavour, add css for the quotesDiv if you want.

* Next time when you want to change the quotes, just edit the post and change the contents and republish it.

You can see it working. I followed the same steps. Still if there are any typos, let me know.

Cool!! I like that.

--
regards/Yogesh

21 comments:

Ramani said...

Good one, Yogi! I will buzz about this along with my next post.

Alain said...

Quote Style Definition: Hi Yogi, Thanks for sharing this Quote Trick. I’m not a programmer and I have applied your instructions and the basics seem to work perfectly well so far on my blog Union Point (Orientation Express section).
1) Regarding your suggestion «To add flavour, add css for the quotesDiv if you want.», I just don’t know what to do. I would like to give some personal style to my selected quotes, but all I have tried so for don’t work.
2) Also, I don’t understand the following disadvantage issue «Some extra network bandwidth is utilised each time it is displayed. Not too much. Depands, if 100Kb is too costly for you.» I don't understand this issue and I would like to know how can I evaluate if it’s too costly or not for me? Thanks!

Sanjeev said...

Great widget, Yogesh. I have a good collection of quotes and wanted something which would do this... putting a list of quote1, quote2, quote3, etc. like some of the other ideas people have put on the internet just won't work for someone who wants to circle through a lot of quotes.

I too would like to bold, increase size, font, color, etc of the quote though... is that what you meant by «To add flavour, add css for the quotesDiv if you want.».... if so, can you give a small example. Like alain, I too am not a programmer and would appreciate some help. Thanks.

yogi said...

Sanjeev/Alain,
You can add style to the page elements in many ways. To avoid playing with the blog template, use inline style as below(though not a clean way).

<div id="quotesDiv"
style="background-color:grey;color:red;
font-size:14px;
font-family:Arial Trebuchet Verdana;
font-weight:bold" >

There are many more attributes which you can set to change the layout etc. I dowant to make this comment a tutorial. Happy blogging!

Sanjeev said...

Thanks for the help, Yogesh. It was working great for me until something happened this morning after I added a few more quotes to my post. Is there a limit on # of quotes? Actually that is not the problem as I tried reducing it down to just 5 quotes and still the problem persists.

It does not show any quotes. Maybe it does 1 time but when you refresh, it does not bring up a new one and the old one also disappears - i.e. just a blank space is left.

Can you take a minute and see my blog - Tasty Morsels of Life - and see what is going on. Spend 1-2 minutes only to see if I am missing something obvious.... thanks. ur help is much appreciated

yogi said...

Sanjeev,

In your code, you have not closed the quotes for the id of the div element. It should be :
<div id="quotesDiv" style=".....">

Sanjeev said...

I removed the style etc...to go back to where I was before. It still won't work, Yogi.

Hmm...I am sure it worked yesterday when I discovered the widget and added it to my page but something has not worked right since this morning when I added quotes to the post itself and added the 'flavor' to the quotesDiv part.

Sanjeev said...

Actually... I stand corrected. Removed cache and tried again. Maybe you are right. I'll try it again.

Thanks.

Alain said...

- Samedi le 3 mars
Wow! A great, creative and customarizable synthesis: Thanks Yogi for your provided clarifications and support (bandwidth and page loading considerations, CSS coding and example, relevant Google tutorial link, follow up comments testing) to implement this amazing, customarizable, versatile and easy to manage “random display of objects (texts, internal and external links, images) device” on my blog.
(leatning, testing and thinking... few hours...
#yogiWidget {
complexity: code broken!;
}

Now that I’m more familiar with the mechanism, the constraints and the potentials of your random objects display device, I’m progressively moving out of my last heavy obsessive personal technical impasse episode related to my specific uses desire of your widget to a more open and light hearted activity of “happy quoting and blogging”. Regards!
...few more hours...
Pokri and Life issues
About Pokri my sister from Montréal, Québec, Canada said: “C cute!!!!” meaning “It’s so cute!”
About the particular «No More Adored By Anyone» life episode you’re are presently going through, all I can do from a far is to try to consider empathetically your original ways of expressing what you’re going through and maybe, try to sing along something like: Om Mani Padme Um.

If you were in my immediate surrounding, maybe offering you to go take a walk together in the almost half meter of fresh snow that has fallen on my area of living lately could be a good idea. Would that be appealing to you? I’m a new comer in the blogosphere and so far I have mainly learned how to deal with technical considerations that seemed at first so complex to me. In my actual state of affairs, I’m not exactly sure about what my best response via blogging to your personal experience should be.
...Meditation in action...
...Namaste Man!...
Random blank Space Bug
Back to predominant thinking…unsuccessful attempts (styling, cache) to solve completely the bug and find alternatives ...Om Mani Padme Hum... ...few more hours & still meditating...
Inner Crisis of revolt and despair
...Om Mani Padme Hum...
Persitant Bug
Frequency diminished but still present at times. I have notice that the bug is also present with a very low frequency on your blog. (almost never)
Later...Om Mani Padme Hum...
Feasibility check?- Display Quote Only On Demand Option:
Is it possible to make your widget display a random quote only on a visitor’s request or demand with the use of special quote button or link? On this website there is a Random Quote Generator example with a kind of button option that I’m trying to describe. It’s not a perfect model for me because this «random quote generator» also displays a quote when you load or reload a page?

First, is the Display Only on Demand Option is something technically possible?
Second, if it’s possible are you willing to create this option for your widget?
...Thanks!...

yogi said...

OMG!! I never got so much attention in the blog world!! Thanks for reading my blog and sharing my rant :) My thanks for your sis too, pokri must have had a good time :) I am curious, you have some 6 to 7 blogs. Are you planning to start some blogging company? hahaha. No offence, just kidding. Looks like you are in the medical profession. Man i love French and and French people. Diehard fan of Latetia Casta :D Well, about the space bug, I will fix it. And the button feature, I will implement it. Need some time. May be in a couple of days. I liked your idea. Will definitely add it. What does "Samedi le 3 mars" mean?

yogi said...

Sanjeev,
There seems to be some problem getting your post. Google pukes some error page while accessing your quotes post. In the mean time, you can do one thing, edit your quotes post in html mode and remove all the line break tags <br/> or <br> I guess that is what causing google to err.

yogi said...

Sanjeev,
Remove all html from the quotes post. You have to edit the post in html mode for that. It should be plain text delimited by '%' sign.

Alain said...

Just coming back from a walk in a park near by the Saint-Lawrence River (Fleuve Saint-Laurent)… Samedi le 3 mars…? It’s simply the date I have started to write my comment about my experience in relation with your widget. Hé! Yogi, I really blog slowly compared to you! In the park, I have walked outside the tracks… into an open field. I had snow up to my waist.
Space bug and button feature: Thanks for your willingness to try to solve the blank space bug and to take into consideration the «Display Quote Only On Demand Option» suggestion. No rush for me! I‘m happy to know you’re willing to help. But I have to admit that I’m also impatient to witness what you are going to come with this time and I can’t wait to play with it. I’m a dummy in programming but I like to try to find out how things work. I really like your widget and I also believe that you’re really on something valuable, useful and/or playful that certainly could attrack some New Blogger fans to your blog with the proper promotion. I’m planning to blog mainly with IE7 but I have tested the first version of your widget with Ff2. For me, the bug was worst with Ff2. The bug was also more frequent when I used the Home button and my dropdown labels menu option. Hope these facts could help you.
Blogging Company: Oh…Oh.. Ah.. Ah.. Ahaa.... funny perception you have there. But in some way there is a lot of truth in it. I’m planning to blog in French and in English so I have French, English and Bilingual blogs. The bunch of blogs is creating a kind of network with various services that I call the «Camp Hyp!» Pilote Project. It’s a kind of «Great Beautiful As Yet Unseen»(at least to my own eyes) project in the making and here is the best way I can describe it so far in a few words.
Occupation: I’m in a life transition. I work part time at University Laval for a language evaluation department. I used to teach (average age of students 17 to 21 years old) and work in the geography field before.
While you try to improve your widget I’ll hum «Life is On Open Road» by Brian Adams... to express my joy! Cool to know you!
Note: I’m using a conversations tracking service to follow our conversation… if you decide to publish your new or updated widget version in a new post, could you please simply at least do a comment under the present post with a link toward the new post. Thanks!

yogi said...

Alian: Sure, I will make a post about the changes to the widget. Keep pinging my blog :)

Alain said...

Users Tests: If you need «testers» for evaluating the installation procedure and/or the performance of the primary versions of your new widget on random quote, you can count me as one.

Alain said...

Hi Yogi! I’ve been fooling around with your widget and that has opened me to new considerations.
No Regular Pattern in Blank Space Bug: I going crazy with that bug. Since the installation of the widget, I’ve been unable to discriminate any systematic occurrence pattern in the apparent bug. Yesterday, I didn’t experience it at all. Does the widget need a kind of adjustment period before optimal performance after installing it and/or after modifying the data base post content? A few months ago I didn’t know much about computers and I thought programming was all logic and clear cause/effect relationships. Well now the all logical complexity beyond my understanding seems to produce haphazard events. It’s funny and frustrating at the same time.
Data Base of Quotes on an External Server instead of a Post Option: My actual data base of quotes hosted in a blog post only contain six quotes for the purpose of testing your widget. My blog offers a «search only in this blog device». The «search results» are displayed directly in my blog main page by the titles with a «show/hide the full post» function. I’m planning to progressively build a data base of quotes on the central theme of my blog containing between 100 and 200 quotes (like yours). I have just realised that even if I put the data base of quotes hosted in a post way back in time, the data base of quotes in a post is going to be loaded with almost every search results on my blog because it will be constructed around the central theme of my blog and its variations. This is a problem! I would like to know if it’s possible to host the data base of quotes on an external server instead of a post. I’m already using a free external server service for other «scripts» that I have implemented on my template. Well to be clearer, I’m in fact asking for another random quote widget option. First, is that possible with your script? Second, if so are you willing to give it a try? No rush!
Powered by Whom or What?: For the actual version of your random quotes widget and the possible future ones, I would like to know what is the main power source for running the scripts; the users' computers, Google Blogger Server, an external server, a combination of sources or others? Thanks!

Alain said...

Hi Yogi,
I’ve been out of blogging lately. It looks like it’s been the same for you.
I’m slowly building my QOTD Widget Data. I’m not using your data anymore.
"Get a New Quote" button Feature
Your QOTD displays a new quote every time a page is loaded or reloaded. I would like to keep this original feature but is it possible to add a “Get a New Quote!” button to your QOTD widget that would also allow the possibility to display a new quote on click without loading a new page or reloading the entire page?

Thanks!

yogi said...

I am out of civilization for some time now. Quote on demand, i.e button click is possible, without reloading a new page is also possible. Its hardly a few lines of changes but, as I told ya, outta civilization. Will do it by next week.

Alain said...

Acknowlegment and Credit: Your Einstein quotes are very cool. I didn’t know much about the ideas of Einstein and I really enjoyed reading some of your selected quotes like this one: "Everything should be made as simple as possible, but not simpler.".

I have shared your original approach to random quote generator with Annie from BlogU. I beleived that you deserve more aknowlegment and credit for your original approach to random quote generator.

Hope your journey out of civilisation is not to wild! I'll visit you later for news. Take care!

Dinesh said...

Hi Yogesh,
At first I am too happy to see an Indian blogger posting on the same topic as I am !
I found the trick very helpfull. Though I have not implemented in my blog.
All the best.
Dinesh
Quotes Collection : Collection & Compilation

Dinesh. said...

Hi again, How do you feelabout link exchange ? It will improve our (Yours and mine too ) google ranking.

Dinesh.