Sign In Chef

OR

No account yet? Sign up.

Forgot your password?

×

The Step-by-Step Guide to the spoonacular Toolkit

- Written by on October 25th 2013

The spoonacular recipe toolkit has three free widgets for food bloggers to help them improve their blogs— 1) the ingredient visualizer, 2) the price estimator, and 3) the nutrition visualizer. Maybe you've already seen the these widgets in action here on spoonacular.

If you're ready to:

  1. transform your own ingredient lists into appetizing visual lists
  2. provide an automatically-generated price breakdown for your recipes
  3. display easy-to-understand nutritional information
this step-by-step guide is for you!

If you're still not sure, read this blog post about the recipe toolkit's benefits.

Get Started

Start by opening the recipe toolkit. While you're at it, open up your blog editor (WordPress, perhaps?) and pull up the page you want to include the widget on. This is probably a specific recipe post.

Click "Build the Widget" (A or B below) once you've decided which widget you want to use (you can always add the other ones later— we know it's hard to choose...)


    If you chose the ingredient visualizer, continue with step 1 below.
    If you chose the price estimator or nutrition visualizer, click here.

    Using the Ingredient Visualizer

  1. Now that you've opened the ingredient visualizer page, you have a box for your ingredient list. Just type in or copy-and-paste your normal ingredient list, using one ingredient per line (see #1).
  2. Enter the number of servings your recipe makes.
  3. Decide between grid view or list view. Check out the examples to the right of the ingredients field. If you're still not sure, I recommend the grid. It's my personal favorite.
  4. Choose between US measurements (cups, tablespoons, teaspoons) or metric units (grams, milliliters).
  5. Click "Generate the Ingredient Visualizer"

  6. Easy so far, right? Now it gets a little trickier, but you're almost home free.

  7. Copy the code (everything in the box arrow #1 is pointing at)
  8. Take a look at the editor you're using to compose or edit your blog post. You will need to make sure you're in the "Text" editor, not the "Visual" editor (see #1 below). If your editor doesn't look like the one below, feel free to contact us directly for personalized assistance.
  9. Paste the code you copied in step 6 into the text editor (arrow #2)
  10. Save and voila! If everything worked, you should now have a visualized ingredient list like the one below.

Tasty. Once you get the hang of it, this process won't take long at all and you can quickly transform ALL your ingredient lists.

If you're ready to add the price estimator now, open the price estimator page. The next steps are very similar to what you just did; follow along below.

Using the Price/Nutrition Widgets

  1. Now that you've opened the price estimator or nutrition visualizer page, you have a box for your ingredient list. Just type in or copy-and-paste your normal ingredient list, using one ingredient per line (see #1)

  2. Enter the number of servings your recipe makes.
  3. For the price estimator, decide between full view or compact view. Check out the examples to the right of the ingredients field.
  4. Click "Generate the Price Estimator" or "Generate the Nutrition Visualizer"

  5. The next part is a little more complicated, but hang in there! ;)

  6. Copy the code (everything in the box arrow #1 is pointing at)
  7. Take a look at the editor you're using to compose or edit your blog post. You will need to make sure you're in the "Text" editor, not the "Visual" editor (see #1 below). If your editor doesn't look like the one below, feel free to contact us directly for personalized assistance.
  8. Paste the code you copied in step 5 into the text editor (arrow #2)
  9. Save and BAM! If everything worked, you should now have a price breakdown or a beautiful chart with nutrition facts.
  10. So that's a wrap! Please drop us a line if you have questions, concerns, praise, or criticism-- we want to hear it all!

Author

Crystal Schlegelmilch

Written by on October 25th 2013

More Interesting Articles to Read

Improve Your Food Blog in 30 Seconds: The spoonacular Recipe Blogger Toolkit

Each recipe widget we offer harnesses the scientifically-proven power of visuals to make your food blog or recipe blog better. You can communicate your recipes' ingredients, nutritional info...

How to Use the spoonacular App: User Guide

The spoonacular meal planning app for Android and iOS is now available for download. It has nearly all the same features as our website, and, also like our site, it's completely free! If you've alrea...

How to Meal Plan: The Ultimate Guide

'/> KISS principle. I have self-fe...

How to Start a Food Blog: The Ultimate Guide

So, you want to know how to start a food blog? You're ready to become a food blogger? Then you are in the right place; this article will give you step by step instructions on how to get your first b...