Buy Me a Pie! JS Button Plugin

This is a javascript plugin that adds a button to your web pages containing Schema-structured recipes (Microdata format). The button will allow a user to export ingredients from the recipe to the Buy Me a Pie! App.

See an example.

Simple installation

1. Place the following code on your page inside the body HTML tag:

<scripttype="text/javascript">window.bmapAsyncInit=function(){BMAP.init();};(function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://buymeapie.com/javascripts/plugins/bmap-button-plugin.v1.js";fjs.parentNode.insertBefore(js,fjs);}(document,'script','bmap-button-plugin'));</script>

2. Place the following code where you want to have a button:

<divclass="bmap-export-button"></div>

Also see an example: source, live.

Advanced installation

Configuration parameters

Global parameters

You can pass configuration parameters into BMAP.init() function as shown below:

<scripttype="text/javascript">window.bmapAsyncInit=function(){BMAP.init({lang: 'ru',buttonClassName: 'bmap-export-button'});};(function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://buymeapie.com/javascripts/plugins/bmap-button-plugin.v1.js";fjs.parentNode.insertBefore(js,fjs);}(document,'script','bmap-button-plugin'));</script>

Available parameters:

• lang - language to use. Supported values: en, ru. By default the plugin tries to obtain the language from the browser.
• buttonClassName - a class name of the DOM objects to search on the page and draw a button inside. Default: bmap-export-button.
• customButton - if you want to use your own button, set this parameter to true. DOM objects with the specified class name buttonClassName will be used as buttons. Default: false.

Button-specific parameters

You can specify button-specific parameters as attributes to a button container:

<divclass="bmap-export-button" data-button-title="Custom Button Title"></div>

At the moment only one parameter is supported:

• data-button-title - a button title. Not used when customButton set to true.

Multiple recipes on the page

By default the plugin only searches for the first recipe on the page. If your page contains multiple recipes and you want to draw a button for each of them, you need to link the button containers and the recipes with identifiers:

<divitemscopeitemtype="http://schema.org/Recipe" id="recipe-1">
...
</div>
...
<divclass="bmap-export-button" data-recipe-id="recipe-1"></div>
...
<divitemscopeitemtype="http://schema.org/Recipe" id="recipe-2">
...
</div>
...
<divclass="bmap-export-button" data-recipe-id="recipe-2"></div>

Providing ingredient name & amount

Recipe microformat prescribes that an ingredient should be placed in the field recipeIngredient or ingredients. It usually contains a string like "5 ml olive oil". We extend the recipe microformat with two fields where you can put an ingredient name and its amount. This way a user can export a more detailed recipe. Here is an example of the recipe markup:

 ...
Ingredients:
- <spanitemprop="recipeIngredient"><spanitemprop="amount">5 ml</span><spanitemprop="name">olive oil</span></span>
- <spanitemprop="recipeIngredient"><spanitemprop="amount">3/4 cup</span><spanitemprop="name">sugar</span></span>
...

See the full example here.