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:
<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:
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!