Pinterest Board Widget // Two Methods

Hey friends! I noticed this pin about creating a Pinterest board widget from my communal blogging board (<-thanks to all of you awesome people who are pinning relevant and helpful blogging pins. I am always learning new things from this board!) getting repinned a lot recently, so I thought I would go back to this post to see if all of the content was still relevant.

It turns out, Pinterest has changed in the past two years. Go figure!

I decided I would take a bit of time to update some of this information on how to make Pinterest board widgets for your blog since so many bloggers found it useful! (The updated sections are noted with “//” on either side. In case you were really curious.)

I see all of the comments on each post (no matter the age), so never hesitate to ask questions and I will do my best to keep this post up-to-date. Enjoy!

………………………………

I go through these phases where I need to change things.

I need to redecorate. I need to clean. I need to make my blog look more awesome. Yesterday was one of those days. Where I was completely sucked into making the blog look more pretty, adding things to the sidebar, deleting other things in an attempt to make the page load-time reasonable….

One of the things I wanted to add was a Pinterest board widget. I have seen other bloggers with these and had always assumed they were coding geniuses. I had my Pinterest social media button and that was good enough for this technology-impaired blogger.

But then, in one of those moments when you are stumbling upon things on the web, I found a wonderful place where you can make all sorts of awesome Pinterest things.

Trying to Do Updates Myself

I just had to add these beautiful boards to my site, especially since I am trying to get better with Pinterest, I told myself. With the giddiness of a kid on Christmas morning, I crafted the perfect boards for my sidebar and added them to widgets, since that’s the only way I know how to add html. The load time got slower, so I thought I could try to add the script to the coding. In CSS. HA.

Please oh please remind me never to do that again!

My thought process was that I could add it, and if it didn’t work, just delete it. Boy oh boy was I ever wrong.

The entire blog went white. And I’m not just talking about when I viewed my url. Like when I went to the log-in screen, that was white.

Like I killed WordPress or something.

All for some silly Pinterest boards! (Okay I love the way they look now, but still.)

The good news is that Bluehost saved me. Like swooped in like a hero and saved my entire blog. I will talk more about that later, though. I have an upcoming ode to Bluehost on the books.

//

Update (July 14, 2015)

Bluehost was an amazing place to start my self-hosting journey, but I have since switched to a company called Accelerated WP that is a little more hands (aka does updates and other things for me without even asking). If you’re a more serious blogger, I would highly recommend Accelerated WP. (<-and of course I’m an affiliate because if I love and use a product and there’s an opportunity to partner–I do it!)

//

I want to share with you how to do a simple Pinterest board widget using WordPress or Blogger

So you don’t try to mess with coding and kill your blog like I did.

More Blogging 101 Posts here.

//

Update (July 14, 2015):

Pinterest has changed since I wrote this post originally, so you will now have to go to this link to find the board widgets. You can still follow the next steps to customize your board widget or scroll down to see a new way.

//

There are a number of options to choose from, but the ones I want to high light are the Pin Widget, Profile Widget and Board Widget. They are all have basically the same steps, so let’s go with Profile Widget.

How to make your very own Pinterest Board Widget for your blog sidebar.

Or really, a Pinterest profile widget in this case.

Step One:

First, you will want to add your user URL into the space provided.

The next couple of steps might not be intuitive, so follow closely.

Step Two:

First I click on “Sidebar” and then “Build It.”

If you like the way it looks, great! Skip the next couple of steps and head on down to the JavaScript instructions.

Step Three:

Otherwise, you can click on “Roll Your Own” to play with the Image Width (mine is set to 90), Board Height (mine is set to 400), and Board Width (mine is set to 300). 

Step Four:

Make sure you check your blog sidebar to see how wide it is. An easy way is to look at another image widget you have that fills up the space (check to see what the “width” number is).

Step Five:

Also make sure you click “Build It” each time to update the image preview and JavaScript.

Step Six:

Once you are satisfied with the way the widget looks, scroll down to the JavaScript and link sections. You will need the JavaScript in at least one widget on your blog, but you don’t need it in more than one. It should help with page load time to only have the one script running. Gosh I feel smart knowing that.

Step Seven:

For WordPress, go to “Appearance,” then “Widgets” on your control panel. For Blogger, this is under “Layout.” Drag a text widget over where you want it and simply paste the code in the box. For Blogger, you should be able to add a text widget and do the same thing.

Step Eight:

Make sure to hit save!

You’re done! You now have a lovely widget showing off your Pinterest pins! (below shows the pin width: 90, board width: 300, board height: 800 just like the tutorial image–this would be great for a large sidebar widget!)

Visit Diary of a Semi-Health Nut’s profile on Pinterest.   

I originally had three boards on my sidebar, but thought that was a little much, so I might just change up the second board once a month. Maybe that will satisfy my occasional need to change/fix/improve everything? We will see!

//

Update (July 14, 2015)

Method Two for Adding a Pinterest Board Widget to Your Blog

As of now, I use the profile widget at the bottom of each post using a simpler method. It only gets slightly complicated if you want to change the size, but I promise it’s not that bad!

Creating a Pinterest Profile Widget

1. From your Pinterest profile page, click the gear icon.

2. You will see a drop down menu, select “make a widget.”

3. Copy the code you see into a blog widget or into the “text” part of your blog post where you would like the Pinterest board widget to appear.

4. You can then edit the code’s width, height and pin width. (the one below is adjusted to 800 width)

5. Save your widget or your post and boom. Your Pinterest profile with all of your recent pins is there for all of your lovely followers to see!

Visit Diary of a Semi-Health Nut’s profile on Pinterest.

Creating a Pinterest Board Widget

1. If you’d rather have a specific board show up on your sidebar or post, go to your board on Pinterest (such as my Food [Gluten Free] collaborative board). Click the three dots icon towards the top right of the board.

2. In the drop down menu, select “make a widget.” (the directions will be the same as the Pinterest profile widget from here on out)

3. Copy the code you see into a blog widget or into the “text” part of your blog post where you would like the Pinterest board widget to appear.

4. You can then edit the code’s width, height and pin width. (the one below is adjusted to 800 width)

5. Save your widget or your post and boom. Your Pinterest board is there for all of your lovely followers to see! Follow Diary of a Semi-Health Nut’s board Food [Gluten Free] on Pinterest.  [Tweet “Create your own @pinterest widgets! If Amanda can do it, you can do it! ;)”]   //   Be sure to follow me on Pinterest as that is the social media outlet I am currently obsessed with focusing on!Follow SemiHealthNut

 

Tell me….

Does this make sense? Can I clarify something?

What board will you add to your blog?

 

Disclaimer: There are now Bluehost affiliate links on this site because I am such a fan of their customer service and their products after they helped me save my blog!

Originally posted: December 18, 2013

Updates:

July 14, 2015 Added a second method and updated with a link to the Pinterest widgets. Deleted image and paragraph that are no longer relevant. Updated signature.