Tweet quotes

jekyll-twitter-plugin allows easy and fast tweet quoting using liquid tags with Jekyll. For example, the quoted tweet will be shown as:

You can find the Github repo for jekyll-twitter-plugin here.

1. Install

The jekyll-twitter-plugin plugin can be added to a Jekyll site using gem. Since I’m not using Gemfile for my site, I need to do the following:

gem install jekyll-twitter-plugin  --user-install

And then add the following to my _config.yml:

plugins:
  - jekyll-twitter-plugin

That’s it, you are (or I am?) all set!

2. Using the plugin

To add an interactive tweet to your blog, simply put the following to your .md file:

{% twitter https://twitter.com/rubygems/status/518821243320287232 %}

The syntax is:

{% plugin_type twitter_url *options %}

where you can get twitter_url from by clicking the share button and then copy link to Tweet button on Twitter.

There are several options to tune the style of the quoting tweet, to see them, click here.

For example, I like to use:

align=center

to center the tweet card:

jekyll-twitter-plugin (1.0.0): A Liquid tag plugin for Jekyll that renders Tweets from Twitter API http://t.co/m4EIQPM9h4
— RubyGems (@rubygems) October 5, 2014

Automatic theme

The theme, however, does not change automatically upon switching the prefers-color-scheme html tag. To overcome this, I found this [ blog post] from Luke Lowrey that by adding the following to your _layouts/default.html:

<!-- automatic change theme for jekyll-twitter-plugin liquid tag -->
<script>
var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

setTimeout(function() {
  var targetTheme = storedTheme == "dark" ? "light" : "dark";
  switchTweetTheme(targetTheme, storedTheme);
}, 1000);

function switchTweetTheme(currentTheme, targetTheme) {
  var tweets = document.querySelectorAll('[data-tweet-id]');

  tweets.forEach(function(tweet) {
    var src = tweet.getAttribute("src");
    tweet.setAttribute("src", src.replace("theme=" + currentTheme, "theme=" + targetTheme));
  });
}
</script>

We can automate the theme switching. However, note that it only works statically meaning if you change prefers-color-scheme after the website is loaded, you’ll need to refresh the page to see the change.

That’s it! Easy peasy! Enjoy sharing your tweets!

Update

Okay, that’s actually not it… Github pages has it’s own list of allowed jekyll plugins, and it does not include jekyll-twitter-plugin. However, you still can add the card directly to your .md file using html (with iframe and some javascript):

<blockquote class="twitter-tweet"><p lang="sv" dir="ltr">jekyll-twitter-plugin (1.0.0): A Liquid tag plugin for Jekyll that renders Tweets from Twitter API <a href="http://t.co/m4EIQPM9h4">http://t.co/m4EIQPM9h4</a></p>&mdash; RubyGems (@rubygems) <a href="https://twitter.com/rubygems/status/518821243320287232?ref_src=twsrc%5Etfw">October 5, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The html code can be easily obtained by clicking the three little dots on the top right corner of a tweet and select “Embed Tweet”.

To center align the tweet, put tw-align-center after twitter-tweet:

<blockquote class="twitter-tweet tw-align-center"><p lang="sv" dir="ltr">jekyll-twitter-plugin (1.0.0): A Liquid tag plugin for Jekyll that renders Tweets from Twitter API <a href="http://t.co/m4EIQPM9h4">http://t.co/m4EIQPM9h4</a></p>&mdash; RubyGems (@rubygems) <a href="https://twitter.com/rubygems/status/518821243320287232?ref_src=twsrc%5Etfw">October 5, 2014</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>