Sign in

Add the Only Eats nutrition button

Add a button to display nutrition information for every recipe on your website or blog. Help your users stay informed. The Nutrition Button works with WordPress, SquareSpace, and any custom website.

Nutrition button preview

Only Eats


<script async src=""></script><a href="" class="onlyeats-nutrition">Only Eats</a> Click here to copy

How do I add the Nutrition Button to my site?

1. Copy the HTML shown in the box above.
2. Paste the HTML into your post or content template.

Easy instructions for Wordpress

Follow these instructions to add the Nutrition Button to all posts on a Wordpress site.
Follow these instructions to add the Nutrition Button to an individual post on a Wordpress site.


Why add the Nutrition Button to my site?

Visitors to your site want to make educated choices about what they cook and eat. The Only Eats Nutrition Button allows you to easily provide a valuable tool to help your visitors stay informed.

How does the Nutrition Button work?

Only Eats automatically analyzes a recipe and then calculates an accurate nutrition profile with data compiled from the USDA, FDA and several other sources.

Need help?

Contact us — we'd be happy to walk you through the setup process. We can even help you style the Nutrition Button to match your website.


  • Custom URL (data-url="")
    If you need the button to appear in an index of recipes, where the page is something like
    rather than
    it will help if you manually put in a URL for each one. However, it is pretty good at figuring out the correct url on it's own.

    This option can also be used to link to a well-formatted alternative url (think a text file or recipe schema) if the markup on the page you display is so funky that OnlyEats cannot understand it. If that's the case, it's probably still preferable to just include a well-formatted schema in the page itself, for your own sake (SEO etc).
  • Servings (data-servings="auto")
    By default, our system will do it's best to figure out the number of servings for your recipes. If it struggles, you can help it out.
  • Position (data-position="below")
    You can make the box appear above the button rather than below. Only applies if you are using our stylesheet.
  • Button text (data-button-text="Nutrition Information")
    Customize the button text. By default it says "Nutrition Information".
  • Button style (style="")
    Maps to the style property of the button so you can conveniently override the css for the button color, font, size, etc.
  • Complete customizability
    Know CSS pretty well? You can customize everything by overriding our styles, including the behavior of the widget (javascript is only used to load the data). Just keep the Only Eats logo, thanks. Our markup and naming scheme probably won't change, but no promises. The best way to override the styles is to increase the specificity of the rules, e.g. "#your-container-element > a.onlyeats-nutrition"

Here are all of the custom properties used at once, for your copying and pasting pleasure.

<script async src=""></script>
<a href="" class="onlyeats-nutrition"
    data-button-text="custom button text"
    style="background-color:orange; text-transform:none;"
>Only Eats</a>


  • This widget is intended for websites with mostly original content, such as blogs and other personal websites, and is not to be used with aggregation services such as a search engine (if you are interested in using this button on such a scale, contact us).
  • Please keep the "powered by Only Eats" link intact.
  • We reserve the right to revoke access for anyone using this widget at any time.
  • Full terms are here.

Welcome to Only Eats

Please continue with Facebook or Google to save recipes.
Continue with Facebook
Continue with Google

By signing in, you agree to our terms of service.