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 |
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
darkorlightand tells Twitter which theme to use. Ideally it should match your site’s theme. The default islight, but you can change this with the configuration variabletwitter_themein 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.
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.
{%- if page.tweet | default: 0 == 1 -%}
<!-- at least one tweet was embedded -->
<script async src="https://platform.twitter.com/widgets.js"></script>
{%- endif -%}