I’ve been working on building out a Web site and am wondering if there’s any way to duplicate the Reddit search box on my own Web page? I can handle a little bit of HTML but am not a Web coder by any means.
The Reddit search system turns out to be pretty easy to reverse engineer. Unless you want to make something super fancy that includes their search suggestions as you’re typing, that is. In fact, there are really three different ways you can incorporate Reddit into your site: a link that opens a new page with the results of the specified search (easy), a box on your site that produces search results (not too tricky) and duplicating the full search box on Reddit including search tips (so hard that we’re not going to delve into it in this article).
Ready? All you need is the ability to paste in actual HTML onto one of your pages (in ‘source’ or ‘raw’ or ‘text’ mode) on your favorite Web page editor for your site.
Okay, now, if you pop over to Reddit you can’t miss the search box on the top of every page:
The “Create Post” might be a bit more obvious, but above it, adjacent to the magnifying lens icon, is the actual search box. Start typing something in and Reddit will suggest matches even as you proceed:
Press return to complete your search, however, and you’ll get a pretty sophisticated search results page, broken into categories:
If you just want to look at posts rather than matching groups, you can click on “Posts” along the top. Or “Communities and users”, if you seek a specific Reddit user.
But what you really want to do is look at your address bar, however. A quick peek and you’ll see that searches are pretty simple to understand:
Turns out that if you want ‘Best results‘ then just add the search term:
https://www.reddit.com/search/?q=mulan
Want to see ‘Posts‘ only? Add &type=link:
https://www.reddit.com/search/?q=mulan&type=link
Or, finally, you can constrain the results to “Communities and users” with &type=sr%2Cuser like this:
https://www.reddit.com/search/?q=mulan&type=sr%2Cuser
Now, how do you turn them into search links? By typing in the words you want to have as your anchor text, highlighting them, then using one of the above URLs (with ‘mulan’ replaced by whatever search term you prefer). For example: Check out what people are saying about Mulan on Reddit!
The code for that is:
<a href="https://www.reddit.com/search/?q=mulan&type=link">Check out what people are saying about Mulan on Reddit!</a>
But what about if you want an actual search box where your visitors can type in their own search? That’s a bit more complicated HTML, a FORM that ends up looking like this:
<form method="get" action="https://www.reddit.com/search"> <input type="text" name="q" /> <input type="submit" value="Look up on Reddit" /> </form>
In action, it’d look like this:
And that’s it. You can certainly do lots of fancy CSS and formatting to make the search box prettier on page, but that’ll get you a functional box on your page that visitors can use to search Reddit!
Pro Tip: Find me on Reddit! I’m u/askdavetaylor and would be happy to connect!
