I don't know if y'all have noticed, but Pinterest has these new AWESOME pins called Rich Pins. Have you seen the pins that have an icon and the blog name right under the picture?
If you click on those, a lot of them have more information about the pin without even going to the site. There are several different kinds – ones for recipes, products, articles, and movies – that all give a little bit more detail than just the picture and short description. They're pretty cool!
I was wondering how to implement these on my blog's pins…more than anything, I wanted that fancy schmancy icon and name below the pictures when your pin appears on Pinterest. So, I did a little research and figured out how to pretty easily implement these on a Blogger blog!
For the sake of explaining, I'm going to tell y'all how to implement the recipe-style rich pins, but the process for using the other ones is a little different. But, I figured most people reading here would use the recipe-style pins.
1. Edit Your Blogger HTML – In blogger, go to the template section, and click “edit html.” First and foremost, BACK UP YOUR HTML. That way if it gets messed up y'all won't be mad at me. 🙂
Now, find the code towards the top that says <head> . Immediately below that, copy and paste the following code:<meta property=”og:site_name” content=”YOURSITENAME”>
Where it says YOURSITENAME, change it to the name of your site…it can be your link (LambertsLately.com) or just your name (Lamberts Lately).
Click save, and that's it! You're done messing with the html template. That wasn't too bad, was it?
2. Edit Your Recipe – The next part of editing will take place in an actual post. For the sake of explaining, let's use my Banana Pudding Cake Recipe.
When you open your “Edit Post” page, at the top, click “HTML.” It should take you to the page where you can edit your post's html code. Once you put in the code to make your post rich pin friendly, it should look very much the same when you view on your main blog.
Here's what the recipe normally looks like in html mode (you can click on all of these pictures to make them bigger)…
Now, to start with, I'm going to add a little bit of code to the beginning and the end of the actual recipe.
At the very beginning, before the title of the recipe even, add in <div class=”hrecipe”>
At the end, after the last bit of directions, add in </div>
Make sure you get both of these! If you have a little bit of writing before the actual recipe starts, don't include that in the middle of these…copy/paste that first code right before the actual recipe starts.
Next, you're going to tell Pinterest what the title of your recipe is. Right before the title, copy and paste this: <h1 class=”fn”> and right after it copy and paste this </h1>
Now, tell Pinterest what the ingredients to your recipe are. Before each individual ingredient, copy and paste this: <span class=”ingredient”> and right after each ingredient copy and paste this: </span>
Those are all of the things you have to tell Pinterest. However, you can also add the following code to other parts of the recipe if you'd like. In these, the bolded parts are the code you need to put before and after the information, and the non-bolded would be how to structure the information:
URL
<span class=”url”>http://www.lambertslately.com/2013/04/recipe-banana-pudding-cake.html</span>
Cook Time
<span class=”cookTime”><span class=”value-title” title=”30M”></span>30min</span>
Prep Time
<span class=”prepTime”><span class=”value-title” title=”10M”></span>10min</span>
Duration (Total Cook Time and Prep Time Combined)
<span class=”duration”><span class=”value-title” title=”40M”></span>40min</span>
Yield
<span class=”yield”>Serves 6</span>
Summary
<span class=”summary”>This is a delicious recipe that combines a cake and a banana pudding.</span>
3. Save and Validate – Now, go back to your “Compose” view in the edit post mode, and you should notice little to no change in your recipe. Click save, and copy/paste the url to your particular post (so mine would be http://www.lambertslately.com/2013/04/recipe-banana-pudding-cake.html).
Go to this page, and in the box that says “Enter a valid URL,” copy and paste your link. It will tell you whether or not your code is structured correctly.
It also gives you a cool little preview of what your post would look like if pinned. Pretty neat!
If you've done it correctly, you'll see a box that says “Your pin's been validated! Apply now.” Click on Apply Now and put in your site url (so I would put in lambertslately.com). If you don't have your own domain on blogger, make sure your put in all of the link…so lambertslately.blogspot.com. Submit that, and you're done!
You should get your emailed notification shortly…I've read anywhere from 48 hours to 4 days – and then, anybody that pins your recipe will pin it in that very nice, fancy new format!
If your post doesn't work for some reason, don't freak out – usually there is one tiny formatting problem that messes everything up. Try another recipe, or start over with the one your have. Try just the required elements first and then add in all of the bells and whistles!
I hope this helps! Looking forward to seeing all of your gorgeous Rich Pins soon!
READY TO ORGANIZE A HOME YOU'LL LOVE?
Subscribe to the Lamberts Lately newsletter for the latest from the blog. You'll also get access to the newsletter-exclusive printable collection, full of home organization printables!
Leave a Reply