Twitter Email
subspace (/ˈsʌbspɛɪs/)
A Jekyll playground site

A simple Liquid template Tag to embed tweets

Author: Admin
Title: A Tweet Tag for Jekyll
Language: en-US
Number of words: 374
Category: Jekyll
Created: 19:15 on Wednesday, 03. November 2021
Modified: 19:15 on Wednesday, 03. November 2021
Keywords: jekyll, liquid, code, tweet, tag, twitter
Excerpt:

This is a simple Jekyll plugin for embedding Tweets into your posts or articles. It is simple to implement and use.
Tags: Jekyll
Page layout: nonav
Last modified: , 374 Words
19:15 on Wednesday, 03. November 2021 | by Admin in Jekyll

Table of Contents 

Description

This tag embeds a tweet by either its full URL or by User name and Tweet ID. The parameters are in JSON Format and there are only four of them.

  • user: The user name who tweeted.
  • id: The Tweet’s status id. Both user and id must be specified and have lower priority than the url parameter.
  • url: The full URL of the Tweet. This has precedence over the user/id method.
  • theme: Optional - can be either dark or light and tells Twitter which theme to use. Ideally it should match your site’s theme. The default is light, but you can change this with the configuration variable twitter_theme in your _config.yaml.

Examples

// embed tweet by its full URL
{% tweet { "url": "https://twitter.com/jekyllrb/status/1442477550429671429" } %}
// you can embed the same Tweet with the user / id method
{% tweet { "user": "jekyllrb", "id": "1442477550429671429" } %}


The Ruby code

This is the Jekyll plugin. Save it to a .rb file, put it into _plugins and then rebuild your site.

Code: (click to select all)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# Tags are part of the Jekyll module and must inherit from Liquid::Tag
require 'json'

module Jekyll
  # implements a simple tweet tag
  # excepts 2 parameters user and id for the tweet
  # optional theme can be set to dark or light
  class TweetTag < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
    end

    def render(context)
      # paramter string must exist
      if ( !@text.nil? && !@text.empty? )
        jdata = JSON.parse(@text)
        if( (jdata.key?('id') && jdata.key?('user')) || jdata.key?('url') )
          url = ''
          if ( jdata.key?('url') )
            url = jdata['url']
          else
            user = jdata['user']
            id = jdata['id']
          end
          
          # this sets a page variable "tweet" to 1
          # to signal that a tweet was embedded. The footer template
          # SHOULD check for it before it embeds the JS from twitter.
          context.registers[:page]['tweet'] = 1
          theme_default = context.registers[:site].config['twitter_theme']

          if ( theme_default != 'light' && theme_default != 'dark')
            theme_default = 'light'
          end
          theme = jdata.key?('theme') ? jdata['theme'] : theme_default

          output = <<~MARKUP
          <div style="display:flex;justify-content:center;">
          <div class="tweet-container" style="margin: auto; width: 550px;">
          <blockquote class="twitter-tweet" data-theme="#{theme}">
          MARKUP
          if ( !url.blank? )
            output += "<a href=\"#{url}\">Twitter content</a>"
          else
            output += "<a href=\"https://twitter.com/#{user}/status/#{id}\">Twitter content</a>"
          end            
          output += <<~MARKUP
          </blockquote> 
          </div>
          </div>
          MARKUP
          return output
        end
        return ""
      end
      return ""
    end
  end
end
Liquid::Template.register_tag('tweet', Jekyll::TweetTag)

Embedding the Script (Important step!)

In order to display embedded tweets, Twitter’s widget script must be loaded, preferably at the bottom of the page and only if one or more tweets were actually embedded. The following liquid fragment will do this. Place this in your site’s footer code. It will only embed the script when the page variable page.tweet is set to 1. This variable is set by the plugin above in line 31 and ensures that ONLY pages with embedded Tweets will load the script from Twitter’s site.

Code: (click to select all)
{%- if page.tweet | default: 0 == 1 -%}
<!-- at least one tweet was embedded -->
<script async src="https://platform.twitter.com/widgets.js"></script>
{%- endif -%}

Test