My blog has moved into Beta!



Please note that my blog has changed addresses! It's all new and improved. Hence this old friend of mine had to be left alone. You can visit me at The Last Word (beta). It's all warmed up for you! :)

« Home

JSON and the dynamic <script> tagAbout BloggerattoMicrosoft At It Again!Hack UpgradesMicrosoft PowerShellLightbox!!Organise your life, Google style!Printing Blog Pages, CSS style!Credibility of automationLockdown in Sector 4  »





Ok! Google Blogsearch is back up, and hence is the search! Happy days! :)

The idea for this stemmed from a little experiment that I was trying to conduct about a month back. The experiment dissolved, but this was born out of all the knowledge that I gained from it. Trying to not to sound like a TV commercial, it is slightly painful when one searches and it opens up a seperate Google page full of your results. You need to make tons of click to return to where you were, and conduct the search in a new page. Plus, those Google search pages don't look that good either. So, I present to you, Blogger Native Blog Search. (Updates)

This hack aim's to solve the problem of displaying searches in one's own page rather than go to a Google search results page. You can see it in action on the right, right above my profile picture. Put in a word, and it will search this blog for it and display it right underneath. Wanna implement it? Good! Let's show you how! :)

[Note]: Through use, its been brought to my notice that this doesn't work for blogs hosted in folders (a.k.a www.domain.com/blog). This is not a fault of the script, but a bug with Google's search. Hence, to make this work, your blog should be either on Blogger itself, or on your own domain (main page, not in a folder). If it's in a folder, it'll behave as a normal site search (unintended extended use! :D)

Put this bit of code in your template's <head> area, within <script> ... </script> tags:

Notice, that I have used the container tag named text to show the results. You can change it to anything for your usability comfort. Now, put the following bit of code wherever you want to put the form to make the search. It goes in your body area:

This part is the container which will hold the results from the search performed, followed by close button to close the search results.

There you have it! Now you have native blog search. If you use this code as-is, make sure there aren't any other elements with the id as text. It'll interfere with this. If you change the id in one place of the code, you'll have to change it everywhere. If there is no search result, an alert popup will tell you that there aren't any.

There are many implications of this hack. The main one of them being that this'll keep the Google Ads at bay. Since you don't go to a Google results page, you don't see any ads. I don't know how good that is for Google, but well, there's a downside to everything! :P This hack is by no means complete, so people who want to add to this are more than welcome. Just leave a comment and tell me that you've updated it, so that I can link to you! :)

As usual, if you have any trouble implementing this, please comment and let me know. I'll try to help you out to the best of abilities. Enjoy!

[Update 02/07]: The link back to this page was a little off! Fixed!

[Update 30/05]: The format of the output from the Outline Converter is hitting crests and troughs, so I'm taking a page out of Greg's book and simplifying the code, in case I have to change it again in the future. I don't know if the function becomes faster because of this! :P

[Update 19/06]: Something wrong with XOXOtools. I'm trying to get it fixed as quick as I can. Sorry for the inconvenience people! False alarm. All's good!

[Update 27/05]: Users don't need to add the blog address now. It'll automatically pull it from the browser. Ease of use! :)

[Update 11/05]: Switched to Singpolyma's Outline converter to remove bandwidth restrictions and save John! Its a little bit faster now as well! :)


51 Comments

Nice work. Can I suggest checking out the Yahoo! Web Services for search as JSON - it's better than piping Google results through poor eJohn's proxy service! Plus, you can get back all sorts of data like maps etc.

Done! Although the problem is that Yahoo! doesn't index pages as fast as google does. This creates a problem that pages like this one which are relatively newer, won't show up in the search. That is where Google's blog search does wonders because its specially made for blog searches.

Sticking with Google for the moment, and I hope they come up with a JSON feed for their searches, quick! :)

Wow -- this is really nice. Much cleaner for blog-search than my Google AJAX. While your code given in the post is for Yahoo, the code you are using in your blog uses Google BlogSearch... this confused me somewhat at first. I have a few pointers for you concerning your use of my feed2json over at xoxotools :)

1) Use &xn_auth=no to disable the Ning auth service -- this speeds up results
2) You can allow multi-word queries. I did some checking, and it seems that characters passed to the &url argument must be double-escaped. You are already doing this for the whole URL except the search query (ie using the % value for + instead of + itself) -- what you need to do is escape spaces as %2520 instead of as %20 -- then it works :)

BTW, the search box in your sidebar -- while it works nicely, is invisible... I had to click around a bit to find it...

Thanks Stephen! I made the necessary changes, and yes now one can enter multiple words. Thanks for the tips!

I also fixed the box so I hope you can see it now (made a few CSS changes)!

Hi aditya, i love this concept. I tried the hack on my blog, though, and couldn't get it to work. The search box showed up in the sidebar, but i got no response when I clicked "search" - as if the script didn't activate. (Since there was no functionality I took the code out.) Any suggestions, based on that?

Glad you liked it. I'm sorry my instructions weren't enough! :P

Ok, a few things you have to remember. The first bit of code (the first big blue chunk) goes right under your <head> tag, and between<script> ... </script> tags. There is a variable blog which has to be completed with your blog name. For me, its the-lastword. See what it might be for you, and add that in. Don't remove the quote marks (").

Secondly, the remaining two chunks are fine as they are. Once you install it, try a search. If you get nothing, see your error console (javascript error console) and see if any errors popup for d_script() or json().

Thanks for the extra help, Aditya. It's up and running now!

Thank you. It's a very nice add-on for the sidebar

While trying this code out, I am receiving results from another blog in addition to mine. The two blogs have similar names mine is X and theirs is wild-X. Any idea on how to prevent this?
    Anonymous Anonymous, on Tue May 23, 03:38:00 PM  

This search uses the same search parameters as the normal Blogger Blog Search does. What you can do is use the search in the Blogger bar at the top to search your blog, e-mail to me the actualy search string that is generated, and I'll send to you the customised function which you can paste and use! :)

What if I'm not hosting my blog at blogspot, what would I put for the blog name

var blog="Blogname (the part after http:// and before .blogspot.com)";
    Anonymous Anonymous, on Wed May 24, 10:11:00 AM  

In that case then, you should replace this part --> "+blog+".blogspot.com in the variable url, with the url for your blog (except the http://). If it doesn't work, I'd be happy to customise the hack for you. Just email me your blog address!

Hi Adi,

Thanks for the ideas and code - I've put it to use to do Recursive Backlinks.

Cheers,

-Greg.

Also, hacked my hack of your hack to support "traditional" keyword searching ... check the comments in the Freshblog post.

So basically, you've got Recursive Backlinks to do a Native Blog Search? Trying to kill me off are ya!? :P

Seriously, I still didn't get the basic idea behind RB and adding the keyword search to it... Help me out here? (It might help those who wanna implement it too!)

Thought I'd be in your address book by now!

Anyway, the recursive backlinks thing is probably easier seen than explained. But, I'll have another go:

Suppose post A links to post B, which links to post C. (Eg The Last Word links to Freshblog, which links to Speccy).

A -> B -> C

If I visit post C, I can find out that post B links to it. These are called backlinks. Recursive backlinks mean that you can still find out about post B but also ask "okay, what links to post B?" and it will say "Well, post A links to post B." At which I point, I can ask "Right, and what links to A?" etc

The way you activate this is by clicking the "~>" symbol. The script runs off to check. Since there are often several posts linking to the same post, you get a tree of ancestors. This is represented with the nested lists. When you "run out" ie get to a post that has nothing linking to it, it shows a "]" symbol. Trees like this hold a special place in the heart of computer scientists, which you'll find out about in the coming years :-)

The magic happens in a function called backlinker(). This takes two parameters: the search query and the id to write the results into. Initially, the search query was assumed to be a URL. Now, it can take any query; if it starts with "http" it assumes it's a backlink request, so makes it "link: http...".

I wouldn't worry about killing you off ... the script doesn't work as nicely ie the results are in the title bit, not it's own div. I tried making a div that expands/collapses on mouseovers, but using the DOM to attach mouseover events is different in IE and FF so it's a pain. Also, recursive backlinking is provided, but isn't really necessary. Why would someone want to see posts that link to the results of their search? Eg Find all the posts that contain "bananas" - and then see which other posts link to posts that contain bananas? Maybe future releases will drop that "feature".

One thing you might want to consider for future versions of Native Blog Search, based on my experiences with hacking it: If you use "window.location.hostname" to limit the search (ie "blogurl:"+window.location.hostname) then people won't need to manually enter their myblog.blogspot.com details.

I also wondered why you didn't use a normal for loop, but a while loop. Then I noticed that the "link" array in the object returned by Singpolyma's ning script is NOT an array when there's just one element. Ie instead of an array of size one, it's just a value. Very annoying, but had to code around it, albeit differently than you did.

Anyway, check it out on my Speccy blog. Have a play with both, I'd be interested to hear what you think about it, maybe make suggestions for improvements or extensions.

Thanks for the humungous explanation! :P *Phew*, you've got a lot of time for a research student! XD
I'll keep looking at it and will try coming up with something, either a use or a mod! Good work!

I don't know where to put the third code


¿Could you help me?

I cant get this thing to work on my blog.... done the pasting and de script tag. it does not give me any error messages it just does not work. I have a search this blog which works but I cant get this to work.

any ideas?

I cannot see the code on your blog. I am going to need the error messages coming up in the console to figure out what you're doing wrong. Could you install the whole script and drop me a line at my e-mail address -- aditya(at)aditya-mukherjee(dot)com.

I'll drop by and have a look!

hello again.. installed your script to my template but whenever I try to search something I only get the "no entries!" popup. change the url back to Athe-lastword.blogspot.com just to see if it works and it works. could there be a problem with my addresss? 1ijack thanks

Hey 1ijack! I changed the address on my blog to point to you blog, and I got results from your blog, so my script is fine. Maybe its the way you're adding it? Something might be getting a little messed up.

Install the code again, and I'll have a look!

hey
the native search used to work for me: blackademic.blogspot.com

now it doesn' seem to work anymore. any ideas why?

Hi I put the code back in and it works as far as it gives the result no entries...so I must insert the right url... but where... anyway thanks for looking at out problem... update: IT WORKS
You are great....all hail thee

hi
ok, so i implemented the new code. however, when i do a search, it always says no entires found. but when i used the old code, it always found what i was looking for. did i do something wrong?
blackademic.blogspot.com

Well, it works for me! Maybe its a cache problem (though I doubt it).
It works perfectly me, so it might be something at your end!

I cannot get it to work. I don't know what I'm doing wrong. When you click search it does not bring up any links or errors.

westtexasrocks.blogspot.com

Hi! It seems as though you've got two versions of two functions. The old version of the d_script() function and the new version of the json(rss) function. Update your code with the new d_script() function, and you'll be on your way!

WOOHOO!!! Oh, that means it works,

I getting "undefined" for results when searching my blog anyone else experiencing this?

- Drew

Mine wasnt working at all recently so I updated with this code and now I get results but they are title "undefined" and link to a blogger error page. I'm not sure how relevant this is but no matter what words I search with, I get two results both saying "undefined"

@Mark: Remote debugging is a little hard! Could you gimme a link to your blog? Or tell me what does the link point to? I'll still need to see the code installed though!

Hey Aditya,

Just noticed something, the link back to your site in the 'powered by' section of the code is a little off. It's missing the http:// so if installed as is it doesn't work right. I noticed this on Bloggeratto and another site...want to see you get the proper props and all don't we?

:-D
    Anonymous phydeaux3, on Sat Jul 01, 01:56:00 PM  

Good eyes commander! Thanks! :D

freakkin awesome blog, dude. keep it up.

@Mark: I caught the problem. The thing is, you use the URL www.yourblogname.blogspot.com . Unfortunately, Blogsearch doesn't like this a lot when it does a blog specific search.

Trying to simplify it for people, I started catching the blog URL from what is present in the address bar. So it passes your blog name with the www, which messed up the search.

So there are two ways of working around this. You can use your IRL without the www, and it'll work perfectly. Or you can find the part which says "+encodeURIComponent(window.location.host)+" (including the quotes and plus signs) and replace it with your blog's address without the www.

That should work nicely! :)

the problem i have with it is that, when i type a search of just "a" it shows results .. when ever i try to search for something else .. it shows up undefined.. please help me as i really like this search thing. 10x

problem solved, thanks for the script!

Oopss... I didn't see the trick concerning comments, sorry.
This is a very good script, great work!
As I'm a newbie concerning html can you explain me how can we make a "close button"?
Tahnks in advance for any help on this.
    Anonymous Ana, on Wed Jul 19, 01:01:00 PM  

@Ana: I'd like to know what you need to close! If you just want to remove an element from your page by just clicking a button, you can put in a onclick="document.getElementById('id').style.display='none'" attribute somewhere within the tag, replacing id with the id of the element you're trying to hide.

If you're looking for something different, you'll have to be a little more specific! :)

I was referring to the close button that we need to close the search results (like the one you have here).
I'll try this way and many thanks for yr quick reply!
    Anonymous Ana, on Thu Jul 20, 05:10:00 AM  

Not a problem! And the close button is included in the code for the template that you have to add! :)

Oh, I tried it but it looks sooo messy... First: the script appears on the top of my testing blog; Second: it doens't search anything at all. What am I missing(doing wrong)?
Here's my blog test: http://3onoff.blogspot.com/
Thanks in advance for yr kind reply.
    Anonymous Ana, on Thu Jul 20, 05:53:00 AM  

Hehe! The code which I asked to put in your <head> area, has to be included within <script> ... </script> tags! I'll add that to the instructions so that the people from hereon will not have that problem! Sorry! :-P

I've already add the script code, and that's ok now. But still the search function doesn't work - it doesn't search... Must I make another new page so the search results go there? I don't think so but..
    Anonymous Ana, on Thu Jul 20, 06:42:00 AM  

Everything is working good now. I added script twice in the wrong place... So, Im very happy with this search script. Thanks a bunch!
    Anonymous Ana, on Thu Jul 20, 06:59:00 AM  

I'm sorry but the script doesn't seem to be working. All that I can get is: No results.
Must the search be made by all the elements of a particular title?
Btw, this search button is not working either on this page:
http://bloggeratto.blogspot.com/2006/05/native-blog-search.html
    Anonymous Ana, on Thu Jul 20, 09:40:00 AM  

I'm on it! Hold out for a while!

hi, i cant get the search to work under safari, osx 10.4.xx

I'm sorry, but I've never used Safari and hence don't know much about what works or doesn't work in it. However, you can try and ask Phydeaux3 to help you out there. He can apparently handle Safari glitches!

I'm sorry! :-( Hope he can help!

Hello! Your code is very cool. I installed it on my site, and it works. However, it only outputs 3 or 4 results per search. For example, when I search for the word "the," which should yield pretty much every post I have, I only get 3 or 4 results. How do I get the output to reflect all the results?

If you want to see the code, my url is http://invisibleoranges.com.

Many thanks!




Leave your comment
You can use some HTML tags, such as <b>, <i>, <a>

Or you can sign in as a different user.







Categories

Latest Updated

Subscriptions

Get My Blog In Your Mail!

Powered by Yutter

add this button to your site/blog as a link to this page! « link to me!
coComments my coComments
my claimID

subscribe to feed
Widgetize!
Google Reader add to google
del.icio.us The Last Word add to del.icio.us
Add to My Yahoo! add to yahoo!
Subscribe with Bloglines add to bloglines
add to msn
Add to netvibes add to Netvibes!
myFeedster add to feedster
Furl The Last Word add to furl


Archive Pages
January 2006 February 2006 March 2006 April 2006 May 2006 June 2006 July 2006 August 2006 October 2006 November 2006 December 2006

Advertisement


Song Of The Day:




Creative Commons License Widgetize!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
Aditya Mukherjee © 2005-06 | Powered by Blogger