August 21, 2013

Recipe Rich Pins for Blogger

Recipe Rich Pins for Blogger

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.

rich pins preview screenshot

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.

Show Off Your Rich Pins!

When your Pins get approved, I'd love to see them! Share them in the comments below, Tweet them to me @MMosley, or share it with me on Pinterest.

Image in title card CC-BY Flickr user ilovebutter.

August 7, 2013

Blog Ad Rotator with HTML and JavaScript

Simple Blog Ad Rotator with HTML and JavaScript

Over the past few weeks I've been bombarded with requests for a tutorial on how to make ads rotate when the page is refreshed. You know I aim to please, so I put together a bit of code and a tutorial to show you how it's done!

What You'll Learn

I'm going to show you how to set up ads on your blog that swap position when the page is refreshed. This is for image ads you sell directly to sponsors or swap with other bloggers — it doesn't work with AdSense or other ads served through an ad network.

Live Demos

The following live examples of different configurations each use the same basic code. Make sure to refresh the demo pages a few times to see the images change places:

  • A two-column layout with six small ads that swap places on page refresh (live demo here)
  • A single-column layout with three larger ads that swap places on page refresh (live demo here)
  • A leaderboard banner that only shows one ad at a time out of a group of 6 ads (live demo here)

Difficulty

This tutorial is suitable for strong beginners. If you've worked your way through a tutorial or two of mine in the past, you're totally ready for this.

If you're new and you'd like to try an easier tutorial first, try my Simple HTML Image Gallery tutorial, which teaches you how to write the HTML used in this code. Once you've worked through that tutorial, you're very well prepared for this one!

Compatibility

This works on any blog platform that allows you to add HTML & JavaScript gadgets or widgets. Blogger and Typepad users, you're all set.

Self-hosted Wordpress users can use this in conjunction with the HTML/JavaScript Adder plugin. This will not work on free Wordpress.com blogs.

Ready to get started? Let's get to it!

First, Upload Your Ad Images

Your images need to be hosted online before you can use them in your ad space.

On Blogger, you can upload your images to your Picasa Web Album for your blog, or your favorite image hosting service. Typepad users can upload images to the File Manager. If you're on self-hosted Wordpress, upload your images to your media library.

After you've uploaded your images, leave your image hosting open in another tab and come back to the tutorial, you'll need direct URLs to your images soon.

Next, Open Up the Code in Codepen

I've uploaded an editable version of all of the code you need to get started on Codepen. On Codepen, you can edit and preview your code in real-time so you can make sure it's all correct before you add it to your blog.

You can open up the Codepen in a new tab/window by clicking the "Edit on Codepen" link on the preview window below, or you can click here.

<script type="text/javascript">
var ads = [];
ads[0] = '<a href="FIRST SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="FIRST SPONSOR IMAGE URL HERE" alt="FIRST SPONSOR NAME" title="FIRST SPONSOR NAME" width="WIDTH HERE" height="HEIGHT HERE"></a>'
ads[1] = '<a href="SECOND SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="SECOND SPONSOR IMAGE URL HERE" alt="SECOND SPONSOR NAME" title="SECOND SPONSOR NAME" width="WIDTH HERE" height="HEIGHT HERE"></a>'
ads[2] = '<a href="THIRD SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="THIRD SPONSOR IMAGE URL HERE" alt="THIRD SPONSOR NAME" title="THIRD SPONSOR NAME" width="WIDTH HERE" height="HEIGHT HERE"></a>'
ads[3] = '<a href="FOURTH SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="FOURTH SPONSOR IMAGE URL HERE" alt="FOURTH SPONSOR NAME" title="FOURTH SPONSOR NAME" width="WIDTH HERE" height="HEIGHT HERE"></a>'
ads[4] = '<a href="FIFTH SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="FIFTH SPONSOR IMAGE URL HERE" alt="FIFTH SPONSOR NAME" title="FIFTH SPONSOR NAME" width="WIDTH HERE" height="HEIGHT HERE"></a>'
ads[5] = '<a href="SIXTH SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="SIXTH SPONSOR IMAGE URL HERE" alt="SIXTH SPONSOR NAME" title="SIXTH SPONSOR NAME" width="WIDTH HERE" height="HEIGHT HERE"></a>'

var x = 0;

function rotate(ads) {
while (x < ads.length) {
   var sort = Math.floor(Math.random() * ads.length);
   if (ads[sort] != 0) {
   document.getElementById('adspace').innerHTML += (ads[sort]);
    ads[sort] = 0;
    x++;
        }
    }
}
</script>

<style>
#adspace {

}

#adspace img {

}
</style>

<div id="adspace">
<script type="text/javascript">
rotate(ads);
</script>
</div>

See the Pen %= penName %> by mariemosley (@mariemosley) on CodePen

When you first open up Codepen, the preview window will show you either a bunch of empty rectangles or some text all run-together, like this:

ad rotator code before it's customized

That's not what your ads are going to look like! That's just the raw material.

Next, Set Up Your Ads

No matter how many ads you're running or what size you want them to be, the basic code setup is the same. I've added instructions to the code in ALL CAPS to show you where to place the ad details. Here's what to put where:

  • First, replace FIRST SPONSOR URL HERE with the link to your first sponsor. Leave the quotes in place.
  • Next, replace FIRST SPONSOR IMAGE URL HERE with the direct link to your first sponsor's ad image. Again, leave the quotes in place. Make sure to link directly to the image, not the page the image is displayed on in your image host's gallery.
  • Then, replace FIRST SPONSOR NAME with the name of your first sponsor. And leave those quotes in place, of course!
  • Replace WIDTH HERE with the width of your image. For example, if your images are 125px wide, replace WIDTH HERE with 125. Do not add px after the width value, and again, make sure to leave the quotes.
  • Replace HEIGHT HERE with the height of your image. I don't need to remind you to leave off the px or leave the quotes in place, right? ;)

Once you're finished with that, the code for your first ad space will look something like this:

ads[0] = '<a href="http://www.example.com" target="_blank" rel="nofollow"><img src="http://www.example-image-host.com/image-name.png" alt="Awesome Sponsor LLC" width="125" height="125"></a>'

You'll also see your first ad in the Codepen preview window, mixed in with the word jumble you saw before.

Don't worry, we'll fix that layout as we go!

Repeat the same process for each of the additional ads. If you need to add more ad spaces, make sure to increase the ads[ ] number for each additional ad.

If you don't have enough ads to fill all of the spaces, remove the extra ad spaces from the bottom of the ad group.

One Extra Step for Leaderboard Ads

This is only for leaderboard ads; if you're doing sidebar ads you can move on to the layout.

To set your leaderboard ads to show one at a time, scroll down to the line of code that reads:

document.getElementById('adspace').innerHTML += (ads[sort]);

Remove the + from that line and your ads will show one at a time.

Next, Set the Adspace Layout

At this point, all of the blue text you saw when you first opened up Codepen should be replaced by your ad images (if it's not, go back over the last step again). But, your ads probably aren't laid out quite right yet.

Scroll down through the code until you find the <style> tag. You'll find two empty CSS rules there, one for #adspace and one for #adspace img.

What you'll do with each rule will depend on what layout you need for your ads. Here's how to use them:

The #adspace Rule

For a single column of ads or leaderboard ads, enter the width of your ads inside the #adspace rule. For example, if I was running a single column of 250px wide ads, I'd write it like this:

#adspace {
width: 250px;
}

For two columns of ads, enter 2 times the width of your ads + 10 pixels inside the #adspace rule. This allows your images to line up in columns while leaving room for a bit of spacing we'll add in the #adspace img rule. In this example, I'm setting up two columns of 125px ads:

#adspace {
width: 260px;
}

If you'd like to center the ad space, add margin: 0 auto; below the width declaration, like this:

#adspace {
width: 250px;
margin: 0 auto;
}

The #adspace img Rule

If you're running a leaderboard ad, you can delete the #adspace img rule. This one is used to set spacing for groups of ads that are shown together.

If you're running large ads in a single column, you may want to add some space between the ads with a bottom margin inside the #adspace img rule, like this:

#adspace img {
margin-bottom: 5px;
}

If you're running two columns of ads, Add a float: left; to the #adspace img rule, and right and bottom margins to put some space between the images in a two-column layout. Try this to start:

#adspace img {
float: left;
margin-right: 5px;
margin-bottom: 5px;
}

You can adjust the margins by increasing or decreasing the pixel value of the margins. You can change the float to right if you like (keep in mind that float: center; doesn't exist).

Now, Add the Adspace to Your Blog

At this point your ads are rotating and your layout looks great. Now it's time to add your code to your blog! Copy all of the code from the HTML block on Codepen and paste it into:

  • A new HTML/JavaScript gadget on Blogger.
  • A new HTML/JavaScript Adder widget on self-hosted Wordpress.
  • On Typepad, use the "Embed your own HTML" option in your Content menu.

Save your widget/gadget and go check out your ad space!

How the Rotation on Refresh Works

This code selects ads to rotate at random. This means you may see the same ad in the same position a few times in a row. That doesn't mean the code isn't working. Think of it like flipping a coin — you'll often get the same result from lots of flips.

If your ads never change places on page refresh, then something is wrong. Double check your code to make sure everything is in place from the original code and you've filled in all of your ad slots properly.

Show Off Your Work!

Now that you've set up your rotating ads, I'd love to see them! Leave me a comment with a link to your blog, Tweet at me @MMosley, or get in touch on Google+.