How to Add a Pinterest Board Widget On Your Website

  • follow us in feedly
Published February 20, 2013 by Brad Knutson
Pinterest Widget

Adding a Pinterest board widget to your website is very easy.

Add the below code wherever you want the widget to appear on your website. Replace the Pinterest username and board name in the URL to anything you want.

Then add the below script call at the bottom of your page. You only need to place the below code on your page once, but you can have as many widgets as you want.

The Result

It works very well, actually. The only flaw I see is that it doesn’t translate to mobile devices very well, so here is a little CSS tweak that will help. First, wrap the initial widget call in a div.

Then, add some style to that div that will allow it to gracefully flow when the screen size is smaller. Based on the dimensions of my webpage, and how it appears on mobile devices, the below style works for me. Tweak it to match your needs.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

12 thoughts on “How to Add a Pinterest Board Widget On Your Website

  1. Tim

    Thanks Brad for the kind recommendation!

    I just wanted to pass along another tool called Tint. It lets you display any Pinterest account pins or any Pinterest board pins to your likening. You can totally curate to your preference and then embed it into your website. It took me about 5 minutes to create and integrate into my site with no technical expertise needed. They have infinite scroll and multiple themes to choose from too!

    Feel free to check it out here: tintup.com/blog/the-best-pinterest-for-a-business-widget/

    Thanks,
    Tim

    Reply
  2. Victoria @6vStudio

    Great post Brad! I used your extra CSS advice to adapt the widget to a responsive website and it worked pretty well. I made a few minor changes that help with keeping the right margin in place when the site narrows down, maybe they’ll be of use to someone else:

    #pinterest-widget > span {width:100%; overflow: hidden;}
    #pinterest-widget > span > span { width: auto !important; overflow: hidden }

    Reply
  3. Paul Salerno

    Hi Brad,

    I just checked out your article about the Pinterest Profile Widget.

    I was wondering if you knew how to modify the Style in order to remove the Header Portion?

    That is the Log and Text: “DesignsbyKatieRose Katie”

    This thing takes up too much space on the top and I would like to remove it if possible.

    Reply
    1. Brad Knutson Post author

      That’s a tough one, and a widget is probably not going to work if you need to hide the header.

  4. Hannelore N

    Hi Brad!

    Thanks for your post! I’m trying to add a Pinterest Widget Board to a drupal site (on a local machine). Can I use the same code as you do here? And if so, where exactly do I paste it?

    Thanks!

    Reply
    1. Brad Knutson Post author

      You should be able to paste in the Drupal admin (into a page or a widget). Otherwise you could add the code to a template.

  5. Chanx Singha

    Hi Brad,

    Your topic is very well informed. I had embedded it earlier to our company’s official site but the problem is that I wanna remove the borders of the Pinterest widget.
    Do you have any solution for it.

    Reply
    1. Brad Knutson Post author

      If you inspect the HTML of the widget, and look for a similar element to this:

      You could theoretically set CSS specifically for that class that would remove the box-shadow (it’s actually not a border, but instead a box-shadow:

      Of course, your selector will be different.

  6. Mels

    I am building a website with Freeway and want to insert Pinterest boards. To do that, I have taken your scripts and inserted them on the page by adding a html markup for your second line after and inserting a markup for the first line in the body of the page. However, nothing happens…
    Your help is greatly appreciated!

    Reply
  7. Oscar Staton

    I followed your code, but the problem I”m having is that I cannot get multiple boards to show up on my page. I have several distinct boards that I need to appear. Please help!

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">