Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


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.


Dave's Answer:

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:

http://pinterest.com/search/?q=ipad

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">
</form>

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:

Pins, Pins and more Pins:

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:

Pins, Pins and more Pins:

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" />
</form>

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!


More Useful HTML, JavaScript and Web Site Programming Articles:
✔   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!
    Enter your name: and your email addr:  





Categorized: HTML, JavaScript and Web Site Programming , Pinterest Help   (Article 10314, Written by )
Tagged: hack pinterest, hacking pinterest, html coding, pinterest search box
Previous: Create a decrypted PDF from an encrypted PDF?
Next: How do I reformat / reset an Apple Time Capsule?




Reader Comments To Date: 2

Wes said, on April 16, 2012 4:28 PM:

Hi,

You can also ad a pinterest button here
pinterest.com/about/goodies/

It's where I got mine from :)

Osomo96 said, on June 1, 2012 3:33 PM:

Greetin

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!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: 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 web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.