How to Add Yum Button to WP Recipe Maker

In this post we will explain how Yummly works and how to set up a Yummly account. But more importantly, we will give you detailed instructions on how to add a Yum button to the WP Recipe Maker recipe cards and snippets. But before we get there we need to go through the general details of Yummly and what the Yum button is and does.

Content in this Post

What is a Yum Button

Below is an example of a recipe posts with three different Yum buttons showing — one on the top left side of the page, one on the top of the recipe post, and one on the recipe card itself.

By clicking on one of the Yum buttons, you will be able to save the recipe you are viewing to your own Yummly page. The Yum button works similarly to a Pin button in this regard.

Continue reading to find out how to add a Yum button to your own recipe page using WP Recipe Maker template editor and snippets.

What is Yummly

Yummly is a social sharing website for foodies, like us. Think of it as a blend of Pinterest and Google, that exclusively shows information about recipes. Users and publishers can share (or Yum) recipes on the platform.

Similar to Pinterest, once shared and analyzed by Yummly (more about this later), the recipes contain rich meta data (basically intelligent information) linked to the original recipe page. However, Yummly takes the information a step further and uses it to present recommendations to individual viewers. The tailored information can be based on diet, allergies, tastes, and more, as stated on the Yummly About page.

In addition, the individual users can create meal plans and get suggestions on recipes to cook based on user preference and data. It’s basically an intelligent, personalized, cook book and kitchen tool with new recipes constantly added to it.

Why You Should Use Yummly

If you want to browse over two million delicious recipes — discover, save and organize your new favorite dishes — and get help to plan your next meals based on your unique preferences, then Yummly is the perfect website and App for you.

Each recipe on Yummly is expertly crafted and beautifully photographed. The list of ingredients is precisely measured and each step required in recreating the dish is listed with easy-to-follow instructions.

The recipes can be saved and categorized, such as course, to make it easy to find when needed. You can create your own collections of recipes and sort them according to the date they were created or modified, as well as by name.

How to Start a Yummly Account

To start Yumming (saving recipes to Yummly) you first need to create a Yummly account. Simply head over to Yummly.com and click on the “Sign Up / Log In” button in the top left corner of the page (or the mobile menu if you are reading this on your smartphone).

Here you will have the option to connect using your Facebook, Google, Apple or Email account. Next you will be asked to provide your name. After that, you have the option of receiving a list of emails from Yummly, such as recipes, deals, new features, and educational content to mention a few.

Once connected you can add additional information (such as skill level and household size) to help Yummly tailor the recipes for you. You will also need to provide your password in the account settings below the email preferences. If you skip this step you will receive an email with login instructions next time you try to log in.

Your personal Yummly account will be given a special name, for example SuperChef, and a four-digit code. Your profile page address will then be https://www.yummly.com/profile/SuperChefxxxx, where xxxx is the four-digit code.

When you have your Yummly account all set up, you can change your profile picture and write a short (120 characters) description about yourself. You can also update your social links (Facebook page, Twitter feed, Pinterest page, and website address) by clicking on the icons below your name. You also have the option to enter your city, state, and country here.

How to Start Yumming Recipes

All right. You are now all set to start Yumming recipes. Simply head over to our collection of recipes and click one of the Yum buttons as shown above. If you are logged in to your Yummly account, the recipe is automatically saved to your “Recipe Box”. If you are not logged in, you will be asked to do so before the recipe can be saved. It’s that simple.

How to Add Recipes to Your Yummly Collection

You can also Yum recipes within Yummly. To do so, just click on “Browse” in the Yummly menu to start browsing all recipes available on Yummly. You can also look for recipes using the search bar on top of the page. The search results will be presented based on your “taste preference”. More on this later though.

When you have found a recipe you want to add to your collection, simply click on the orange Yum button below the recipe picture. This will add the recipe to your Yummly page.

How to Organize Your Yummed Recipes

After you have yummed a recipe to your Yummly account, you can now organize it in one of the predefined cuisines or a category of your own.

In the Yummly menu, click on “Saved Recipes”. Here you will find all the recipes you have saved. There are three white dots in the top righthand corner of each recipe picture. A menu appears if you click on them. This menu allows you to check off the categories (or collections) you want to save the recipe to. Simply check each category or click on “+ NEW COLLECTION” to create your personal category.

Why Yummly is Showing a Generic Recipe Picture

When you first Yum a recipe, the picture that appears on Yummly is not the actual recipe picture. Instead, a generic picture is used as a placeholder for the recipe, such as one of these below.

 

 

 

 

Once a recipe is saved, Yummly will analyze it and extract the specific recipe information from the source recipe card. By clicking on the picture you are taken directly to the source webpage of that recipe.

When the recipe information has been collected and analyzed (or indexed) by Yummly, the picture is updated to the actual recipe picture. Clicking on the picture no longer takes you to the recipe source webpage, but instead to the Yummly recipe page.

Yummly Recipe Information and Smart Shopping List

After a recipe has been indexed by Yummly, all the recipe information is now neatly laid out in a standard format. The information that is displayed is now Yummly’s version of the recipe information, organized in sections such as, ingredients, cooking steps and nutritional information, similar to the original source recipe card. However, Yummly also adds filter information, based on your taste, dietary information and preferred choice of ingredients. Pretty neat!

Speaking of ingredients, the page allows you to easily transfer some or all ingredients to an online shopping list (powered by Basketful). Depending on your location, the recipes can then be order with the click of a button. Pretty neat!

Your Taste Preference on Yummly

Yummly has a unique search engine that presents results based on your preferences. As mentioned on Yummly’s “how-it-works” page, the search result can be narrowed down by cook time, course, cuisine, occasion, diet, allergy, nutrition and more.

In addition, if you specify your diet needs and indicate any allergies you may have, the search results are further narrowed down to only show recipes that fall within those restrictions.

Yummly Meal Plan with Calendar Reminder and Timer

Yummly also have a nifty meal planning tool. You can use it to schedule your cooking session based on when you want the recipe to be ready. Simply select the recipe, the date and time you want to eat and add it to your calendar.

Based on the cooking steps in the recipe, you will then receive reminders for when to start the food prep and for when to start cooking. This can be very handy when you are planning larger meals or cooking multiple dishes.

Yummly Profile for Publishers

Aside from providing users a personal account, Yummly also have a publisher profile section for food bloggers alike. The publisher profile is a page to showcase all your recipes and for visitors to get more information about you. However, the process of becoming a publisher on Yummly isn’t as straight forward as signing up for a personal account. No worries though. We will make sure all the necessary steps are captured below.

But before we start explaining the steps needed to become a Yummly Publisher, we just need to go through some key information that will help you along the way.

The below information is only applicable to self hosted websites using WordPress.

Add a Yum Button Through Social Share Plugins

First, to start the process of adding a publisher profile, you need to set up your recipes to have an ability to be Yummed. The easiest way to do this is to add a social share plugin that has Yummly as an option. These plugins come in different ways and many have a whole suite of social share options.

We use the Sassy Social Share plugin by Heateor. It’s a free plugin that places floating social share buttons on your webpage (or a fixed bar at the bottom of your mobile version). What’s great about this (aside from having over 100 social networks) is that the setup requires very little effort. The Yummly button is automatically integrated into each recipe post without the need for any additional setup or programming on the individual pages.

Add a Yum Button Through HTML Script

Yummly provides the option of adding a Yum Button to individual recipe posts through a simple HTML script. The code for the script is this:

<a href="https://www.yummly.com" class="YUMMLY-YUM-BUTTON">Yum</a>
<script src="https://www.yummly.com/js/widget.js?wordpress"></script>

The script will add this Yummly button    to your page and will allow people to Yum your recipe.

The button above is just an example as you should only add this script to actual recipe posts, not blog posts like this. You can click on this link to read more about the Yum Button.

Keep in mind, unless you add this script to a template or a reusable block, you would have to add this script manually to each page you want the button to appear on.

That is also why you won’t find this script-button on our recipe pages. Instead, we have integrated a custom Yum Button to our recipe card template as well as the recipe snippet template (the recipe shortcuts that appear at the top of each recipe page).

The below information is only applicable to the WP Recipe Maker plugin

Add a Yum Button to the WP Recipe Maker Recipe Card

Okay, we have finally arrived to the section you have been waiting for — HOW TO ADD A YUM BUTTON TO WP RECIPE MAKER. As mentioned above, we have created a custom Yum Button that is integrated into our WP Recipe Maker recipe card. The basic information is available on Yummly’s page “How to add the Yum button to your site”.

However, the code you need for the button to work is not directly available here. You need to make modifications to it to function on the WP Recipe Maker recipe card. If you need information on how to modify your WP Recipe Maker template, there are great instructions on the developer’s (Bootstrapped Ventures) website.

To make a Yum Button like this one:    you need to add a “Link” to the recipe card template.

The link block should have the following address:

http://www.yummly.com/urb/verify?url=%recipe_url%&title=%recipe_name%&yumtype=button

Notice how the address has the %recipe_url and %recipe_name attributes instead of the %post_url and %post_title attributes provided on the Yummly help page. This is because the WP Recipe Maker uses these attributes in the recipe card rather than the standard post-attributes.

Next, you need to define the icon using a custom URL:

http://www.yummly.com/favicon.ico

This is the link to the icon used by Yummly as their “favicon” on the browser tabs. Notice how it is the same as on our Yum Button?

Lastly, you need to add the following CSS code to the recipe template:

.wprm-recipe-template-name_of_WP_template-name_of_your_template .wprm-recipe-link-inline-button img {width: 22px; margin-bottom: -4px;}.

You need to change the “name_of_WP_template” to the name of the template you are using (such as basic, chic, classic, cutout, or poster). You can find this name in the rest of the CSS code used on the recipe card.

Similarly, the “name_of_your_template” needs to be changed to the name you saved your recipe card templates as. For example, if the recipe card template is called “allspicedout”, the “name_of_your_template” would be replaced by “allspicedout”

The CSS code is needed to define the width (and height) of the icon as the native size of it is 48px by 48px. Similarly, the bottom margin needs to be set to negative 4px to allow the icon to be aligned at the same height as the default WP Recipe Maker icons.

The actual width and margin values depends on your default font type and size. You will have to review the actual button once it’s completed and adjust to make it match the rest of your buttons.

Add a Yum Button to the WP Recipe Maker Recipe Snippet

If you also want to add the Yum Button to your WP Recipe Maker Recipe Snippet (the shortcuts showing on the top of the recipe page), like this:    you also need to add a “Link” to the recipe snippet template.

You can also add a Yum button to the WP Recipe Maker snippet. This allows you to automatically have a Yum button at the top of each recipe post. To set it up, you use the same link address and icon URL as before:

http://www.yummly.com/urb/verify?url=%recipe_url%&title=%recipe_name%&yumtype=button
http://www.yummly.com/favicon.ico

Although the link address and the icon URL is the same for both the recipe card and the snippet buttons, the CSS code is slightly different.

.wprm-recipe-template-name_of_WP_template-name_of_your_template .wprm-recipe-link img {width: 21px;margin-bottom: -5px;}

The width of the icon needs to be changed to 21px and the bottom margin set to negative 5px. In addition, the recipe card uses a “recipe-link-inline-button” whereas the recipe snippet uses a “recipe-link”.

The below information is only applicable to the Yummly Publisher Page

How to Become a Yummly Publisher

That was a lot of talk about Yum Buttons. What about the steps needed to become a Yummly Publisher?

Alright, as mentioned before, you need a way to Yum your recipes to be able to start the process of becoming a Yummly Publisher. You don’t need to be a Yummly Publisher to have a Yum Button on your recipe pages, but you do need to have a Yum Button on your recipe pages to become a Yummly Publisher

You see, without a way of Yumming the recipes there is no way for Yummly to create your Publisher Profile.

So, since you now have the proper setup on your webpage to Yum the recipes, you can go ahead and start a personal Yummly account as described here.

Once you have your personal Yummly account created, you can go to your recipe webpage and Yum a couple (three to four) of your own favorite recipes.

The recipes you yummed will initially have the generic Yummly picture as described here.

At this step of the process, Yummly will now assess your recipes and determine if they are suited for their website. This process can take two to four weeks, or sometimes more.

To speed up the process, you can send an email to the support group found on this page. In the email, list your personal Yummly account name as well as your recipe website.

You should receive an email back within a few days with instructions on to how to complete the setup of your publisher profile page.

The instructions are basically to fill out a Google Docs form and submit it to Yummly.

Questions on the Publisher Profile Signup Form

Here is the complete list of questions asked on the publisher profile signup form:

• What is the URL of your blog’s page on Yummly?
• What is the URL to your site’s Facebook page?
• What is your Twitter page url?
• What is your Pinterest page url?
• What is your Instagram url?
• What is your YouTube url?
• Provide a URL to an image you would like on your profile page.
• About Me: Provide a brief paragraph that describes your site.

Keep in mind when submitting the profile picture URL, the image size is recommended to be 200px by 200px. Also, the picture will be displayed inside a circle so make sure none of your picture or logo details will be cropped by the circle.

Tip: use PowerPoint or Google Slides to overlay a circle on your chosen picture to be sure.

Once you have submitted the form to Yummly it will take a few days for them to process the information and update your Publisher Profile page.

Summary and Key Takeaways

In this post we have highlighted how Yummly works and how to get you started with adding recipes to your personal Yummly account. We also walked through the steps on how to become a Yummly Publisher, for those who have a food blog, and how to add a Yum button through WordPress plugins and HTML codes. Lastly, we described in detail how you can add your own Yum button to WP Recipe Maker.

It is not difficult to add a Yum button to your webpage or to the WP Recipe Maker template. You just need to add a custom link with the information described above. Make sure you change the generic Yummly link code to work on WP Recipe Maker. Also, don’t forget to add the separate CSS code to format the icon on the button correctly.

Additional Help from Yummly and WP Recipe Maker

Should you need additional help from Yummly, please visit their support page and review the Publisher Help Topics section.

If you need support on your WP Recipe Maker plugin and template editor, please visit Bootstrapped Ventures Knowledge Base and review the FAQ section.