How to Add a Pinterest Pin Board to Your WordPress Blog

Pin It

How to add a Pinterest Pin Board to Your WordPress Blog



Updated March 13, 2012
Just learned a couple of things that will make adding a Pinterest board to your WordPress blog much easier.

1. As it turns out, Pinterest does have an RSS feed for each pin board. You can access it from http://pinterest.com/USERNAME/BOARD/rss where “USERNAME” is the name of the Pinterest account holder and “BOARD” is the name of the pin board. For example, the RSS feed for my Social Justice board is http://pinterest.com/jesseluna/social-justice/rss. So there is no need to create a custom RSS feed as I describe further below in this post.

I did have fun finding scraping the Pinterest site and creating a custom RSS feed though. If you want to try that with other sites then this post may be helpful.

2. And even easier, the Pinterest RSS Widget, created by BKMACDADDY Designs now has an option to display a specific pin board. If you downloaded the original plugin, get the update and you’ll see the new field in the widget. If you don’t know how to add a new plugin, you should check out my previous post on adding Pinterest photos to your blog.

Updated February 21, 2012 to add the video.

Part of pushing a social campaign through to completion is knowing how to use available tools to help your efforts. When it comes to displaying content on a site to engage and encourage visitors, active members, and possible allies, it may be necessary to dig into the tools and innovate. If you have the technical support necessary to innovate, you can take the online campaign to new levels.

In this highly technical tutorial, we are going to leverage a new photo and video sharing social media network, Pinterest, and extend its use to meet specific needs. I’m also hoping that the people at Pinterest see this post and include this functionality into its next site updates so content owners don’t have to jump through all these technical hoops.

I recently posted on how to add Pinterest pins to your WordPress blog but there was one missing feature – posting pins from a single board.

For “vertical” sites that only provide content on a narrow topic such as a food blog, a tech gadget site, or a site focused on social justice issues, it may make sense to only show pins from a single Pinterest board.

For example, I have a Pinterest board that is focused on the topic of Social Justice but I have others that represent other areas of interest like my JavaTheNut board that focuses on the love of coffee. For my Social Action website, I am only interested in showing items related to social justice so I don’t want pins from other boards to appear.

When I used the plugin in my previous post, I ended up with pins from different boards which were not related to my blog’s main topic. I labeled the corresponding boards next to each thumbnail image. Only the last item was tied to the site’s topic.

Resulting sidebar with Pinterest RSS Widget and the PinBoard Source

Because Pinterest only shares a general RSS feed with all recent pins and because there is no metadata in that feed to filter by board, we’re going to create our own RSS feed for our board page..

To avoid getting into custom PHP programming here, we’re going to use a third party tool to help us. I usually don’t like relying on third-party tools because there is no telling how long the tool will continue to be supported, but that’s our only option right now so we’ll go that route.

We’re going to create our own RSS feed from one of our Pinterest boards then we are going to add a plugin to our WordPress site and connect it to our new feed.

How to create an RSS feed out of a single Pinterest board

We’re going to use a third-party tool, Feed43.com, to help us here. This tool will help us scrape data from our Pinterest board then turn it into an RSS feed.

The trick here is to know how to capture the pattern of pins on the Pinterest board page. I experimented with this for a while and came up with a good match so you just have to follow my instructions below and you should be able to get similar results using your board page.

In case you’re weary of typing in the right code as we move through this tutorial, I created a separate text file that will allow you to cut and paste. The text file is available here for download (txt).
  1. Go to your Pinterest account and then go to the board you would like to share on your blog. I’m going to create a feed out of my Social Justice board so I start at “http://pinterest.com/jesseluna/social-justice/.” You will create a feed based on this page.
  2. Open another browser window or tab and go to www.feed43.com.
  3. Click on the “Create your own feed” link.
  4. Enter the URL of the Pinterest pin board you selected earlier (e.g. http://pinterest.com/jesseluna/social-justice/) into the “Address” box.
  5. You can leave the “Encoding” box empty. Click on the “Reload” button.
  6. You’ll see the HTML for the page load in the “Page Source” box below. Scroll down to the “Step 2″ section, leave the “Global Search Pattern” box blank and enter the following code into the into the “Item (repeatable) Search Pattern” box.

    Code snippet

    You are asking the tool to scrape all the HTML snippets where that pattern appears where “{%}” represents a variable that you want to capture and “{*}” represents other HTML code. Here we are interested in the image’s source link and in the “Alt” tag values.

  7. Click on the “Extract” button. You should have the same number of items in the results (Clipped Data) box as you do pins in that board as below (click to enlarge). You’ll notice that we were able to parse out the pin’s image location stored in the “{%1}” variable and the image’s “Alt” tab value stored in the “{%2}” variable.

    Step 2 on Feed43 creation of Pinterest board feed creation

  8. Scroll down on the feed43.com page to “Step 3.”

    The” Feed Title” should be the name of your board, the “Feed Link” should be the same as the link to your board, and the “Description” should be the name of your board. If you want to add more meta information to your feed, you can add to the “Description” field.

  9. Keep scrolling down to the “RSS Properties” section on the feed43 page. Enter “{%2}” in the “Item Title Template” box. We’re telling the tool to user the image’s “Alt” tag for the title.
  10. Leave the “Item Link Template” box blank. Add the appropriate link and image HTML code into the “Item Content Template” box as below, using your account’s username and the name of your board as shown in the image:

    Setting RSS output properties

  11. Click on the “Preview” button and you should see a nice preview of your new RSS feed. I clicked on the little “[+]” link next to the Preview text box to increase the size of the box as below.

    Preview of new Pinterest board RSS feed

  12. Scroll down below the “Preview” box and you’ll see the link of your new Pinterest board RSS feed. Copy that link and store it somewhere safe. We’re going to need it. The feed should look something like “http://www.feed43.com/7754354673417874.xml“. Test out your new feed by pasting the link into a new browser window and loading the page. You should see a standard RSS feed type of page that allows you to add it to your reader. This view will vary based on your browser and other factors but you should see the pins from your specific board.
  13. Now that we have our feed, we need to add a new plugin to our WordPress blog, the “Super-simple Pinterest Widget” plugin. If you’ve come this far in the tutorial I’ll assume you know how to add a new plugin. If you don’t, look at my last post on how to add a general Pinterest plugin and that will walk you through the general process.
  14. Once you have added the plugin and activated it, you can go to your Dashboard and go to the Widgets link under the “Appearance” section and you will see your new Pinterest widget type as shown below. Drag the widget onto your desired blog sidebar. If your blog template has more than one sidebar then just select the one that you want to display your pins.

    Add a new Pinterest widget to your sidebar

  15. Add the title that you want to display at the top of the new Pinterest pin section into the “Title” box.
  16. Add the URL of the RSS feed that we created using the feed42.com site into the “Pinterest RSS URL” widget box (as above).
  17. Select the number of pins that you would like to display.
  18. Click “Save” on the widget and you should be all set!

I’d love to see how your Pinterest board feed and new widget turned out. If you used this tutorial to add your Pinterest pins to your blog, please leave a comment below and include a link to your blog that includes the pins.

This is what my Social Justice Pinterest pins look like:
Pinterest pins from a single board

Happy pinning!


Related Article
> How to Add Pinterest Pins to Your WordPress Blog

This entry was posted in Communications, How To and tagged , , , , , , , . Bookmark the permalink.

45 Responses to How to Add a Pinterest Pin Board to Your WordPress Blog

  1. Thanks for the tutorial! I was able to add the board successfully to my site. Unfortunately, I’m using mine for a members-only section so I can’t include the link for you. But I DO have another question — is there a way to make the images/widget display larger? It feels so tiny…

    • Jesse Luna says:

      Hi Tea, you should be able to resize things by editing the plugin. To do so, go to the Dashboard, click on Plugins, scroll down the list until you see the plugin then click on the “Editor” link and you’ll see the PHP file. Edit the settings there. You’ll see a couple of hard-coded values there.

      Of course the drawback here is that if you re-install the plugin you’ll lose your changes.

      Good luck!

      -@jesseluna

    • Jesse Luna says:

      If you edit the actual plugin, you can change the “#pint_badge_uber_wrapper” style to be larger. By default it is 150px. I set it to be 219px on my blog.

  2. Nicole says:

    Thank you SO much for this!! Just what I was looking for.

  3. Nicole says:

    Is there any way to link the images back to your pinterest board?

  4. Linda says:

    I tried it & your instructions worked beautifully. I took it off again because the images were far too small and didn’t link back to the pins. Only the link at the bottom worked. I hope Pinterest add this functionality soon or someone comes up with a better plug-in.

    • Shinjie says:

      Well , You can actually show bigger Image :)
      Tips
      Look at the Image html
      XXXXX_b.jpg (Small Image)
      XXXXX_c.jpg (Big Image)

      Good luck everyone :)

  5. hi there,
    let me self-promote my wordpress pinterest plugin, freely donwloadable here: http://www.andreainfusino.com/articoli/social-media/pinterest-wordpress-plugin-english-version/
    the article is written in english, i hope is not too much poor english :P

    Andrea from Italy

    (comment edited by Jesse Luna)

  6. Hi. I loved the tips. I tried it and crashed and burned though. I have edublogs through wordpress.org. I couldn’t find any space to look for a new plug in. I used the existing plug in for rss feed and all I got was a list of the words on each pin. You can see that on my site above. Any suggestions?

    • Jesse Luna says:

      Hi Susan, I took a quick look at the edublogs.org main site and it looks like there are different access limits depending on your type of account. It’s possible you don’t have access to download plugins from your account type. I tested out the RSS widget before doing the tutorial and had similar results – only the Title or authors show up without the photos.

      The other way to load a plugin is via FTP. My guess is you don’t have access to do that. If you do, let me know and I can direct you to resources that can instruct you on how to do that.

      -Jesse

  7. Mary says:

    Is there any way to include the board/widget in a specific post? I did a quick screenshot but I don’t want to have to update my blog post image everytime I add a new pin. Thanks!

    • Jesse Luna says:

      Mary – That’s a good question. Adding a board directly to a post would either require your page to enable PHP in posts (which is a huge security issue) or it would require a third party “player” of some sort to play the images, similar to embedding a Flickr slideshow on a post. I’ll look into it.
      -Jesse

    • Jesse Luna says:

      Hi Mary, this blog post (in French) has instructions on how to add your Pinterest feed to a slideshow that will go in a blog post.

      I substituted my Pinterest username for the blog author’s username (prac53) then pasted the iFrame code into the HTML view of my WordPress blog and things worked just like that. The author describes the different parameters to change the look and feel of the slideshow but that is also in French.

      http://www.liens-du-vin.ch/pinterest-slideshow-script.htm

      Happy Pinning!

      -Jesse

    • Susan Finch says:

      There is a great WP plugin to allow you to decide which posts, pages, categories you have specific plugs ins display. http://wordpress.org/extend/plugins/display-widgets/ it works GREAT!. You could have a different widget area in a column for each board, and then only have them display on certain pages or posts. Have to remember, when you add new categories, etc. you have to go back in and assign the widget to them. You can also have it only hide from selected.

  8. Pingback: Channel Your Inner Magpie on Pinterest | MissWrite.net | ROCK your writing! m/w/

  9. Kathleen says:

    Great tutorial and so needed – I’m so glad everyone else discovered Pinterest so that these types of ideas exist now. I never thought to include a certain board but it really makes sense if you are blogging to your niche.

  10. Kasey S says:

    Is there any way to make the images appear in a 2-column fashion as opposed to 1 column?

    • Jesse Luna says:

      Hi Kasey, if you take a look at Andrea’s site (he commented above), he has a two column display using his own plugin but I believe it only works on Recent Pins, not on a single board. I haven’t tested his plugin yet and it requires downloading the .zip file from a source other than the WordPress directory.

  11. pinterest says:

    Thank you very much for the information, what I was looking ;)

  12. Susan Finch says:

    Almost there: http://froyo.tartberryinc.com/ – Clicking on a pinned image takes me to home page, rather than pinterest. Inside paged – images are larger. On feed43.com, have this: Item Content Template*:
    , yet the images don’t link. Yet in the feed43 preview, it links to my board. any ideas?

  13. SeemaS says:

    I got here from a Samantha Stevens post and love how techie you are! :)

  14. Maggie says:

    Was a bit concerned that Feed43 notes right upfront “If you use the Service to make profit either directly or indirectly, including, but not limited to, publishing feeds with your own advertisements inside, publishing feeds for your own commercial web site, you must purchase any of our paid plans.” I don’t currently run ads to collect $$ on my site, but may. The way this is written, it looks as though anyone who does make an income from their WordPress site should not use the free service.

    • Jesse says:

      Maggie, in terms of using Feed43 to build RSS feeds from Pinterest, I would imagine you’d be OK as long as clicking on the Pin didn’t link to an item for sale. Also, please note that there are WordPress plugins that now allow you to post Pins from a specific board. At the time I wrote the article, I didn’t know there was an RSS feed per board and there was no plugin that would allow you to pull pins from a specific board. Happy pinning!

  15. After hitting Extract I get
    » Item pattern should have at least one {%} macro defined??
    Any help GREATLY appreciated.

    • Jesse says:

      Hi Robin, in Step 6 above, make sure you paste that code into the “Item (repeatable) Search Pattern” box, *not* into the “Global Search Pattern.” That should work for you.
      -@JesseLuna

  16. jose cantu says:

    Not working for me
    im trying to use this
    https://pinterest.com/metricastudio/things-i-like.rss
    and when pasted on feed43, also pasting
    class=”PinImage ImgLink”>{*}
    <img src="{%}" alt="{%}"{*}
    on the Item (repeatable) Search Pattern
    I get Item pattern matched 0 times

    I´m doing something wrong???
    please help me out

  17. Lee Wicks says:

    Hi. Thanks for the tutorial. I’m using Squaresapce and have tried to use you method for introducing Pinterest content onto my clients site http://demonskinz.squarespace.com via an RSS widget.

    Two issues I have.

    1. The images display fine on http://www.feed43.com/demonskinz_image_feed.xml but do not display on my website. That’s probably a squarespace issue and I have asked for their help.

    2. The second issue is the title {%1} links to the homepage on the demonskinz website rather than the source on Pinterest. The source link does display in the rss widget, but it is annoying that the title links to the wrong place.

    Otherwise this is the only source of help I’ve found on the Tinternet!!! It almost works… so close.

    A huge thank you for improving my skills and knowledge. I’ve learnt something new.

    Regards
    Lee

  18. Chelsey says:

    Hi Jesse

    Thanks for the tutorial. Do you know if there is a way to display more Pinterest info such as the number of times a particular pin has been ‘Liked’ or how many times a particulat pin has been ‘repinned’?

    • Jesse says:

      Hi Chelsey, if you embed a single Pin on your blog, it will carry all that information. The RSS feed that we create on this page doesn’t contain the items’ Like information. I think I tried to access that information before but hit a roadblock.

  19. Pingback: Pinterest and WordPress | Patti Portfolio

  20. Nancy says:

    Hi Jesse,

    I followed the directions and although it worked there are no images with the pins just the titles, did i do something wrong? Any ideas on how i can fix this?

    • Jesse says:

      Hi Nancy,
      If you used the custom RSS feed method using feed43.com then troubleshoot the feed. If you can’t get passed Step 7 and get a “clipped data” preview that includes the image link (something like http://media-cdn.pinterest.com/upload/21166…..jpg.”) then you may have missed a quotation mark or used an asterisk instead of a “#” character in the pattern. Reply to this comment with your feed43.com feed link and we can debug it.

      If you took the feed directly from Pinterest like “http://pinterest.com/jesseluna/dogstories/rss” then you may have used it in a standard RSS widget which will usually not display the image. You’ll have to use one of the plugins I mentioned above. If you are using a blogging platform other than WordPress then you may have to use an RSS to JavaScript tool like http://www.generateit.net/rss-javascript/ to take the RSS and turn it into JavaScript then add it to a widget. If you do that, make sure to turn on the “use HTML” feature on to display the photo. Good luck. -Jesse

  21. Chuck says:

    Hey Jesse, this is a great tutorial, although, I can’t access the plugins section I see on your toolbar, is this for pro accounts on WP only? I’ve been roaming around the web for about 2 hours trying to figure it out but I can’t!! Is there any other way?

    Thanks!

    • Jesse says:

      Hi Chuck, if you have a wordpress.com site then you won’t have a Plugins section. However, you can use the built in Flickr Widget and put your Pinterest RSS feed there. I did that on my WordPress.com site – jesseluna.wordpress.com, see the sidebar.
      -Jesse

  22. kellie says:

    Does this work for WordPress.com blogs too? Unfortunately, I cannot download plugins, I’m wondering if there’s another option?

  23. Hi jesse ,

    First thanks for the explanation .. one question:

    I would like to use the feed 43 it slightly different to automatically post my pins onto my tumblr blog.

    I am currently using IFTT to transfer the images which generally works fine but unfortunately the normal pinterest/username/feed.rss only provides the small thumbnails and no original link source .

    Is it possible to get the original images and size and also the original link source using Feed43 .

    I would like to show larger images on my tumblr but also refer to the original source
    to respect the content ..

    thanks in advance

    Johannes

Leave a Reply

Your email address will not be published. Required fields are marked *

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