Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • Videos
  • Most Popular
  • Top Categories
  • Books
  • About Dave
  • Ask Me
  • > Donate <
  • Home
  • HTML and Web Design
  • How Can I Add a CNN.com Search Box To My Web Site?

How Can I Add a CNN.com Search Box To My Web Site?

June 8, 2020 / Dave Taylor / HTML and Web Design / No Comments

I love CNN news and am wondering if there’s any way I can duplicate their search box on my own Web site? I’d also like to have links to filled-in searches too. Is that possible?

For the most part, it’s true that if you can do something on one Web page, you can do it on any Web page. Duplicating the basics of a site search is one of the easiest too. Turns out that most site searches are done with what’s know as a “method=get” form. What this means is that the search term shows up in the URL of the search results page. Copy that URL and you have your filled-in searches, but unwrap that search language and you can create your own search box with just a few lines of HTML.

You will need to do a little bit of fiddling with code, however, so if your Web site page doesn’t let you work with plain text (for example, you couldn’t do this on a Facebook business page) then you might be stymied in your efforts. But if you’re running on WordPress, for example, you can indeed go into ‘text’ mode and paste in the HTML desired.

CNN is an interesting site in this regard because their search tool is a lot more sophisticated than it may seem at first blush. Go onto the CNN.com home page, click on the magnifying lens icon on the top right, and request a search without entering a search query term. You end up here:

cnn.com no search results

You can slice and dice search results quite a few ways, as shown, both by section of the CNN site and by type of media. Not only that, but you can constrain searches by date too, if you want to see what was published last year or even two days ago only about a specific topic.

Enter a search term like “Abraham Lincoln” and you’ll get a variety of results:

cnn.com search - abraham lincoln

What’s far more important is to notice what’s in the address bar for this search results page. It looks like this:

https://www.cnn.com/search?size=10&q=abraham%20lincoln

Everything after the “?” are name=value information for the CNN site search engine. You can see size=10 (which determines how many results you get per page) and q=abraham%20lincoln which is, of course, the search pattern with spaces replaced by the sequence %20. That’s your pre-filled out search URL, so you can create a link like this:

<a href="https://www.cnn.com/search?size=10&q=abraham%20lincoln">Abe Lincoln @ CNN</a>

Here’s that button so you can click and see how it works: Abe Lincoln @ CNN.

Since you also know that the search is given to the URL ‘https://www.cnn.com/search’ and that the actual search pattern is known by the field name ‘q’ you can also create a simple search box too:

<form method="get" action="https://www.cnn.com/search">
Search CNN: <input type="text" name="q" />
</form>

That’s it. Again, here’s the working code, ready for you to try:

  Search CNN:

Did you do a search? That’s it. Now, to make things a bit more fancy, you could add a hidden field that passes along the results per page “size” variable:

<input type="hidden" name="size" value="10" />

So that’s everything. But what about all those categories and specific searches? If we go back to the CNN site and constrain the search to Entertainment and look just for photos, the resultant URL tells the story:

https://www.cnn.com/search?size=10&q=abraham%20lincoln&category=entertainment&type=gallery

In other words, categories are passed as category=value (in this instance, entertainment) and the type of search result is constrained by type=value (with our value being gallery).

Now you can build a link like this: The latest photos of Tom Cruise at CNN.

How does that work? I’ll let you figure out how to put all the pieces together at this point!

Pro Tip: I’ve been writing about HTML and Web page design for quite a while. I even wrote a couple of books on the topic. Definitely check out my HTML and Web design help area while you’re here. Thanks!

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!
cnn search, cnn site search, cnn.com, reverse engineering, search box

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search

Recent Posts

  • Can I Have Microsoft Edge Suggest Strong Passwords?
  • How Can I Password Protect Tax Forms Sent Via Email?
  • Easy Way to Add Emoji to Tweets from a Web Browser?
  • How Do You Post Multiple Photos in Instagram?
  • How Can I Change the Default Search Engine in Google Chrome to Microsoft Bing?

On Our YouTube Channel

DIGDIY BUDGET ANC TWS Earbuds [D10WH] -- REVIEW

Rush Charge Hinged Smartphone Battery Stand -- UNBOXING & REVIEW

Categories

  • AdSense, AdWords and PPC Help (106)
  • Amazon Echo & Kindle Help (79)
  • Amazon, eBay and Online Shopping Help (157)
  • Android Help (158)
  • Apple Watch Help (49)
  • Articles, Tutorials and Reviews (326)
  • Business Advice (191)
  • Computer and Internet Basics (714)
  • d) None of the Above (160)
  • Facebook Help (364)
  • Google & Gmail Help (154)
  • HTML and Web Design (243)
  • Instagram Help (43)
  • iPad Help (136)
  • iPhone Help (570)
  • LinkedIn Help (79)
  • Linux Help (147)
  • Linux Shell Script Programming (86)
  • Mac & MacOS Help (830)
  • Most Popular (10)
  • MP3 Player Help (181)
  • Outlook & Office 365 Help (9)
  • PayPal Help (68)
  • Pinterest Help (53)
  • Reddit Help (11)
  • SEO & Marketing (80)
  • Spam, Scams & Security (82)
  • Trade Show Updates (23)
  • Twitter Help (212)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows 10 Help (825)
  • Wordpress Help (201)
  • Writing and Publishing (72)
  • YouTube Help (43)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (40)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2020 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy