Big news! Pinterest has finally (caught up to me and) developed "latest Pins" widgets for blogs ;) Have you seen them? Here's a real one if you haven't — the picture above is just a screenshot:
Nice, right? Let me show you how to add one to your Blogger blog!
Start at the Pinterest Widget Builder
The Widget builder is at http://business.pinterest.com/widget-builder/.
Here, you'll need to decide between a profile widget and a board widget. A profile widget will show up to 30 of your latest pins. A board widget will show up to 30 of your latest pins from an individual board.
The Profile Widget
If you choose the Profile widget, you'll be prompted to fill in your Pinterest user URL. The format for that URL is http://pinterest.com/USERNAME/. Replace "USERNAME" with your Pinterest username, like in the screenshot below.
The Board Widget
If you choose the Board widget, you'll be prompted to fill in your board URL instead. The format for board URLs is http://pinterest.com/USERNAME/BOARD-NAME/. Replace any spaces in your board name with a dash (-). The easiest way to get this URL is to go to your chosen board and copy and paste the URL from your address bar.
The Preview
After you enter your URL, Pinterest will show you a preview of what your board will look like.
Don't worry if it looks super-wide. The widget is cleverly designed and will resize itself to fit the width of wherever you put it. If you want to strictly define the size, though, you can go into the advanced settings.
Beneath the preview you'll see the code for your widget. We'll use that later on.
Advanced Settings
You can fine-tune your widget's appearance by clicking the red "Advanced settings" link below your URL.
That's a screenshot of the board widget's advanced settings, but the advanced options are the same for either board type.
From the advanced options menu you can set a image width, board height, and board width.
Installing the Widget
Installation is a three-step process. Stay on the Pinterest page and open up a new tab in your browser to go back to Blogger and get started.
Step One: Back Up Your Template
Before you install the widget, back up your template. To do this, go to "Template" and click the "Backup/Restore" button at the upper right. Press the "Download full template" button on the resulting screen and save the .xml file to your hard drive.
Step Two: Add Pinterest's Script
After (and only after) you've backed up your template, click the "Edit HTML" button beneath your "Live on Blog" screenshot.
Once inside your template, place your cursor over the code and click once. Press ctrl-f if you're on a PC, or command-f if you're on a Mac to open a search box in the upper right corner of the template code. Type </body> into the search box and press enter.
Your template will jump down to the </body> tag and highlight the tag in yellow.
Immediately above </body> tag, enter this line of code:
<script src='//assets.pinterest.com/js/pinit.js'></script>
Here's a screenshot of that line of code in my blog.
After you've added the script, press the orange "Save template" button. Nothing will happen on your blog yet, this is just the code required to make the widget work.
Step Three: Add an HTML/Javscript Gadget
Remember the code you saw below your preview? We're going to use it now.
Switch back to your Pinterest tab for a moment to copy your widget's HTML link. It will look something like this:
Once you've copied that, switch back to your Blogger tab. Go to "Layout" and click the "Add a gadget" link wherever you'd like the widget to appear. Select HTML/Javascript from the resulting menu (you have to scroll down a bit to see it).
A new window will open. Make sure "rich text" is showing in the upper right corner of the gadget like in the screenshot below. If it's not, click the "Edit HTML" link to switch to the HTML view.
Paste the code you copied from Pinterest into this gadget. Press save. Wait a few minutes, then check out your blog. You should see the widget appear.
Mine didn't appear for almost 10 minutes at first, so if it doesn't appear immediately, don't panic. Give it an hour, go do something fun, then check it again. If it hasn't appeared after an hour, retrace your steps through the tutorial or get in touch with Pinterest support.
Other Uses for the Widget
You can embed the widget in blog posts or on static pages by entering the HTML link you receive from Pinterest into the HTML editor of your post or static page. Make sure to add the script from step two to your template before inserting the HTML.
If you're a regular Code it Pretty reader, or you've used my Pinterest gadget for Blogger, you may be wondering...
How Are These Widgets Different from the "Code it Pretty" Pinterest Gadget?
First, and most significantly, these new Pinterest board and profile widgets were developed by Pinterest and are officially supported by Pinterest. My gadget is not.
The other major difference is that the images in the official widget don't link directly to specific Pins. If you click on an image in the new Pinterest widgets, it prompts you to repin the image.
Of course, I'm partial to my own gadget because I made it myself, but this new option is great! I'd love to see your boards, whichever option you choose ;)
