Thursday, May 2, 2013

How to Add a Pinterest Gallery to your Blog

Hi all! Last week I mentioned that I added some Pinterest galleries to my blog, and there were a lot of people interested in seeing a tutorial, so here it is. (My plans to write this earlier in the week were interrupted by a big, nasty virus that had me offline for several days. I'm good now, finally!) I found out about this functionality from a post on Revolutionaries.



A Pinterest gallery simply takes pins from your Pinterest board and formats them into a gallery view on your blog. People can then see a summary of your cards (up to 30 images) without leaving your blog! I'm so happy with having an easy way to display thumbnail views of specific cards. Clicking on the gallery will then take them to your Pinterest board.

It took me about an hour to set it up (I would think much less time now that I know what to do). Ongoing maintenance just requires that you pin your card after publishing it.

The following instructions are for adding Pinterest galleries to a blog hosted by Blogger. I'm hoping the concepts are similar for WordPress or whatever else you use.

Ready to get started?!


1. Decide what gallery(s) you want.
You may just want a general gallery of the most recent cards you made. Or you may want more specialized galleries with a theme, like:
  • your absolute favorite cards,
  • all cards that use Papertrey Ink products,
  • all non-card paper crafts, 
  • all age-specific birthday cards, 
  • all shaped cards,
  • all cards that use a special technique, like watercoloring, etc.
If you use labels in Blogger, reviewing these would be another way to decide what kind of gallery makes sense for your own blog. If you're not sure what specialized galleries you want, you may just want to add a general gallery of your last cards for now. You can always add more galleries as you think of them.


2. Create the board(s) on Pinterest.
In Pinterest, click on Create a Board, and name it according to what the contents will be. I currently have 3 galleries on my blog, which link to 3 boards on Pinterest.


3. Pin cards from your blog to the board(s)
Here's a tip: make sure you are pinning cards from each specific post. If you pin cards from your general blog address (like when I scroll through a blog by clicking on "older posts") then when people click on your card in Pinterest, it will go to your general blog address and people won't see the specific post where your pinned card is. You'll want to pin cards when you are in the specific URL for that post so people can be taken back to that post. 

4. Paste the board's URL in the Widget Builder
Click on your Pinterest board and copy the URL for that board. Go to the Button and Widget Builder on Pinterest. Either click here, or  you can find it from clicking on the box with the three lines in the top left corner of your main Pinterest page, under Businesses, Goodies, Buttons and Widgets.

Select the Board Widget, and paste your Pinterest board's URL in the open box. Click on "Advanced Options" and enter 230 for Image Width, and 2200 for Board Height. Leave the Board Width as-is. You may adjust these numbers in the next step.



5. Build the Widget
Click on the "Build it!" red button. You will then see a preview of what your gallery will look like (exciting!), a link to the gallery, and some JavaScript.



You can control how the gallery appears by playing around with the numbers you entered in the Advanced Options in the last step. An image width of 230 gave me about 3 cards per row. If you want 4 smaller cards to show in each row, chose a lower number. If you want 2 bigger cards, chose a higher number. Once you decide how big you want your images to be, then you can adjust the length of the gallery accordingly. Choosing 2200 was big enough to fit all cards in the window without having to scroll. But if you chose an image width that's not 230, you'll need to adjust this 2200 number too. Just click "Built it!" after each number change and check the preview until you're happy with it.

6. Add the Widget to your blog.
Go back to Blogger and add a new Page. Title your page how you want it to appear on your blog. Click over to your HTML tab (not the Compose tab). Paste the JavaScript from the last step. Then paste the link from the last step. Publish.

 
7. If you haven't used Pages before, Decide where you want Pages.
Under Pages, go to the "Show Pages As" drop down menu. You can show your pages as tabs along the top of your blog, as links in your sidebar, or not at all. You'd select "Not At All" if you just want to link to your galleries from specific posts. I selected to show them in my side bar since I wanted people to see them anytime they visit my blog. Plus, I already have other tabs on the top of my blog.

  
8. Go Check your Blog!
This is the exciting step! Your pages should appear on your blog now. Click on them to see your new gallery!
  

9. Pin after Publishing
To maintain your galleries, you will just need to pin each card to the appropriate Pinterest gallery after publishing your posts. They will automatically update on your blog.
-------------------- 

On a side note, there's an interesting link for Pinterest Analytics right above the Buttons & Widgets link. Looks like it gives you all sorts of stats on what people are pinning. I tried setting that up, but had difficulty "verifying my website." Has anyone done this? I'd be interested if it was worthwhile.

I hope you've found this helpful! If you have ANY questions, please ask and I'll do my best to help.

Thanks for looking!
-Kelly

10 comments:

  1. Thank you for doing this. I've bookmarked this page and will try to get this done as soon as I can. I have to start pinning my cards first.

    ReplyDelete
  2. Wow. Thanks for posting this. I'll need to read it again early in the day! I'm more of a morning person. If I need help, do you do house calls? I live in San Diego, and you can tell your boys that I live right near Legoland. OK?

    ReplyDelete
  3. EXCELLENT instructions - I now have all my pages up - so easy to follow - THANK YOU!

    ReplyDelete
  4. Hi Kelly

    Thank you for this great and very informative post!
    I have a deal for you: how about you drop everything, you come to Chicago to help me organize my blog and I bake you some Macarons?! Can't say no to that right?

    Your blog looks great so happy and organized! Love the look of each gallery as well.

    Thank You~

    ReplyDelete
  5. Thank you Kelly, clear and precise so follow-able ... rather like your cards and blog! Plan to give it a go over the weekend ... fingers crossed it works as well for Wordpress as it has for you on blogger! Anita :)

    ReplyDelete
  6. very informative post. Save it for now and try it later. Thanks Kelly!

    ReplyDelete
  7. OK--Kelly--computer genius, you! I thought I followed your directions to a 'T'--they were very clear, by the way. However, I must have done something wrong, because when I click on my page, it takes me to an empty blog post, not my pinterest board. Any clues what I may have done wrong?

    ReplyDelete
    Replies
    1. Hi Joyce! Oh rats. Well, that did happen to me when I just posted the link in my page and not the JavaScript as well. Did you paste both items on your page? Do you elect to show pages as side links? Otherwise send me a screenshot or copy of what you have on your html tab and I'll be happy to take a look. We'll get this (I hope!)

      Delete
  8. I just saw this post, which didn't come up in my subscriber email for some reason. Oh, rather I should say, I didn't see it, so perhaps it was just a case of my operator error! Anyway, it looks rather scary, but I've printed it up and am going to give it a try. I may be back for more advice! Thank you so much for taking the TONS of time to share this with us!!

    ReplyDelete

I absolutely love reading comments. Thanks so much for stopping by and taking the time to leave one! - Kelly