How can I add a Pinterest search box to my site?
I've become a huge Pinterest fan - thanks to you for introducing me to the site! -- and would love to put a Pinterest search engine on my own blog site. Can you share the code I'd need for this? I'm fine with it opening up a new window, by the way, just want the search box itself on my page.
Thanks for your question. As you already know, I'm not just a fan of Pinterest [find me here: Dave Taylor on Pinterest] but I have also answered rather a ton of Pinterest tech questions here on my blog too, in my Pinterest Help category. Still, even with all those answers, I haven't bumped into your question before, and it's a good one that appeals to my hacking and coding skills. So let's jump in.
The first thing to remember is that like any other search box, the easiest way to duplicate its functionality isn't to open up the source HTML on the page, but rather to simply run a search and look at the resultant URL of the results page.
When I go to the Pinterest home page and search for "ipad", for example, here's the resultant URL:
Boy, they couldn't make this any easier. The most rudimentary HTML code simply requires that you use the base search URL as the "action" and name the search input box as variable "q". Here's how that basic HTML looks:
<form method="get" action="http://pinterest.com/search/">
<input type="text" name="q">
<input type="submit" value="Search Pinterest">
This isn't very pretty, but it'll do the job. To have it open up the results page in another window rather than replace the current window, simply add the attribute target="_blank" to the opening "form" tag. Here's a working search box:
As I said, not glamorous, but functional.
Let's make it more cool, however, since, well, since Pinterest is pretty visually attractive. I'm thinking having a light pink background and a rounded border encompassing the entire form. Here's the improved form:
What do you think? Better? Let's do one more thing: let's make the background of the text input field a slightly darker pink too:
Now, here's the HTML:
<form method="get" action="http://pinterest.com/search/"
style="border:2px solid #000;border-radius:5px;padding:8px;background-color:#fcc;">
Pins, Pins and more Pins: <input type="text" name="q" size="40" style="background-color:#fee;">
<input type="submit" value="Search Pinterest" />
There are obviously a million ways you can further tweak and modify the code, but this'll get you started. Have fun, and see you on Pinterest!
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....✔ Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...✔ Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....✔ How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...✔ How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+