Quick Tip: How to Build Customizable HTML Widgets in Jekyll

The static site generator Jekyll is known in web design circles for being light-weight and "hacky". But that is only part of the truth. Jekyll is surprisingly powerful in terms of what you can do with it, and how user-friendly you can make it to non-technical users and clients.

In this quick tip, I will show how you can build HTML widgets that your clients or team members can easily customize and include anywhere in a Jekyll project—no Ruby plugins needed, just Liquid, the open source template language created by Shopify, and good old HTML.

Setting Variables

There are several ways of setting variables for customization. In this article, I'll introduce two of them: the inline and Front matter methods.

Inline Variables

Setting variables inline is the best option if there's a good chance the widget will be included more than once, say, in a blog post. In this example I'll use a PayPal button.

First, create a new file called paypal-widget.html in your _includes folder. Then, fill it with this code:

[code language="html"]
<form action="http://ift.tt/rDmnwQ" method="post" target="_top">
<input name="cmd" type="hidden" value="_s-xclick">
<input name="hosted_button_id" type="hidden" value="VALUE">
<button class="buy-button" name="submit">Buy Now</button>
<img src="http://ift.tt/rpOo6s" alt="" width="1" height="1" border="0" style="display: none !important;">
</form>
[/code]

The above example will generate a simple "Buy Now" button, allowing people to pay via PayPal. There's just one problem: the code is static and can't be customized.

The widget has two elements you will want to keep dynamic: the value of the hosted_button_id and the button label. Achieving this with inline variables is quickly done:

[code language="html"]
<form action="http://ift.tt/rDmnwQ" method="post" target="_top">
<input name="cmd" type="hidden" value="_s-xclick">
<input name="hosted_button_id" type="hidden" value="">
<button class="buy-button" name="submit"></button>
<img src="http://ift.tt/rpOo6s" alt="" width="1" height="1" border="0" style="display: none !important;">
</form>
[/code]

The variables you added are include.id and include.button. When you are ready to include the HTML widget inside, say, a Markdown post, you can simply do this:

[code language="html"]
Liquid error: This liquid context does not allow includes.
[/code]

This will create a button labeled "Buy Now | $30". You can include the same file several times in the same page, each with different include.id and include.button values, as they are set individually inline.

Front Matter Variables

Continue reading %Quick Tip: How to Build Customizable HTML Widgets in Jekyll%

by Jon Persson via SitePoint