I’m right there with you appreciating the breadth and smarts of the British Broadcasting Corporation’s BBC.com news site. Whether it’s catching up with the latest politics in Africa, soccer scores from friendlies around the globe or just getting a more worldly perspective on US-based news, BBC.com is a splendid resource online. Since they don’t have a subscription fee, ad revenue is an important part of them keeping things financially healthy so if you were to have asked “can I scrape their content and show it on my own site” I wouldn’t be helping you. That’s unethical and, likely, illegal too. More important, though, if you like a site, why would you do something against its long-term success?
The BBC News site has a ubiquitous search box that appears at the top of every page, so it’s easy to find what you seek as a starting point. To duplicate it, well, that’s going to involve a bit of HTML coding…
To start, here’s the top banner on the BBC World News page that’s my actual home page:
You can see the search box on the top right, but let’s zoom in:
Now you can crack open the HTML source to this page and wade through a very complicated coding to try and figure out where the search box is specified, but it turns out that there are almost 150 mentions of “search” on that page, so it’ll take you a while!
Instead, let’s reverse engineer by simply submitting a simple search and looking at the resultant URL:
That might be a bit small to read, but on a search for putin the resultant URL is:
Great. That’s really all we need because it tells us so much about how the BBC News team has implemented its search. It’s a Web form, using the GET method, the target URL that has the search engine itself is www.bbc.co.uk/search and the variable that contains the pattern or phrase being searched is “q”.
That’s enough for us to create this simple BBC News search box:
<input type=”text” name=”q” />
<input type=”submit” />
</form>
When that’s rendered by a browser, you end up with a search box like this:
Go on, type something in and try it, it’ll open a new window with the search results.
Easy, eh? Now, let’s make it a bit more like the BBC search box with a little bit of styling:
Search BBC News:
<input type=”text” name=”q” style=”border:1px solid black;background-color:#ccc;” />
<input type=”submit” value=”Go!” />
</form>
And the more attractive result:
That’s it. Grab the code you like, paste it onto your page in source or HTML mode, and you should be good to go!
The post How do I add a BBC News search box to my Web site? appeared first on Ask Dave Taylor.