|
|
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: 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: 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" /> </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!
Categorized:
HTML, JavaScript and Web Site Programming
,
Pinterest Help
(Article 10314,
Written by Dave Taylor)
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: 2Osomo96 said, on June 1, 2012 3:33 PM:
Greetin
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
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 Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming 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 Pinterest Help 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+ |
Hi,
You can also ad a pinterest button here
pinterest.com/about/goodies/
It's where I got mine from :)