Skip to main content

How to add the Yum button to your site

  • Updated

Follow the instructions below to add the Yum button:

 

Blogger

  1. Copy the HTML code shown in the box on this page
  2. Open your Blogger site editor tools & select ‘Template’ from the navigation options
  3. Select the ‘Edit HTML’ button from the Template page
  4. Place your cursor anywhere inside the template HTML then select Command+F to display a Search box.
  5. Enter ‘post-header’ into the Search box and then ‘Return’
  6. Insert the Yum Button HTML code immediately after the </div> following the 'post-header-line-1' section as shown in the screenshot below. There will likely be 2 instances of this post-header code, so make sure to add the Yum button code after both instances.
  7. Select Preview to view the Yum Button is displaying properly and then Save Template.  

 

Wordpress.org

  1. Open your Wordpress site Editor feature (in the Appearance menu) and locate your post or content php template files
  2. Identify where you would like to position the Yum Button within your recipe page.
  3. Copy & paste  the HTML code for Wordpress.org blogs from here into the appropriate .php file based on where you intend for the Yum Button to appear on your site.
  4. Select Update File and view your blog to verify the Yum Button is displaying properly.

 

Wordpress.org (Genesis theme): With the Genesis Theme, you can use the Simple Hooks Plugin to easily add the Yum button code to your site. Ellen blogs give a great tutorial on this here: http://ellenblogs.com/how-to-add-just-a-yummly-button-to-your-recipes/

 

Wordpress.com (non-hosted): If you have a wordpress.com blog, you can add the Yum button within Sharedaddy via Jetpack (the default sharing option).

  1. In your wordpress blog dashboard, go to Settings>>Sharing.
  2. Click "Add a new service" under Available Services.
  3. Fill out the form and click Create Share Button.
  4. Sharing url: http://www.yummly.com/urb/verify?url=%post_url%&title=%post_title%&yumtype=button
  5. Icon url: http://www.yummly.com/favicon.ico
  6. Drag the Yummly button down to Enabled Services.
  7. Click Save Changes at the bottom of the page.

 *Note: The above method does not allow for an image preview when the Yum button is clicked, but the image will show up on the recipe on Yummly once processed.

 

Squarespace

  1. Grab the Yum button code after selecting the option for 'other'.
  2. Insert the code using a code block on your Squarespage blog by following these steps: https://support.squarespace.com/hc/en-us/articles/206543167

 

Adding the Yum button via share plugins/widgets:

If you use SumoMe, Shareaholic, AddThis, Po.st, Simple Share Buttons, AddToAny, or E-MAILiT you can add the Yum button as a service.

  • SumoMe: Drag Yummly from the available services list across to the selected services in the plugin settings. (They offer the Yum button via image hover!)
  • Shareaholic: Just search "Yummly" from their list of sharing services when adding a new button to the lineup: https://www.shareaholic.com/publishers/
  • AddThis: Within the Share button settings, choose "Select your own". Search for Yummly, then drag it over to the selected services box.
  • Simple Share Buttons: Use either their "plus" version or their free Wordpress plugin and add Yummly via their lineup of button options.
  • Po.st: When you are in settings of the WordPress plugin scroll until you see the sharing channels available. Add the Yum button to your tool and click Save changes.
  • AddToAny: Click "customize" and find Yummly in the additional sharing options (listed alphabetically)
  • E-MAILiT: Select Yummly from their sharing menu.

 

If you use another sharing plugin and Yummly doesn’t show up, you can contact them and ask them to add us!

 

Related articles