Blog Baby Blog Week 1: Setting Up Rich Pins on Pinterest

Hey hey! It's summer time which means it's time for Blog Baby Blog to start back up.  I’m starting this summer’s series with a big topic: Rich Pins.  I tried to make this one tutorial, but it kept getting longer and longer and longer.  I figured people wouldn’t want to need a dinner break before they finished a post, so I broke it up.

Not sure what a rich pin is? Read the previous post, What the Heck Are Rich Pins?, here.

There’s a lot to know about Pinterest, and it's easy to get overwhelmed.  Want to know more about upping your Pinterest game in general?  I recommend the Pinning Perfect Class from Blog Clarity.  (<--Yep.  That’s an affiliate link.)  I put that in the previous post, and I’ll put it in the next because it was definitely worth my time and money.

This post is just going to focus on the mechanics of setting up rich pins.  Most of the tutorials I’ve seen that say it’s “so easy!” to add rich pins assume you’ve done a number of things first.  I pretty much had done zero of them.  There are a number of steps, so I’ve chunked your assignment into three sections.  Once an elementary teacher, always an elementary teacher, right?

Get Your Blog Ready

I’m not going to lie.  Step 1 is THE WORST.  You’re going into your HTML, and it can get scary in there.  But if you can do this, you can do anything.

BEFORE YOU GO ANY FURTHER, PLEASE BACK UP YOUR TEMPLATE.  You’ve been warned.  Not doing this can lead to all sorts of sadness.

1.  Go to Settings-->Search preferences-->Descriptions-->Enable Search Descriptions {Yes}-->Add a brief description-->Save

2.  If you have a custom pin it button, your going to have to get rid of it.  Guess what?  It probably doesn’t work anyway.  The repository where the code was stored is no longer in existence so everyone’s disappeared.  Even though I hate that little red button with every fiber of my being (it’s so tiny! and boring!), there’s not getting around using the official Pin It button if you want to get the most out of your blog.  #sadsville

Go to Template-->Edit HTML
There are several ways to find your old pin it hover button code.  If you click inside the code area and then click CMD+F (or CTRL+F on a PC), your code becomes searchable.  Try searching for the word lava.  That should get you there if you have the old code.  If not, try the way your button was positioned topleft or topright (it will be one word together like that.)

If you have the old, broken code, it will look something like this:

Steps 3-5 will all be added above your </body> tag.  You can find that by using the CMD+F trick.

3.  Grab the new button code from Chalk and Apples.
Look for the section that says "Add the Pin It Button Directly from Pinterest”.

You can get it from Pinterest, but you have to delete a little piece from it to work.  Why Pinterest? Why?:

4. Grab this piece of code from Code It Pretty and paste it directly below your new pin it button code.  This will make the Pin It hover button stay off of your header.  It looks like this:

5.  Pinterest likes to pull rich pins from posts.  If someone pins from your homepage, it sometimes doesn’t work.  Grab this code from Code It Pretty.

It looks like this:

FYI-This does not work on all templates.  If you have the Natasha template from Georgia Lou Studios, this will not work because of the way the post feed is set up.  I’m sure there are others.

6.  Go back to your handy CMD+F trick, and search for the following line of code:

<b:includable id='post' var='post’>

**You’ll probably have a little black arrow next to that code.  You’ll need to click on the black arrow to “open” the full section of code.  It will look like this:

See that ... ? That means the code is not expanded.  Once you click on the black arrow, it will expand the code for you.  You insert the following code below the <b:includable id='post' var='post’> line.

Head over to XOMISSE and grab this code to insert.

Change “BLOG TOPIC” to your blog’s topic-education or teaching or whatever.

**You might already have this code in your blog.  Some templates come with it installed.

Be sure to save all of your changes!

The worst is done, people.

Get Your Pinterest Account Ready

Step 2 is NOTHING compared to Step 1.  If you got through the coding changes, this part will be a breeze.

**Before getting started, make sure you have a favicon installed on your blog.  If you don’t, add your blog button.  Go to layout-->favicon (It’s in the top left corner.)

1.  Go to Pinterest Business account page and click on Convert now.

**A number of bloggers added the info on the business account but not the confirmation.  You can still click on Convert or go to Edit Profile to get to the confirmation part.

2.  After that, you’ll need to confirm your website.  It sounds fancy, but Pinterest does most of the work.  You need to add one line of code your blog.  (After step 1, that’s a walk in the park.)

You can use the CMD+F trick, but you’re looking for <head>  It’s probably the 4th line in your code. You’ll add it directly below that piece of code.  Save.

Head back to that Pinterest page and click finish.  If everything worked correctly, the box will come right back up, and it will look like nothing happened.  It might even look like you haven’t done it yet.  Unless you got an Oops pop up, then there’s a 99% chance everything worked fine.

3.  Finally, you’ll have to validate your site.  Just copy and paste the address of any post (not your home page address-it must be the address of a post.)

**If you run into trouble with this part, it could be because of a funky .com redirect.  If you just masked your site instead of redirection it, then you’re going to have trouble.  Not sure?  Go to your blogger dashboard.  Click view blog.  Does the address show up as your .com or blogspot.com?  If it’s not the .com, you’re probably going to have problems. It only took a few seconds to get validated each time I’ve done it, but others have had a longer wait-as in days.  You might have to be patient.

Go to the Dark Web {Maybe}

That might be a bit of an exaggeration, but that is what it’s going to feel like.  That pin it button is like kudzu.  It takes over everything.  The code you originally added took it off of your header, but it’s going to show up all over your sidebar.  While I like my sidebar photo, I don’t need it pinned to Pinterest.

If you’re feeling super brave, you can try this tutorial to get rid of it: Code It Pretty.  You can definitely mess things up with this though, so back up your template.  When you are editing any of your sidebar gadgets like your Grab button, you’ll want to copy and paste the original piece into a word document.  That way when/if you mess something up, your original is still in tact.

If HTML code makes you nervous, you can purchase Rich Pin installation through my design site, A Bird in Hand Designs.

Come back tomorrow for Part 3: Getting the most out of your rich pins!

Good Luck!