< Back to Only Eats
Add The Only Eats Nutrition Button
Add a button to display nutrition information for every recipe on your website. Help your users stay informed. The Nutrition Button works with WordPress, SquareSpace, and any custom website.
Nutrition Button Preview
<script async src="https://www.onlyeats.com/js/nutrition.min.js"></script><a href="https://www.onlyeats.com" class="onlyeats-nutrition">Only Eats</a>
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.
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.
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
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
Here are all of the custom properties used at once, for your copying and pasting pleasure.
<script async src="https://www.onlyeats.com/js/nutrition.min.js"></script>
<a href="https://www.onlyeats.com" class="onlyeats-nutrition"
data-button-text="custom button text"
- 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.