Link Pinterest Pins to the Right Post on Blogger

Have you ever clicked on a Pin that took you to the home page of a blog instead of the post you wanted to see? Today I'm sharing a bit of code to help prevent that problem on Blogger.

Pinterest created a special image attribute, data-pin-url, that lets you add your post's permalink to all of the images in the post. Pinterest will link images with this attribute to the right post no matter what page your reader is on when they Pin it.

It's a time-consuming chore to add this attribute to all of your photos one-by-one, so I wrote some JavaScript to do it for you automatically!

What This Code Does

This code adds the data-pin-url attribute to every image in posts on your home page and the "index" pages (archive, label, search, "older posts", and "newer posts" pages). The attribute links each image to its original post.

After you install this code, new Pins created from posts on your home page or index pages will link to the right blog post, not the home/index page. This code can't change old Pins. It can only prevent future mixups!

Template Compatibility

This code works on all of the standard Blogger templates except Dynamic Views, which does not accept custom code.

It also works on custom templates that have the same internal structure as a standard Blogger template.

Installation

Back Up Your Template

Backup instructions here. Do not skip the backup.

Open the Template Search Box

After you save your backup file, click the "Edit HTML" button below your "Live On Blog" screenshot.

Next, open the template search box to search your code. Your browser's search function can't search the code, so be sure to follow these three steps exactly.

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor. It looks like this:

Enter </body> in the search box, then press enter. The code will "jump" down to the </body> tag in your template and highlight it in yellow.

Copy the Code

Select and copy the entire code from the code box below. Only copy the code, you don't need the line numbers.

If the embedded code doesn't load for you, or you're having trouble copying it, you can copy it from here.

Paste the Code

Paste the code into your template, directly above the highlighted </body> tag. Next, press the "preview template" button. If you get an error message, press the "revert template" button and start over. Otherwise, press the "Save template" button.

Test the Code

There are two different ways to test your installation.

Test Option One - Create a Test Pin

Go to the home page of your blog and create a new Pin from any of your post images. After you create the Pin, go to Pinterest and click on it. It should take you directly to the post page, not your home page. You can also try this test from any index page to double-check!

Test Option Two - Check Your Blog's Source Code

If you'd rather not create a new Pin, you can check your blog's source code to confirm that your new data attribute is in place.

Visit your blog's home page in Chrome or Firefox. Hover your cursor over any image in your blog post and right click it. Select "Inspect Element" from the context menu. You'll see something like this screenshot (click to enlarge):

Look for the data-pin-url attribute inside the img element. If it's there and the URL is correct, you're all set!

Note: this code adds the data-pin-url attribute to images on the home page and index pages only. The attribute isn't necessary on post permalink pages because Pins created from permalink pages automatically link to the correct page.

Alternate Version with data-pin-description

Pinterest has another attribute that's supposed to control the description of your image, data-pin-description. But, only the Pin It hover buttons pick up the text from this attribute reliably — the Pinmarklet and the Pinterest browser buttons don't always recognize it on Blogger.

If you don't mind a little inconsistency with your Pinterest descriptions, you can set both the data-pin-url and data-pin-description attributes for your images with this alternate version of the code. The installation process is the same as the url-only version. The alternate code adds both the data-pin-url and data-pin-description attributes to your post images. The code uses the post's title for the data-pin-description attribute.

More Pinterest Attributes

Pinterest has two more image attributes: data-pin-media, which you can use to specify a Pinterest-specific image for your posts, and data-pin-id, which counts new pins from your page as a "repin" on your original pin.

This post on Pinterest's blog has the full details of all four attributes. After you read that, this post from Blog Chicka Blog will show you how to add them to post images by hand. The tutorial shows how to do it on WordPress, but the same basic technique works on Blogger, too. Remember that you don't need to add data-pin-url if you're using this code (and data-pin-description if you're using the variation) — the code will do it for you!

Happy Pinning!

A Pinterest Gadget for Blogger - Updated 2015

This tutorial is obsolete. The code does not work anymore. This gadget was built with the Google Feeds API, which shut down in late 2015.

If you have the code installed on your blog, I'm sorry that it stopped working. Unfortunately, there's no way to make it work again. You can remove the code from your blog by deleting the HTML/JavaScript gadget with code that begins with this line:

<!-- BEGIN CODE IT PRETTY PINTEREST GALLERY -->

How to Use the Official Pin It Hover Buttons on Blogger

Updated 2014

Updated November 2014 to include screenshots and instructions for the newest version of the Pinterest code.

Pinterest's official hovering "Pin It" buttons have improved in 2014 — there are more button options, and they load faster than ever. And, in the year since I wrote my original tutorial, I've come up with a few new code snippets to help you control where the buttons appear on Blogger blogs. Since there's so much new stuff to tell you, it's time for a brand new tutorial. Let's get started!

What You'll Learn

This tutorial will show you how to add the official hovering Pin It buttons to your Blogger blog. The buttons will show up in the upper left corner of your post images when your readers hover over the images.

Compatibility

These buttons work on all Blogger templates except Dynamic Views, which doesn't accept customization. The buttons appear on images with a minimum width of 200px and a minimum height of 100px. Smaller images are skipped.

Get the Code

To get your own button code, go to the Pinterest Widget Builder (opens in a new window).

Make sure that the "Button Type" option is set to "Image Hover", then choose your favorite button style.

You get a choice of small or large rectangular buttons in gray, white, or red, or small or large round buttons in red. You can preview each button style to choose the right one for your blog.

Once you've chosen your button style, copy the code in the grey box below the preview image to your clipboard. The code will look similar to this:

Back Up Your Template

From your Blogger dashboard, go to "Template" and click the "Backup/Restore" button in the top right corner. Save the .xml file somewhere safe.

Open the Template Search

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

We're going to use the template search feature to search your code. Your browser's search function can't search the code, so be sure to follow these directions exactly.

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Add the Code

Immediately above the </body> tag, enter the code you got from Pinterest.

Before you save your template, remove the words "async defer" from the code. This is important, your template will not save unless you remove the words "async defer".

Press the orange "Save Template" button up top to save your template. Then, go look at your blog. You should see the Pin It buttons you chose in the upper left corner of your images when you hover your cursor over each image. Nice, right?

Now, let's check out some more advanced things you can do to customize how the buttons work on your blog.

Advanced Options

Link "Homepage" Pins to the Right Post

If you do a lot of Pinterest browsing, you've probably had this happen to you: you click on a Pin for a recipe you want to try or an article you want to read, and end up on the home page of the blog, not the post you wanted to see! That happens when a reader Pins from the home page of a blog that doesn't have Pinterest's data-pin-url attribute on the images. You can add that to your blog with the code from this tutorial: Link Pinterest Pins to the Right Post on Blogger.

Remove the Button From Specific Post Images

If you want to take the Pin It button off of an image or two in a post or on a static page, you can use the "nopin" attribute. To "nopin" an image, switch over to the HTML view of your post or page, and find the img src HTML markup for the image you'd like to "nopin". It will look something like this:

Enter nopin="nopin" right before the closing slash and angle bracket of your image element, like this:

When you save your post, the Pin It button will disappear from that image.

Remove the Buttons from a Group of Post Images

Sometimes you'll want to remove the Pin It button from a large group of images in a post or static page. After an initial setup, this method will let you "nopin" larger groups of images quickly.

First, back up your template! Then, open your template code by going to Template > Edit HTML. Find the </body> tag again, and enter the following bit of JavaScript directly above the </body> tag.

<script type="text/javascript">
var nopinimg = document.querySelectorAll('.nopin img');
 for(var i = 0; i &lt; nopinimg.length; i++) {
   nopinimg[i].setAttribute('nopin', 'nopin');
 }
</script>

Save your template. Nothing will change yet; this code is the foundation for the next bit of code you'll use.

Now, switch to the HTML editor of the post with the group of images, and find the code for the first photo in the group. It will look something like this:

Add this line immediately above that first image:

<div class="nopin">

Then, find the last image in the group. Its code will look very similar to the code for the first image. Immediately below the last image, enter this closing div tag:

</div>

Save your post, and the Pin It buttons will disappear from all of the images you wrapped in the div. The next time you want to "nopin" a bunch of images, just wrap them in the div; there's no need to re-install the JavaScript part of this code.

There's a shortcut if you want to remove the button from all of the images in a single post — just add the first div tag above the first line of your post, and the closing div tag below the last line of your post. All of the images inside that div will lose their buttons.

Remove the Pin It Button from the Header

If the Pin It button appears on your header and you'd like to remove it, you can do it with a little snippet of code!

First, back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the tag, after your Pin It button code:

<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Save your template, and the Pin It button will disappear form your header.

Remove the Pin It Button from Sidebar Images

The Pin It button may appear on your sidebar images, too. If you'd prefer that it didn't, you can add the "nopin" attribute! There are two ways to do that, and the how-to depends on how you added the images to your blog.

HTML/JavaScript Gadget Images

For images in an HTML/JavaScript gadget, open your gadget and find the <img> element(s) in your gadget. Add nopin="nopin" right before the closing slash and angle bracket of your image element(s), like this:

Image Gadget Images

If you added your images through the Image gadget, you can add the nopin attribute through the template editor. It's a little trickier than the other methods in this post — if you're not familiar with the template editor, I recommend reading How to Use the New Blogger Template Editor first to get comfortable with how it works.

Before you edit your template, be sure to make a backup.

To find your image in your template, you'll need the widget ID for your image. To get it, go to your blog and hover your cursor over the wrench icon at the bottom of your image gadget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL. The widget ID will say "widgetID=ImageX", where X is the image ID number.

Once you have your template backed up and know your widget ID number, go to Template > Edit HTML and select your image by its widget ID from the "Jump to Widget" menu.

The template will jump to your image widget. Expand your widget's code by clicking the small black arrows at the left of the template editor, until the code is completely expanded.

Find this segment of the code:

<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>

Add nopin='nopin' immediately after 'data:width' in both places it appears in the code. When you're finished, the code should look like this:

<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
      </b:if>

Preview your template to make sure everything still looks the same before saving. If you get an error message or anything looks weird, press the "Revert Changes" button and start over. If everything looks good, press "Save" to apply your changes. When you go back to your published page, the sidebar pin it button will be gone!

Recipe Rich Pins for Blogger

Starting in the spring of 2015, some of my readers have not been able to successfully validate their blogs for Recipe pins using the markup from this tutorial. It seems that Pinterest may have changed some of the requirements, but hasn't updated the documentation for Recipe Rich Pins yet. Since the documentation hasn't changed I don't know what is different about the Recipe validation process. I'll keep an eye on the documentation to see if updates become available.

It can't hurt your blog to add this markup — it's recognized by other search engines, too — but it may not get you validated for Recipe Rich Pins.

I'm a total foodie, so I'm excited to share a little something special for food bloggers today! In this post I'm going to show you how to enable recipe Rich Pins for Pinterest on your Blogger blog.

If you haven't seen them yet, Rich Pins are Pins with a bit of extra information on them — for recipes, you can add ingredients, instructions, cooking times, and more.

We'll use hRecipe markup to enable Rich Pins in recipe posts. You can use this markup to turn any recipe on your blog into a Rich Pin-able recipe, even if you're not exclusively a food blogger!

I'm going to show you how to write the markup "by hand" first, then share a few free online tools to help you write your markup faster.

Ready to get started? Let's do it!

Markup For Your Template

The majority of the Rich Pins markup goes into individual posts, but I'm going to save you a little work by giving you one line of code to add directly to your template.

First, back up your template (instructions here). Do not skip the backup.

Next, open up your template by clicking the "Edit HTML" button below your "Live on Blog" screenshot. Find the <head> tag near the top of your template code (it's usually in the first 10 lines).

Immediately below the <head> tag, enter this meta tag:

<meta property="og:site_name" content="YOUR SITE NAME HERE" />

Replace "YOUR SITE NAME HERE" with the name of your blog. You can do that as a title (for example, "Code it Pretty") or as your blog's URL (for example, "www.codeitpretty.com").

Next, press the orange "Save template" button to save your updated template.

Marking Up Your First Recipe

I'm going to show you how to completely mark up a recipe to make a fully detailed Rich Pin, but you should know that Pinterest only requires you to mark up two parts of your post for Rich Pins: the title of the recipe and at least some of the ingredients.

If you want to leave a little "mystery" to entice Pinterest users to click through to your post, you can just mark up the title and key ingredients. Nothing else is required.

For best results, start with a recipe that has already been published on your blog, and has also already been Pinned to Pinterest. Also, if you don't already have a favicon for your blog, add one! It will show up on Rich Pins from your blog.

Switch to the HTML Editor

Open up a post you'd like to make Rich Pin-nable and switch to the HTML editor by clicking the HTML button at the upper right of your post editor. The HTML button turns a slightly darker grey when it's selected.

Wrap Your Recipe

Pinterest needs a signal to know your post includes a recipe, so we're going to wrap the recipe portion of your post with an HTML element called a div.

Find your recipe in the body of your post and add this line right above the recipe's title:

<div class="hrecipe">

Then, find the end of the recipe, and add a closing </div> tag below the last line of the recipe:

</div>

That closing </div> tag is super important. If you leave it off, your sidebar will get pushed to the bottom of the page, so don't forget it!

Next: Mark Up Your Recipe Title

Find your recipe's title in the body of your post. Add this line right before the first word of your recipe's title:

<span class="fn">

Then, add a closing </span> tag at the end of the title, like this:

<span class="fn"> Orange-Pineapple-Carrot Smoothie </span>

Again, the closing tag is important, so don't leave it out.

Next: Mark Up Ingredients

You don't have to mark up all of your ingredients, but it's helpful if you include the major stuff. Each ingredient needs to be marked up individually with the class "ingredient".

Wrap a <span> tag around each ingredient with a class of "ingredient", like this:

<span class="ingredient">3/4 cup chopped fresh pineapple </span>

Repeat the process for each ingredient you want to mark up.

If you wrote your ingredient list as an ordered or unordered list, you can insert class="ingredient" into the opening list item tags for your ingredients instead, like this:

<li class="ingredient">3/4 cup chopped fresh pineapple </li>

The effect is the same as adding a span tag, it just saves you some time!

Optional Markup

Yield

You can indicate your recipe's total number of servings using the "yield" class, like this:

<span class="yield">Serves 1</span>

Cook Time, Prep Time, and Duration

You can indicate cooking time, preparation time, and the total time it will take to make your recipe. Here are example of how to indicate each:

Cook Time

<span class="cookTime"><span class="value-title" title="10M"> </span>10 minutes</span>

Prep Time

<span class="prepTime"><span class="value-title" title="10M"> </span>10 minutes</span>

Duration (prep and cook time combined)

<span class="duration"><span class="value-title" title="10M"> </span>10 minutes</span>

To change the time markup to match your recipe, change "title" value to the correct amount of time. Minutes are indicated with a capital M, hours are indicated with a capital H.

Re-Publish Your Post

When you're all marked up and ready to publish, press the orange "Publish" button up top. Your published post will look normal to your readers — the little bits of markup we added around your recipe won't be visible in the published post. But, if you view your page source you'll see everything you just added to the post.

Test Your Recipe Markup and Submit to Pinterest

Now you're ready to test your Rich Pins! Before you test, though, you should know that the Pinterest validator is flaky. Your first recipe may not pass — one of my tests failed even though I was using Pinterest's own demo markup. If your first URL doesn't validate, try again with another post. As long as you're using the correct markup, you should be able to pass validation after a few tries. Here's how to get validated:

• Go to the Rich Pins Validator on Pinterest's developers site and submit the link to your post with rich pin markup — not your home page.
• If your URL fails, don't get discouraged. Mark up another recipe and submit that one, making sure to include the recipe name and ingredients markup. It can take a few tries before the validator recognizes your markup, even if it is correctly formatted.
• When your URL passes, you'll be prompted to apply for Rich Pins. Click the "Apply Now" link to continue.
• On the next screen, check the "website domain" field. If you have a .blogspot.com URL, you'll need to correct the URL to your blog's actual address (for example, codeitpretty.blogspot.com).
• Set the "Data Format" radio button to "HTML Tags" and press the red "Apply Now" button.

After you apply, you'll see a preview of how your Rich Pins will look. The screenshot below was provided by Olivia Morrissey from Not A Plain Jayne, one of the early testers of this tutorial.

Pinterest takes a few days to approve blogs for Rich Pins, and will notify you by email when you are approved. Olivia got her approval notification in 4 days.

Recipe Markup Tools

If you need a little help speeding up the process, there are two free online tools you can use to generate your markup.

RecipeSEO.com is an online recipe builder that generates hRecipe markup for you.

If you use the Chrome browser, you can use the hRecipe Helper extension.

Image in title card CC-BY Flickr user ilovebutter.

Getting Started with Pinterest Analytics

This post is OUTDATED. In August 2014, Pinterest completely revamped and significantly improved their analytics. An overview of the new analytics is available on the Pinterest Business blog in this post: How to use Pinterest Analytics to change the way you Pin.

It's been a long time coming, but Pinterest has finally released analytics! If you have a verified domain on your Pinterest account, you can now track stats for Pins from your website.

How to Access Pinterest Analytics

1. Verify your website with Pinterest. Pinterest needs to know what site you own before they can show you the analytics! If you blog on Blogger, Wordpress.com, or Tumblr, you can find instructions for verifying your site here. If you're on self-hosted Wordpress, use Pinterest's meta tag instructions here.
2. Switch to the "New" Pinterest, if you haven't already. When you log into your Pinterest account you'll be asked if you'd like to switch to the new look. Switch over and you'll be all set to check out your analytics.

Once you're verified & switched to the new Pinterest look, you can reach your analytics page by clicking on "Analytics" in the user menu dropdown at the upper right of the page.

Pinterest Site Metrics

The first page you'll see in Pinterest analytics is the Site Metrics dashboard. There's quite a bit of data there, so let's break it down.

Setting the Date Range

By default, the site metrics show you the past 14 days worth of stats. You can change the date range by using the datepicker to the left. You can quick select 7, 14, or 30 days, or you can select your own date range from the calendar. Stats go back to your original verification date (November 1, 2012 at the earliest).

Reading the Graphs

The four graphs on the Site Metrics page all have the same format — in the box to the left, you'll see a daily average of each metric, and in the graph to the right you'll see the actual daily stats from which the averages were derived.

Pins & Pinners

This shows the count of Pins from your website and how many individual people ("Pinners") Pinned something from your site.

Repins & Repinners

This shows how many times Pins from your site have been repinned, and how many people made those repins. Keep in mind, this is not a measure of repins of your Pins — it's repins of Pins from your site.

Impressions & Reach

This metric is very different from the first two stats, and it was the most elusive, until now. Impressions & Reach show you how many people are seeing your Pins, even if they didn't click on them. As Pinterest has described this metric, it seems that it measures impressions and reach of your Pins, not just Pins from your site.

"Impressions" shows how many times your Pins showed up on the main page, in search results, or on people's boards. The "Reach" shows how many people "saw" your Pins in their feed. Whether or not they actually looked at them can't be measured, but you can at least know that your Pins were on their Pinterest page.

Clicks & Visitors

If you track Pinterest visits in Google Analytics, you already have access to this information, but it's always good to have more than one source! "Clicks" shows you how many clicks went to your site from Pinterest. "Visitors" shows the number of individual people Pinterest sent you.

Most Recent, Most Repinned, Most Clicked

These three options are fairly self-explanatory; they let you see the most recent Pins from your site, the most repinned, and the most clicked in your date range. By default these are set to a one-day range, but you can use the datepicker to set a longer date range.

While this is visually very cool, it's a little tricky to get more detailed information about each of these pins. For example, if you want to find out just how many times the "Most Repinned" were repinned, you have to go to the board they were Pinned to and find the Pin to see the repin count. I don't know why this isn't just displayed on the Pin like it used to be. Maybe Pinterest will add it back :)

Go Check Out Your Stats!

You're all set to get the most out of your Pinterest analytics. Get in there and do some digging; you'll learn a lot about what your readers love about you, and you can use that to give them even more to love!

How to Install the Official Pinterest Widget on Blogger

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:

Pinterest widget loads here if you're on the blog and you have JavaScript enabled

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 ;)

Pinterest Verification for Blogger, Tumblr, & Wordpress.com

Updated December 2012: Pinterest released a meta tag verification option! I've updated the Blogger and Tumblr sections of this post to reflect that change. The Wordpress.com instructions have not changed.

Oh Pinterest, you sure do keep bloggers busy!

In late October, Pinterest introduced a new domain verification feature. When you verify your domain with Pinterest, you get a red & white checkmark next to your URL in your Pinterest profile. This is nice because it helps your fans make sure they're following the right account.

But, since the verification instructions ask you to upload an HTML file, you may be wondering how you're supposed to verify your blog if you're on Blogger, Tumblr, or Wordpress.com. Thanks to the ingenuity of some very clever bloggers, there are workarounds, and I've rounded them up for you here!

Important Note: Pinterest says they only verify custom domains right now. If your blog is .blogspot.com, .tumblr.com, or .wordpress.com you may not be able to verify yet — Pinterest says they're working on it. (One of my readers was able to verify a .blogspot.com blog, though!)

Pinterest Verification for Blogger

Update! You can now verify your Blogger blog using a meta tag. It's quicker and easier than uploading the HTML file. There's an excellent tutorial at Scattered Thoughts of a Crafty Mom.

If you want to try it the hard way, I used this tutorial from TopTrix to verify Code it Pretty on Pinterest, and it worked. See!

Pinterest Verification for Tumblr

Update! Tumblr users can now use the meta tag option, too! To add a meta tag to your Tumblr blog, go to Customize > Edit HTML, and enter the unique meta tag Pinterest gives you at the end of the list of <meta> tags in your blog's code.

If you'd like to try the HTML file upload option instead, a helpful gentleman named Francois Mathieu shared the steps to verify a Tumblr blog in his comment on the Pinterest blog. I followed his instructions and they worked for my Tumblr blog.

Pinterest Verification for Wordpress.com

Pinterest recommends this tutorial from Generate More for verifying Wordpress.com blogs. I have not personally tested it, but since the recommendation comes directly from Pinterest I think we can assume it's legit.