How to build a Jekyll tweet template 

Published 2016-12-27 on flowinho.io

category | code jekyll twitter css javascript

The goal

  • The goal of this tutorial is to enable a jekyll site to include a tweet by providing the tweets URL to a jekyll template.
  • This would regularly be achieved using a plugin, but for this tutorial a template will be used.
  • Using a template ensures compability to GitHub Pages, which disallows usage of Plugins for security reasons.
  • Using a unified and easy syntax makes it easier to use when blogging from mobile.

The sample tweet

This is a sample tweet that we’re going to embed using just one line. It’s current official embedding code is provided by the Twitter website:

<blockquote class="twitter-tweet" data-lang="de">
  <p lang="en" dir="ltr">In an ideal world, a person would ask me to read &amp; agree the ToS of his cloud provider before asking me for my phone number.
  </p>&mdash; Flowinho (@Flowinho)
  <a href="https://twitter.com/Flowinho/status/803738985751158785">29. November 2016</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

We will shorten this to:

{% include tweet.html URL="https://twitter.com/Flowinho/status/803738985751158785" %}

Since everyone should be developing mobile-first, the tweet will also be centered.

The template

Create a new file called tweet.html inside your projects _includes folder. This is the default directory that Jekyll will search for HTML-files that are referenced using the {% include something.html %} liquid-tag. If this folder does not exist in your current setup, create it.

To reference the newly created site add the following anywhere somewhere in the content of your site:

{% include tweet.html %}

This adds the contents of the newly created file into the current site. Let’s go ahead and add some content to it. Add the following lines to tweet.html:

<div align="center" style="background-color:red;">
  <p>Hello there!</p>
</div>

When referencing this include, the result should look somewhat like this:

Hello there!

Template parameters

Under some circumstances, for example if you are running your jekyll-site on a hosting service that doesnt allow jekyll plugins (like GitHub Pages), you may need to give include-paramters to the template directly using Liquid.

When using Liquid-Paramters you have to be aware of the following:

  • The parameters are case-sensitive, and there is no way around it.
  • Parameters cannot have spaces.
  • If the values that are assigned include spaces, they must be properly escaped and / or the value must be wrapped in " ".

Begin building the template by cleaning up tweet.html, add the default tweet-code and center everything inside the div it will generate:

<div align="center">
    <blockquote class="twitter-tweet" data-lang="de">
    <p lang="en" dir="ltr">In an ideal world, a person would ask me to read &amp; agree the ToS of his cloud provider before asking me for my phone number.
    </p>&mdash; Flowinho (@Flowinho)
    <a href="https://twitter.com/Flowinho/status/803738985751158785">29. November 2016</a>
    </blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

The result should look like this:

Before adding the parameter URL to the template, pleae declutter the twitter-generated code by removing everything except the absolutely necessary information:

<div align="center">
    <blockquote class="twitter-tweet" data-lang="de">
    <a href="https://twitter.com/Flowinho/status/803738985751158785"></a></blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Now it’s time to substitute the Tweet-URL with a liquid-tag.

Replace the URL with {{ include.URL }} and your template should look like this:

<div align="center">
    <blockquote class="twitter-tweet" data-lang="de">
    <a href="{{ include.URL }}"></a></blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

And that’s it. The template is finished.

Examples

Here are some example tweets embedded by the template above:

Code:

{% include tweet.html URL="https://twitter.com/Flowinho/status/803738985751158785" %}

Result:


Code:

{% include tweet.html URL="https://twitter.com/valross2/status/807938333053775872" %}

Result:


I hope you enjoyed creating this little Twitter-Template and maybe it inspires you to create your own cool templates!